Getting started

A guided learning experience to Frontal to get you started

This guide walks you through the steps needed in order to get started with Frontal the right way, before you get started, read the Use Cases in order to make sure that Frontal is the right choice for you.


Frontal can be installed globally on your machine or within an NPM initiated directory, however, global installation is preferred:

$ npm install -g frontal.js

Setting up your project

There are two ways to setting up your project, using the init command:

$ frontal init my-project

The previous command offers 3 ways to initiating a project:

  • minimal: is the most basic structure for a frontal project, which consists of a `pages` and `assets` directories with zero config.
  • basic: initiates a project with a basic frontal.config.js as well as basic style asset import.
  • custom: enables initiating a project with custom development features and a CSS framework.

When the initiation process is finished, a directory named my-project will be created, from within the created directory, run the following to start the development server

$ frontal dev

If the init command is not in your favor, follow the Project Structure guide to manually set up your project.

Building your project

When you are done developing your project, use the build command to generate your optimized build; from within your project directory, run the following command:

$ frontal build

By default, frontal is configured to generate your build within a directory named .frontal at the root directory of your project, the location of the build can be changed within frontal.config.js.

Whats next?

  • Read the Configuration guide for customizing Frontal in your favor.
  • Read the Features guide for enabling development features.
  • Read the Pages guide to learn about features available when working with HTML.
Would You Like To KnowAbout Our Next Products & Free Tools?