What you will get from this piece?
In this article, we’re going to build a server-rendered application in Nodejs by implementing:
- Asset minification and compression using Gulp and Brotli.
- A development environment where assets are minified and compressed in real-time.
- A build process that can make distributable assets for deployment.
Also, you will get some familiarity with Gulp and Brotli. If your app is not server-rendered or performance is not an issue for your application then this article may not be very informative to you.
Setting up the Application:
Make a new directory, initialize npm, and install express and handlebars:
npm i express express-handlebars
Create a basic express server with handlebars configured as the templating engine.
On line 15 of
app.js we are setting
dist as the static directory for our app. This dist directory will be automatically generated from Gulp. Add a views directory in the root of your project and create
main.hbs layout for our application. Put HTML boilerplate in this template.
Add some assets:
In order to minify and compress assets, we need assets. Let’s create a folder
assets in the root of the project, and add some CSS and JS files. The app folder structure will look like this:
│ └── css
│ └── styles.css
│ └── js