Then if you needed to update something down the road, you’d have to check EVERY SINGLE PAGE to make sure you updated it, lest you end up with broken links or images. Imagine a time when you built a website using plain HTML and had to copy and paste the header and footer to every single HTML file you wrote. I will explain what this means and why it’s useful. If you’ve ever worked with something like Laravel, React, or even WordPress then this concept should feel somewhat familiar. Pug allows you to use inheritance to create a layout for the frontend and then insert blocks of data into the layout where appropriate. That’s what I will be talking about in today’s post. Those things are enough to get a frontend up and running, but there’s still more to learn which can make your developer experience much better. So far in this series, I have covered basic templating and how to use logic when creating a frontend with Pug. For more information, please see the Pug API documentation.Using the Pug Templating Engine Part 3 – Layouts You have set up a basic Pug template engine. This time you should see 'Welcome to the Homepage!' surrounded with h1 tags and 'THIS IS SENT FROM THE SERVER!' as a paragraph.
Now edit the home.pug file located in the views directory: html Install the required packages using npm in the project root directory: $ npm install -save express pugĬreate an index.js in the root directory of the project: $ nano index.jsĬreate a simple ExpressJS web server with the following route in index.js: const express = require("express") Ĭonsole.log(`Server started on port $`) "test": "echo \"Error: no test specified\" & exit 1" For example, if you press return at each question to accept the defaults, the npm init process responds: About to write to ~/pugjs/package.json: Initialize a NodeJS development environment to automatically generate a package.json: npm initĪnswer the short questions to fit your project.
Install curl to be able to install NodeJS from the NodeSource repository: $ sudo apt-get install curlĪdd the latest Active LTS NodeJS repository: $ curl -sL | sudo -E bash -Īnd finally, install NodeJS: $ sudo apt-get install nodejsĬheck if everything was installed properly: $ node -v & npm -vįirst, create the project root directory: $ cd ~ If not, install it using: $ sudo apt-get install build-essential Follow our Ubuntu server update best practices. Have some knowledge with routing in ExpressJS
Set up a non-root user with sudo privileges. Prerequisitesīefore starting, it is recommended that you: This tutorial uses the example server IP 192.0.2.123. Unlike standard HTML markup, PugJS allows HTML to be generated dynamically through data sent from the server to the view. Pug or PugJS is a template engine for NodeJS, which allows for server-side rendering of HTML.
0 kommentar(er)
