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:

Name	Description
package.json	npm package settings
spear.config.mjs	spear settings. Install guid explain this file.
src	The source directory. You can change this source directory by changing the spear.config.mjs
src/components	The 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">