Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on January 31, 2023

 

 

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

 

 

JavaScript
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

 

 

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

 

 

 

Recent Posts

  • React.js Twitter API Tutorial to Embed Profile & Timeline, Hashtags of User in Browser Using Javascript
  • Android Java Tutorial to Change Styles & Visibility of System Bars (Top, Action & Status) Full Example
  • Android Java Project to Display & Play Audio Files From Storage inside ListView Using MediaPlayer Class
  • Android Java Project to Build MP4 Video to MP3 Audio Converter Using MediaMuxer Class
  • Android Java Project to Merge Multiple PDF Documents From Gallery Using iTextPDF Library
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme