Project Structure

Spear has some project structure rules.

Basic

By default, spear wizard will create the following structures:

├── package.json
├── spear.config.mjs
└── src
    ├── articles
    │   ├── [alias].html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.scss
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── components
    │   └── main-component.spear
    ├── images
    │   └── logo.png
    └── index.html

The files and directories which has rule is the following:

NameDescription
package.jsonnpm package settings
spear.config.mjsspear settings. Install guid explain this file.
srcThe source directory. You can change this source directory by changing the spear.config.mjs
src/componentsThe components directory. Component describe about this directory for detail.

There are not regulation for other files and directories.

Refer to resources

Spear will create generated HTML to dist directory as is src directory. So we don't care the refer string.

For example, If index.html refer the ./images/logo.png, generated index.html can refer same path since dist directory has images/logo.png

  • source directory
└── src
    ├── articles
    │   ├── [alias].html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.scss
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── components
    │   └── main-component.spear
    ├── images
    │   └── logo.png
    └── index.html
  • generated directory
└── dist
    ├── articles
    │   ├── blog-post1.html
    │   ├── blog-post2.html
    │   └── index.html
    ├── assets
    │   ├── css
    │   │   └── main.css
    │   ├── fonts
    │   │   └── OpenSans-Regular.ttf
    │   └── js
    │       └── main.js
    ├── images
    │   └── logo.png
    └── index.html

refer to scss file

Usually, we should specify the after building scss file to <link> tag. I.e., Refer to assets/css/main.css.

However, Spear convert .scss to .css in build process. So we can specify the style like bellow:

<link rel="stylesheet" href="/assets/css/main.scss">

After building, an above sample will be the bellow:

<link rel="stylesheet" href="/assets/css/main.css">