Project Structure

Learn how to manually setup a Frontal project

Frontal requires a certain directory structure in order to get started, these directories are:

  • assets: the assets directory will contain all files that are compiled by Frontal, the assets directory can be structured however you like and can include pretty much any asset that your project requires, from .js and .ts to style files such as .scss, .less or image, SVG and video files.
  • pages: the pages directory will include all your .html files, these pages can be nested within sub-directories in order to organize how your final built pages would look like.
  • public: the public directory can contain any files you want copied within your final build, that said, no files within the public directory will be proceed by Frontal, they are simply copied to your final build directory.

Setting up an example project

In this guide we will discuss how to create a self-contained frontal project, below is the target structure of the project when successfully following this guide:

├── assets/
│   ├── js/
│   │   ├── app.js
│   ├── style/
│   │   ├── style.scss
├── pages/
│   └── index.html
├── public/
│   └── favicon.png
├── package.json
└── frontal.config.js

Setting up package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "frontal dev",
    "build": "frontal build",
    "serve": "frontal serve"
  },
  "devDependencies": {
    "frontal.js": "latest",
  }
}

Setting up frontal.config.js

module.exports = {
    bundles: {
        main: {
            assets: [
                '@assets/js/app.js',
                '@assets/style/style.scss',
            ],
            pages: ['**/*.html']
        }
    }
}

The above config tells frontal to auto inject bundle main to all HTML pages found within the pages directory.

Running the project

With the above package.json, its now more intuitive for you to get started with your project with the following commands:

$ npm install
$ npm run dev

You can find this project example on Github.

Would You Like To KnowAbout Our Next Products & Free Tools?