Getting ready

To get ready, we should build on the setup we created in the first recipe, Preparing a static server with Bootstrap 4, Harp and Grunt, in this chapter. However, before we start, there are a few clarifications to be made.

The first thing to note is the one major distinction that the web page that was created in the app folder was still serving the index.html page from the root of that folder. In other words, the app/index.html file and the app/css and the app/js folders can all be thought of as our development environment, whereas the www folder can be thought of as our production environment. Why is that?

To clarify this distinction, we need to remember the end of the previous recipe. At the end of the previous recipe, we have set up the grunt-contrib-watch task as the default task in our custom Gruntfile.js. The watch task was observing our bs4/scss files, including _custom.scss. Any change saved to the bs4/scss/_custom.scss file would lead Grunt to recompile all the SCSS files from the bs4 folder into the app/css/bootstrap.css file. That is why we auto-refreshed our page every X seconds, with the help of that Chrome plugin, because we wanted to be able to live-reload the changes to our app/index.html. However, all of this setup was actually a part of our development environment. If you think about it, this makes perfect sense. It is a way to prototype our website and immediately see the changes.

Now, for our production environment, all we have to do is stop the harp server ./ --port 8080 command and run the harp compile command. The harp compile command will update our www folder, and we will have a newly compiled www folder. This folder is the one that will be pushed to surge.sh. Without stopping the harp server and rerunning e harp compile, the site that we would have pushed to surge.sh would have been the previously compiled www folder.  

Now that we have confirmed how everything works, we can push our static website to Surge.