Inside the HTML folder you will find some files and 2 more folders:
src/(stands for “source”) includes all the assets to be compiled (HTML, Sass, and non-linted JS files, non-optimised images, and more).public/includes production files only (for example, the stylesheet generated from Sass files, linted JS files, optimized images, etc…). You should never work on those files as they are generated by NPM scripts 🚫
In other words, put your hands inside the src folder and when you’ve done with changes, upload or deploy on your server the content outputted by NPM scripts into the public folder.
Getting started with NPM Scripts
Nowadays, every frontend developer uses a build tool or NPM as a build tool to get rid of repetitive tasks (e.g. Sass compiling, minifying, JS linting, etc) and become more productive.
I managed to use Grunt before but, when you go with NPM scripts you will never look back. They are versatile, powerful, and ridiculously easy to set up.
Basically, that’s why we decided to go with them for compiling our templates.
Install Node.js and NPM
NPM scripts require that Node.js & NPM are both installed on your machine.
- Test Node.js — To see if Node is correctly installed, open the Terminal, Windows Command Prompt (or a similar command line tool), and type
node-v. It prints a version number, and you should see something like thisv10.4.1.
If Node is not installed, you can choose your OS and installation method from this page and follow the instructions.
- Test NPM — Type
npm-vin Terminal. It prints an NPM’s version number and should see something like this6.4.1.
If NPM is not installed, follow the documentation on this page.
The package.json file
NPM requires a package.json file that we have included in our HTML template. This file lists all the packages your project depends on, and it specifies package versions your project can use via semantic versioning rules. It makes your build reproducible and easier to share with other developers (Ref: https://docs.npmjs.com/creating-a-package-json-file).
Install dependencies
Now open the Terminal and use the command line to navigate the root directory of your template (cd /path/to/template). Tip: On OSX you can type cd and drag & drop the laurel folder into the Terminal.
Type npm install to install all of the dependencies into your project (note: it may take some minutes 😉).
You’re ready to go!
Run any task by typing npm run task (where for task “task” we mean the name of the task in the “scripts” object). The most useful task for rapid development is npm run server. When it starts a new server, open up a browser and watch for any SCSS or JS changes in the src directory. Once it compiles those changes, the browser will automatically inject the changed files!
TL;DR
➡️ Open the terminal and use the command line to navigate the root directory of your template (cd /path/to/template)
➡️ Run npm install into the terminal to install all dependencies.
➡️ Use the npm run serve command when you’re in the development stage: it listens for files change and ensure that CSS compiling, JS linting, images minification and browser sync occur when needed.
➡️ Use npm run build when you are done with the development and you are ready to wrap up the production site.
Feel confused? 🤔 Watch the video below! 👇
Upload to server / Deploying
You can manually upload the public folder content to your server via FTP.
If using Netlify makes you feel more comfortable, our templates include a netlify.toml file that allows you to deploy and go live in a few clicks. You just need to create a repository and copy the whole content of the HTML folder. In the end, create a new site from Git in Netlify and deploy the app ✌️