Node.js Express Project to Compile HTML to PUG or Jade in Browser Using EJS in Javascript

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

const html2pug = require('html2pug')
 
const html = '<header><h1 class="title">Hello World!</h1></header>'
const pug = html2pug(html, { tabs: true })
console.log(pug)

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

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)

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

<!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>

<!DOCTYPE html>

<head>

</head>

<body>

<label for="html">Enter HTML</label>

<button type="submit">Compile to PUG</button>

<% if(pug){%>

<label for="pug">Converted PUG</label>

<%}%>

</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.