Pug template button4/14/2023 My goal was to show you how to create a simple login page with express and pug. Pug is an HTML template engine that is built in Node. It’s finish, we do it static, with out database. Source Files included: Pug Cli, External CSS and Image. Open public/stylesheets/style.css and change codes: html, body module.exports=login I want to create a login page like this sample : so have to change the view/layout.pug like below : doctype html html head title= title link(rel='stylesheet', href=' ') link(rel='stylesheet', href='./stylesheets/style.css') body block content script(src=' ') script(src=' ') script(src=' ') Now run the code below to start server on port 3000. we want to work with pug template engine, so we have to include ` - view=pug` in our command. Pug is a high performance template engine heavily influenced by Haml and implemented with JavaScript for NodeJS and browsers. Call that resultant function with your data, and voil, it will return a string of HTML rendered with your data. pug.compile () will compile the Pug source code into a JavaScript function that takes a data object (called locals ) as an argument. To install webpack and its CLI, open up the terminal and type the following: npm i -D webpack webpack-cli. Its main purpose is to bundle JavaScript files for use in a browser. This command will create an express project with some needed dependencies. The general rendering process of Pug is simple. To set up Vue.js in our Pug template, we need to install and set up webpack. Now initial our project : $ cd /var/www/html $ mkdir expressLogin $ cd expressLogin $ npm initĮxpress will ask you some questions, answer those and go to next step. įirst install express generator to configure our project as well : npm install express-generator -g The main reason that i decide to write this article, is to show you how much is cute to write your UI with pug, this login page is so simple an Database less.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |