Adding new pages to your application

You are now really convinced SaaSBox frontend templates are the way to go, you have picked a template you want to use and want to modify it with new pages, and import a new design from elsewhere. This is the right section to get started.

Converting HTML files into pug files

You can import any html page into SaaSBox and use them to create new templates, or add pages to existing ones.

Step 1. Download the HTML page or snippet

Step 2. Install and run html2pug conversion tool as below to create a new pug file

build> npm install -g html2pug
build> html2pug < index.html > index.pug
# Here input is index.html and output is index.pug

Step 3. Run the script on the <filename>.pug file. See below for details. tool enables using Pug with Tailwind CSS

Download here: does two things:

  • It fixes all Tailwinds CSS classes to replace illegal characters. Every incompatible class name (those that use a "." or "/" in them) is converted to use an underscore "_". As an example, a tailwind class name such as px-1.5 becomes px-1_5.

  • It adds an asset() tag to all static file references. Wrapping all asset file references in the pug file with the "asset()" function is required by SaaSBox to correctly reference the right content distribution (CDN) URL for the asset after it is deployed.

Using you can convert an entire template directory with pug files.

Usage: ./index.pug

# For converting an entire folder of pug files: <foldername>

If the is not executable on your terminal, add execute permissions as follows:

chmod ugoa+x

Last updated