Welcome folks today in this blog post we will be compiling
html to pug
and jade
in browser using node.js and express using ejs in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to initiate a new node.js
project using the below command as shown below
npm init -y
npm i html2pug
npm i express
npm i ejs
And after that you will see the below directory
structure of the node.js app as shown below
Now we need to make the index.js
file and copy paste the following code
index.js
1 2 3 4 5 |
const html2pug = require('html2pug') const html = '<header><h1 class="title">Hello World!</h1></header>' const pug = html2pug(html, { tabs: true }) console.log(pug) |
As you can see we are importing the html2pug
package and then we are having the html
and then we are using the html2pug
method to compile the html to pug and then we have the pug
converted inside the terminal as shown below
Express App
Now we can convert this to an express
app by modifying the code inside the index.js
file as shown below
index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const html2pug = require('html2pug') const express = require('express') const bodyparser = require('body-parser') const app = express() app.set('view engine','ejs') app.use(bodyparser.urlencoded({extended:false})) app.use(bodyparser.json()) app.get('/',(req,res) => { res.render('index',{pug:""}) }) app.post('/htmltopug',(req,res) => { const pug = html2pug(req.body.html, { tabs: true }) res.render('index',{pug:pug}) }) app.listen(3000) |
As you can see we are importing the express
package and then we are starting the app at port 3000
and also we are adding the middleware
to the express app such as body parser for the forms. And then we have the get
request where we are loading the ejs
template which is index.ejs
and then we have the post
request where we are converting the html to pug
and then we are passing the data
to the ejs
template
Now we need to make the views
directory and inside it we will be making the index.ejs
file and copy paste the following code
views/index.ejs
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML TO PUG</title> </head> <body> <form action="/htmltopug" method="post"> <label for="html">Enter HTML</label> <textarea name="html" id="" cols="30" rows="10"></textarea> <button type="submit">Compile to PUG</button> <% if(pug){%> <label for="pug">Converted PUG</label> <textarea cols="30" rows="10"><%=pug%></textarea> <%}%> </form> </body> </html> |
As you can see we have the simple html5
form where we have the textarea
in which we allow the user to input the html
and then we have the button
to compile the html
to pug and display it inside the textarea.