Audience:
Anyone (For the first time!).
Son: You said, this post is for anyone.Are you serious?
Me: Yep!
Son: What if I don't know html?
Me: Son! Just google it!
Son: What if I don't know css?
Me: JSon! Just w3schools.com it!
Son: What if I don't know js?
Me: Son Of J! Just gpt it!
Son: Lastly, what if I only know a little bit of python?
Me: Kid! Just cs50 it!
Requirements:
- os: linux.
- node: v20.14.0 or above.
- A browser.
For Impatients Like Me:
An Overview:
1.Our Express app starts at port: 3000 and serves a static website.
Son: That's it?
Me: Come on! What do you want more than this! For now!😜
Steps:
1.Create Project Folder 'Simple-Website'.
2.Open terminal inside Project Folder and run:
npm init -y
3.Create main.js inside Project Folder.
4.Now, install Express framework:
npm install express
Son: Wait! You said,this is a simple website.Then what Express guy is doing here?
Me: My dear Grandson, Simple Website means which is simple to write not light-weight!
5.Now, import it into 'main.js':
// Import Express
const express = require("express");
6.Create express app object from express() func!
// Import Express
const express = require("express");
// Create Our App
const app = express();
7.Now, create a Port Number:
// Import Express
const express = require("express");
// Create Our App
const app = express();
// Port Number
const port = 3000;
Son: Why 3000?
Me: Because, Tony said "I Love You 3000".(😊)
8.Create a folder called 'public', inside your Project Folder(For storing front-end code!).
9.Now tell your express app that you have public folder for use:
// Import Express
const express = require("express");
// Create Our App
const app = express();
// Port Number
const port = 3000;
// Set public folder route
app.use(express.static("./public"));
10.Now, some code for handling client request:
// Import Express
const express = require("express");
// Create Our App
const app = express();
// Port Number
const port = 3000;
// Set public folder route
app.use(express.static("./public"));
// Default route(http://localhost:3000/) sends index.html
app.get("/", (req, res) => {
res.send("/index.html");
res.end();
});
What it does is to send 'index.html' when we open the port: 3000 root route!
11.Now, a last thing is to make the app listen at port 3000:
// Import Express
const express = require("express");
// Create Our App
const app = express();
// Port Number
const port = 3000;
// Set public folder route
app.use(express.static("./public"));
// Default route(http://localhost:3000/) sends index.html
app.get("/", (req, res) => {
res.send("/index.html");
res.end();
});
// Server Listens On Port: 3000
app.listen(port, () => {
console.log(`App running on port: http://localhost:3000`);
});
Son: What about front-end?
Me: I just forgot! I am becoming old my son!
12.Huh! Lets start the fronty-end!!!!!
13.Create 'index.html' inside public folder and fill it with:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Website</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Simple Website</h1>
<div>
<img src="https://github.com/csubrahmanyam/Simple-Website/blob/main/public/assets/tony2.jpg" alt="building" height="20px" width="40px" />
<p>
"If you are nothing without JavaScript,<br />
then you shouldn't have it!"
</p>
</div>
</body>
</html>
Son: Ah! Explain it?
Me: Ok!
Title: Simple Website
Style-Sheet: style.css
Heading: Simple Website
Image: Tony's
Paragraph: Quote
14.Now, create 'style.css' inside public folder and fill it with:
* {
margin: 0px;
}
body {
background: #04035e;
}
h1 {
color: white;
text-align: center;
font-size: 50px;
background: #020149;
}
img {
height: 450px;
width: 455px;
padding: 35px;
padding-top: 50px;
padding-left: 100px;
float: left;
}
p {
float: right;
padding-top: 150px;
padding-right: 110px;
font-size: 50px;
color: whitesmoke;
}
Me: Now don't ask me to explain! I am really bad at css!!!
15.Run it from root of your Project Folder!
node main.js
Done!
Son: I can't see the website?
Me: Before I kick you out, open the browser and go to url:
http://localhost:3000
Disclaimer:
I made the front-end according to my monitor size.
If you find your app's final view is different from mine, then please adjust the css values according to your screen size.
Thank you!
Top comments (0)