Assets's directory (default: "assets")
-h, --help display help for command
```
### ¿How use plugins in sv-cli?
Use `plugins` create for server.
```sh
$ sv --plugins @sv-cd/plugin-init:withoutComments=false,exclude=css-js --otherPlugin:hisOptions--...
```
To make it easier to understand, we recommend using `sv.config.js`, go to [svConfig][12].
## 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.
You can save time by installing the [@sv-cd/plugin-init][45] plugin which creates all the directories according to your configuration.
📦src
┣ 📂assets
┃ ┣ 📜codedoctors.png
┃ ┗ 📜html.png
┣ 📂components
┃ ┗ 📜header.ejs
┣ 📂styles
┃ ┣ 📜styles.css
┣ 📂[Directory of your templates]
┃ ┗ 📜post.ejs
┣ 📂js
┃ ┣ 📜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.
Create a file named `config.data.js`
Accept **module/exports Ecmascript 6+** and **CommonJS**
### Squemas:
With commonJS
```typescript
exports.[page] = {
[variable: (string | number)]: // Function, string, object, any
}
```
With module/exports Ecmascript 6+
```typescript
export const [page] = {
[variable: (string | number)]: // Function, string, object, any
}
```
### Examples
```javascript
// This variable is available on the index page
export const index = {
title: "First Proyect with serVer",
};
// With commonJs
exports.index = {
title: "First Proyect with serVer",
};
```
### File create.pages.js
This is a file where you can create pages programmatically
Create a file named `create.pages.js`
Accept **module/exports Ecmascript 6+** and **CommonJS**
### Examples
```javascript
// With helpers and module/exports Ecmascript 6+
import { Helpers } from "@sv-cd/sv";
export default function createPage({ action, listenTemplate }) {
// This is helpers of sv
const { getJson } = new Helpers().setFilesJson("./src/posts", "id");
// This for the server watch this directory
listenTemplate("./src/templates");
// This is implemantion
getJson().forEach(({ data, name }) => {
action({
data,
path: name,
template: "./src/templates/post.ejs",
});
});
}
```
```javascript
// With Custom data and commonJS
// If you want use helpers
// const { Helpers } = require('@sv-cd/sv');
modules.exports = function createPage({ action, listenTemplate }) {
const pages = [
{
name: "First-page",
data: {
mode: "development",
title: "My first page programmatically",
},
},
];
// This for the server watch this directory
listenTemplate("./src/templates");
// This is implemantion
pages.forEach(({ data, name }) => {
action({
data,
path: name,
template: "./src/templates/post.ejs",
});
});
};
```
### File sv.config.js
Used when your options are too many.
For use, you need create a file named `sv.config.js`
## Examples:
```js
// sv.config.js
module.exports = {
root: "./src",
devOptions: {
globalVars: {
mode: "development",
},
port: 5000,
open: false,
},
plugins: [],
buildOptions: {
dist: "public",
},
};
```
## Options
### **_Options.root_**
@type: string
Root is a relative path where the main folder of your project is, in case it is the root put
"."
@default: "src"
### **_Options.plugins_**
@type: Array<{
name: string,
options: object,
}>`
Plugins of serVer
@default: []
You can some plugins in [https://www.npmjs.com/org/sv-cd][46].
### **_Options.globalVars_**
@type object
It is an object with variables that will be available on all your pages
@default: {}
### **_Options.dirs_**
@type object
It is an object with dirs(These paths must be relative to root)
@default: {
styles: 'styles',
scripts: 'js',
components: 'components',
assets: 'assets',
}
#### **_Options.devOptions.styles_**
@type string
This path is where your styles are (only `css` by default)
@default 'styles'
#### **_Options.devOptions.scripts_**
@type string
This path is where your scripts are (only `js` by default)
@default 'scripts'
#### **_Options.devOptions.components_**
@type string
This path is where your components ejs(default)
@default 'components'
#### **_Options.devOptions.assets_**
@type string
This path is where your assets, anything files(images, json for PWA, etc)
@default 'assets'
### **_Options.devOptions_**
@type: object
Is a object with your config dev of server.
@default: {
port: 5000,
open: false,
}
#### **_Options.devOptions.port_**
@type number
It is a port where will open server!
@default: 5000
#### **_Options.devOptions.open_**
@type number
If this option in true, will open your browser.
@default: false
#### **_Options.devOptions.open_**
@type number
If this option in true, will open your browser.
@default: false
### **_Options.buildOptions_**
@type: object
Is a object with your config build of server.
@default: {
dist: string
}
#### **_Options.buildOptions.dist_**
@type: string
It is a relative path to where your production directory will be.
@default "public"
## How to build my project for production?
Is simple, only run this command once.
```sh
sv build
```
For look options:
```sh
$ sv build -h
Usage: sv build [options]
Starting build of your project for production
Options:
--root Is a root of your proyect (default: "src")
--dist Is a place where will bundle of your project (default: "public")
--plugins Plugins of server
--d-styles Style's directory (default: "styles")
--d-scripts Javascript's directory (default: "js")
--d-components Components's directory (default: "components")
--d-assets Assets's directory (default: "assets")
-h, --help display help for command
```
After of run this command, creates a carpet of your application's bundle.
For default is public but you can change in
[buildConfig][12].
## How can I test my project in production?
We can test the project in production, with this simple command.
```sh
sv start
```
You can change the port with the --port flag.
## API
### Helpers
This is a class where you can initialize the helpers of serVer, like json, markdown(`experimental`)
#### Parameters
- `param` **[Object][47]** is a configuration object
- `param.promise` **[boolean][48]** this attribute converte all methods to promise (optional, default `false`)
- `param.test` **[boolean][48]** this attribute delete watch of your files (optional, default `false`)
### setFilesJson
This method is for set path of your files json
#### Parameters
- `params` **([string][49] | {dir: [string][49], id: [string][49]})** This is the relative path where are your files json (optional, default `./src/jsons`)
- `id` **[string][49]?** This id save a instance json
#### Examples
```javascript
// returns a array of your data
// In create.pages.js
const functionCreatePage = () => {
const jsons = new Helpers().setFilesJson('./src/jsons', 'id').getJson();
// or
const jsons = new Helpers().setFilesJson({
dir: './src/jsons',
id: 'id',
}).getJson();
}
export default functionCreatePage;
```
Returns **{getJson}** where is getJson, this method is where you get your data
### setFilesJsonPromise
This method is for set path of your files json
#### Parameters
- `params` **([string][49] | {dir: [string][49]})** This is the relative path where are your files json (optional, default `./src/jsons`)
#### Examples
```javascript
// returns a array of your data
// In create.pages.js
const functionCreatePage = async () => {
const { getJsonPromise } = await new Helpers().setFilesJson('./src/jsons', 'id');
// or
const { getJsonPromise } = await new Helpers().setFilesJson({
dir: './src/jsons',
id: 'id',
});
}
export default functionCreatePage;
```
Returns **[Promise][50]<{getJsonPromise}>** is a promise that return in then the objet with the method getJsonPromise(this is for get your data in a promise)
### getJson
This method return all data of your json files
#### Parameters
- `id` **[string][49]** is a id of your instance files json
#### Examples
```javascript
// In create.pages.js
const functionCreatePage = () => {
new Helpers().setFilesJson('./src/jsons', 'id');
// returns all data
const dataJson = new Helpers().getJson('id');
};
export default functionCreatePage;
```
### getJsonPromise
This method return all data of your json files wrapped in a promise
#### Parameters
- `id` **[string][49]** is a id of your instance files json
#### Examples
```javascript
// In create.pages.js
const functionCreatePage = async () => {
await new Helpers().setFilesJsonPromise('./src/jsons', 'id');
// returns all data
const dataJson = await new Helpers().getJsonPromise('id');
};
export default functionCreatePage;
```
Returns **[Promise][50]<{id: [string][49], dir: [string][49], data: [Array][51]<{name: [String][49], pathRelative: [String][49], data: [Object][47]}>}>** is a promise that return all your data of json files
### isPromise
This method return if your methods are promises
#### Examples
```javascript
const { isPromise } = new Helpers();
console.log(isPromise());
// Output: false
```
Returns **[boolean][48]** A boolean if your methods Helpers are promises
### setFilesMarkdown
This method return all data of your json files
#### Parameters
- `params` **([string][49] | {dir: [string][49], id: [string][49]})** This is the relative path where are your files markdown (optional, default `./src/md`)
- `id` **[string][49]?** This id save a instance markdown
#### Examples
```javascript
// returns a array of your data
// In create.pages.js
const functionCreatePage = () => {
const md = new Helpers().setFilesMarkdown('./src/md', 'id').getMarkdown();
// or
const md = new Helpers().setFilesMarkdown({
dir: './src/md',
id: 'id',
}).getMarkdown();
}
export default functionCreatePage;
```
Returns **{getMarkdown}** where is getMarkdown, this method is where you get your data(in parser html)
### setFilesMarkdownPromise
This method return all data of your json files
#### Parameters
- `params` **([string][49] | {dir: [string][49], id: [string][49]})** This is the relative path where are your files markdown (optional, default `./src/md`)
- `id` **[string][49]?** This id save a instance markdown
#### Examples
```javascript
// returns a array of your data
// In create.pages.js
const functionCreatePage = async () => {
const { getMarkdownPromise } = await new Helpers().setFilesMarkdownPromise('./src/md', 'id');
// or
const { getMarkdownPromise } = await new Helpers().setFilesMarkdownPromise({
dir: './src/md',
id: 'id',
});
}
export default functionCreatePage;
```
Returns **{getMarkdownPromise}** where is getMarkdown, this method is where you get your data(in parser html)
### getMarkdown
This method return all data of your markdown files
#### Parameters
- `id` **[string][49]** is a id of your instance files markdown
#### Examples
```javascript
// In create.pages.js
const functionCreatePage = () => {
new Helpers().setFilesMarkdown('./src/markdown', 'id');
// returns all data
const dataMarkdown = new Helpers().getMarkdown('id');
};
export default functionCreatePage;
```
Returns **{id: [string][49], data: [Array][51]<[string][49]>, dir: [string][49]}** are all your data and config of markdown files(parsed to html).
### getMarkdownPromise
This method return all data of your markdown files
#### Parameters
- `id` **[string][49]** is a id of your instance files markdown
#### Examples
```javascript
// In create.pages.js
const functionCreatePage = async () => {
await new Helpers().setFilesMarkdown('./src/markdown', 'id');
// returns all data
const dataMarkdown = await new Helpers().getMarkdownPromise('id');
};
export default functionCreatePage;
```
Returns **[Promise][50]<{id: [string][49], data: [Array][51]<[string][49]>, dir: [string][49]}>** are all your data and config of markdown files(parsed to html).
## Experimental
In your pages, in dev mode, using [Turbo drive][52] to be able to make it SPA, we recommend reading the documentation of this amazing library to be able to solve some problems with this strategy that we take. We resume, it is **experimental**.
[1]: #how-get
[2]: #sv-cli
[3]: #¿how-use-sv-cli
[4]: #¿how-use-sv-cli-in-mode-dev
[5]: #¿how-use-plugins-in-sv-cli
[6]: #concepts-basics
[7]: #structure-your-directorys
[8]: #routes
[9]: #config-files
[10]: #file-configdatajs
[11]: #file-createpagesjs
[12]: #file-svconfigjs
[13]: #how-to-build-my-project-for-production
[14]: #how-can-i-test-my-project-in-production
[15]: #api
[16]: #helpers
[17]: #parameters
[18]: #setfilesjson
[19]: #parameters-1
[20]: #examples
[21]: #setfilesjsonpromise
[22]: #parameters-2
[23]: #examples-1
[24]: #getjson
[25]: #parameters-3
[26]: #examples-2
[27]: #getjsonpromise
[28]: #parameters-4
[29]: #examples-3
[30]: #ispromise
[31]: #examples-4
[32]: #setfilesmarkdown
[33]: #parameters-5
[34]: #examples-5
[35]: #setfilesmarkdownpromise
[36]: #parameters-6
[37]: #examples-6
[38]: #getmarkdown
[39]: #parameters-7
[40]: #examples-7
[41]: #getmarkdownpromise
[42]: #parameters-8
[43]: #examples-8
[44]: #experimental
[45]: https://www.npmjs.com/package/@sv-cd/plugin-init
[46]: pagePluginsSv
[47]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
[48]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
[49]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
[50]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise
[51]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
[52]: https://turbo.hotwire.dev/handbook/drive
---
_Source: https://npm.io/package/@sv-cd/sv · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
