@sv-cd/core

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
  • How use sv-cli?
  • How use sv-cli in mode dev?
  • How use plugins in sv-cli?
• Concepts basics
  • Structure your directorys
  • Routes
• Config Files
  • File config.data.js
• 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