SerVer
-
Fast mode development and build for production!
-
Make in typescript! :D
-
Use ejs(future more templates) templates for pages and components!
-
Description:
serVer is a group of plugins and utilities that you help when work in a proyect of frontend. Loads your data before the build and compiles your code(javascript, css, .ejs(template)). Using Static site generation concepts, and others strategies.
Table of Contents
- How get?
- Sv-cli
- Concepts basics
- Config Files
- How to build my project for production?
- How can I test my project in production?
How get?
Run:
npm install @sv-cd/core -D
Sv-cli
Use serVer cli.
How use sv-cli?
$ sv help
Usage: sv [options] [command]
Options:
-v, --version sv version
-h, --help display help for command
Commands:
dev [options] Starting your proyect in mode development
build [options] Starting build of your project for production
start [options] Start your application for production
help [command] display help for command
How use sv-cli in mode dev?
In dev(development) mode, it comes by default, these are the commands in this mode.
$ sv dev -h
Usage: sv dev [options]
Starting your proyect in mode development
Options:
--root <root> Select root of pwd (default: ".")
--open [open_browser] Open browser(Select Edge, Firefox, Opera(If you use opera GX it will automatically open it) or Chrome) (default: false)
-p,--port <port_number> This is the port where you will work in development mode (default: "5000")
--pages <pages_root> Select root of pages (default: "./pages")
--styles <styles_root> Select root of styles(css) (default: "./src/styles")
--assets <assets_root> Select root of assets(images and manifest.json) (default: "./src/assets")
--scripts <scripts_root> Select root of javascript(js) (default: "./src/scripts")
--only-reload [specific_only_reload] Specific only-reload, in css, html(Specific true, all will use strategy only-reload)) (default: false)
-h, --help display help for command
Concepts basics
There is a concepts basics for use serVer
Structure your directorys
serVer use a structure for your pages, styles, javascripts and assets.
Use a structure similar to this.
📦src
┣ 📂assets
┃ ┣ manifest.json
┃ ┗ 📜logo.jpg
┣ 📂components
┃ ┗ 📜header.ejs
┣ 📂styles
┃ ┣ 📜styles.css
┣ 📂scripts
┃ ┣ 📜index.js
📦pages
┃ ┣ 📂dashboard
┃ ┃ ┗ 📜settings.ejs
┃ ┣ 📜index.ejs
Routes
SerVer has a file-system based router built on the concept of pages.
When added a file .ejs
in the carpet pages, automatically available as a route.
Index
The router will automatically routes files named index to the root of the directory pages
.
-
pages/index.ejs
→/
-
pages/blog/index.ejs
→/blog
Nested routes
These routes are generated when you create a subfolder within a folder, this in the directory pages
.
-
pages/user/profile.ejs
-->/user/profile
-
pages/posts/html.ejs
-->/posts/html
Config Files
File config.data.js
This is a file where you can add variables to your ejs files. With dynamic routes, you can create dynamic pages, start with :id
and file is [id]
.
Create a file named config.data.js
Accept module/exports Ecmascript 6+ and CommonJS
Squemas:
With commonJS
exports.[page] = {
[':[dinamycPage]']: {
[variable: (string | number)]: // Function, string, object, any
},
['/[subPage]']: {
['/[subPage]']: {
// ...
[variable: (string | number)]: // Function, string, object, any
}
[variable: (string | number)]: // Function, string, object, any
}
[variable: (string | number)]: // Function, string, object, any
}
exports.["notFound"] = {
[variable: (string | number)]: // Function, string, object, any
} -> `Data for 404 page`
With module/exports Ecmascript 6+
export const [page] = {
[':[dinamycPage]']: {
[variable: (string | number)]: // Function, string, object, any
},
['/[subPage]']: {
['/[subPage]']: {
// ...
[variable: (string | number)]: // Function, string, object, any
}
[variable: (string | number)]: // Function, string, object, any
}
[variable: (string | number)]: // Function, string, object, any
}
export const notFound = {
[variable: (string | number)]: // Function, string, object, any
} -> `Data for 404 page`
Examples
// This variable is available on the index page
export const index = {
title: "First Proyect with serVer",
};
export const posts = {
[":post"]: () => {
const posts = getPosts();
return posts.map((post) => ({
name: post.name,
data: post.data,
}));
},
};
// With commonJs
exports.index = {
title: "First Proyect with serVer",
};
exports.posts = {
[":post"]: () => {
const posts = getPosts();
return posts.map((post) => ({
name: post.name,
data: post.data,
}));
},
};
In files
📦src
┣ 📂pages
┃ ┣ 📂dashboard
┃ ┃ ┗ 📜settings.ejs
┃ ┣ 📂posts
┃ ┃ ┗ 📜[post].ejs
┃ ┣ 📜index.ejs
How to build my project for production?
Is simple, only run this command once.
sv build
For look options:
$ sv build -h
Usage: sv build [options]
Starting build of your project for production
Options:
--root <root> Select root of pwd (default: ".")
--dist <dist_proyect> Is a place where will bundle of your project (default: "public")
--pages <pages_root> Select root of pages (default: "./pages")
--styles <styles_root> Select root of styles(css) (default: "./src/styles")
--assets <assets_root> Select root of assets(images and manifest.json) (default: "./src/assets")
--scripts <scripts_root> Select root of javascript(js) (default: "./src/scripts")
--clear Delete the bundle folder before the initialization of the "build" processes (default: false)
--info Show more information about build process (default: false)
-h, --help display help for command
After of run this command, creates a carpet of your application's bundle.
How can I test my project in production?
We can test the project in production, with this simple command.
sv start
You can change the port with flag --port
and change your directory build with flag --dist