My goal was to show you how to create a simple login page with express and pug. It’s finish, we do it static, with out database. 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. This command will create an express project with some needed dependencies. 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 It’s handy to download editorconfig for your favorite editor to keep indentation consistent.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. Note that Pug is very sensitive to indentation and correct whitespace. htmlįor a great pug tutorial, look no further than Learn PugJS with Pugs. In this table, on the left you will see some HTML, and on the right the Pug equivalent. If the doctype is html, Pug knows not to mirror the attribute, and instead uses the terse style (understood by all browsers). On this page we will give you a very brief introduction to working with Pug. If your JavaScript runtime supports ES2015 template strings (including Node.js/io.js 1.0.0 and later), you can use that syntax for attributes. (NOTE: Examples on this page use the pipe character (. It can be difficult at first when coming from just HTML, but trust us that after you wrote some Pug, you might just like it as much as we do. Tag attributes look similar to HTML (with optional commas), but their values are just regular JavaScript. Next to this, it has many powerful features such as conditionals, includes and template inheritance. Pug is a specific template language that focuses on writing as little syntax as possible.
0 kommentar(er)
