Using basic HTML, CSS, and JavaScript in Node App

In this article, we are going to learn how we can run basic HTML, CSS, and JavaScript in our Node.js file to add little style to it's front-end?
Submitted by Godwill Tetah, on June 25, 2019

You may think this is not important, but it is!. As a beginner in node.js, most coding exercises are always server sided.

You may also think that styling your little node.js app or web page may always require template engines or external CSS/JavaScript files.

Let me show you a method in which you can style your node.js web page or app without necessarily using a template engine or an external file.

Take Note! You should have Node js installed on your computer.

With Node js already up and running, let's get started.

Let's build a kind of login web page with CSS styling which alerts welcome when loaded.

Open a text editor and type the following code and save it with the file name app.js:

// include all required modules
var http = require ('http');
var express = require ('express');
var fs = require ('fs'); 
// server details
var app = express ();
var server = app.listen (1337, function () 
{
	console.log ('server started at ::: port 1337');
	
} );

app.get ('/', function (req,res) {
	
	// html response
	var html = '' ;
html += "<body>" ;
html += "<script>";  // javascript
html += "alert ('welcome');";

html += "</script>";


html += "<style>" ;  // css style
html += "input[type=submit]" ;
html += "{background-color: #4CAF50;}" ;
html += "body{font-family: 'Comic Sans MS', cursive, sans-serif}"
html += "div {border-radius: 5px;background-color:  #f2f2f2; padding: 40px;}";
html += "input[type=submit] {font-family: Comic Sans MS; width: 20%;background-color: green;color: white;padding: 14px 20px;margin: 8px 0;border: none;border-radius: 4px;cursor: pointer;}";

html += "input[type=text], select {width: 100%;padding: 12px 20px;margin: 8px 0;display: inline-block;border: none;border-radius: 0px;box-sizing: border-box;border-bottom: 2px solid green;color: black;}";
html += "h6 {font-size: 14px;color: #c8c8c8;}";
html += "</style>" ;


html += "<body bgcolor = lightgrey>";
html += "<center>";
html += "<div>"
html += "<fieldset>";
html += " <legend>LOGIN!!</legend>";
html += "<label for='link'>FIRST NAME</label>";

html += "<input type='text' name='link' placeholder='first name' required size='40' autofocus></br></br>" ;
html += "</br>"
html += "</br>"
html += "<label for='file'>LAST NAME:</label>";

html += "<input type= 'text' name='file' placeholder='last name!' required size='20'></br></br>" ;



html += "</fieldset>";
html += "<input type='submit' value='LOGIN!'>";
html += " ";


html += "</form>" ;

html += "<center>";
html += "<h6><center>SENIOR Dev. </code>Godwill Tetah || [email protected].</code>copyright 2019 go237.com || All rights reserved. </h6>";
html += "</center>";


html += "</body>" ;   // closed body
res. send ( html) ;
});

The file should be saved in your default node.js project directory.

Run the code by initiating the file at the command prompt like a regular node js file, and then open the port in a browser.

project with HTML, CSS, JS in Node.js (1)

Take some time now and study the syntax properly. You’ll notice that I used html+= frequently.

So you can play around with it to get your desired style.

This styling method is useful for small projects...

Output Image:

project with HTML, CSS, JS in Node.js (2)

project with HTML, CSS, JS in Node.js (3)