Hi Guys,
This is my first full stack applications to put all my skills to use and highlight this in my resume to crack a full time Software Developer Role. So this is how I started.
First we are creating our server then we will code our client side.
SERVER
- Install all the Dependencies
How to : - npm - i express brcypt ....
- express
- body-parser
- bcrypt
- cors
- dotenv
- gridfs-stream
- multer-gridfs-storage
- helmet
- morgan
- jsonwebtoken
- mongoose
- Create a index.js file with importing all the dependencies
import express from "express";
import bodyParser from "body-parser";
import mongoose from "mongoose";
import cors from "cors";
import dotenv from "dotenv";
import multer from "multer";
import helmet from "helmet";
import morgan from "morgan";
import path from "path";
import { fileURLToPath } from "url";
Note: - fileURLToPath in Node.js is a function that takes a special kind of URL (called a file URL) and turns it into a regular file path that your operating system can understand.
For example, a URL like file:///C:/path/to/file isn't something you can directly use with file system functions in Node.js, but by using fileURLToPath, it becomes something like C:\path\to\file on Windows or /path/to/file on Linux
- Adding the configurations
1. const __filename = fileURLToPath(import.meta.url);
What it does: This converts the file's URL (which is provided by import.meta.url) into a path that the operating system understands.
Why it's used: It helps you get the full file path of the current file, which is especially useful in ES modules where __filename isn't available by default.
2. const dirname = path.dirname(filename);
What it does: This extracts the directory name of the current file from the file path.
Why it's used: It allows you to know the directory where the current file is located, which is useful for working with relative paths (e.g., serving static files).
3. dotenv.config();
What it does: This loads environment variables from a .env file into process.env.
Why it's used: It helps you securely store configuration like API keys and database URLs in an external file without hardcoding them into your code.
4. const app = express();
What it does: This creates an Express application instance.
Why it's used: Express is a framework for building web servers and APIs. This line initializes the app so you can start adding routes and middleware.
5. app.use(express.json());
What it does: It allows the Express app to automatically parse incoming JSON requests (for example, when someone sends JSON data in a POST request).
Why it's used: This makes it easier to handle JSON data in your API or web server.
6. app.use(helmet());
What it does: Helmet is a middleware that adds security-related HTTP headers to your app.
Why it's used: It helps improve security by setting headers that protect against various web vulnerabilities like cross-site scripting (XSS) and clickjacking.
7. app.use(helmet.crossOriginResourcePolicy({ policy: "cross-origin" }));
What it does: This adds a policy to allow resources from your server to be accessed by external domains (cross-origin).
Why it's used: It provides a layer of control over what resources can be shared across different websites, while still maintaining security.
8. app.use(morgan("common"));
What it does: Morgan is a middleware for logging HTTP requests. Here, itβs set to log in the "common" format.
Why it's used: It helps track incoming requests for debugging, analytics, or monitoring purposes.
9. app.use(bodyParser.json({ limit: "30mb", extended: true }));
What it does: This allows the app to handle large JSON payloads (up to 30MB) in incoming requests.
Why it's used: If your app is expected to receive large JSON data (e.g., file uploads), you increase the limit so the app can process it.
10. app.use(bodyParser.urlencoded({ limit: "30mb", extended: true }));
What it does: This is similar to the previous line but handles URL-encoded data (like form submissions).
Why it's used: It allows your app to process form submissions with larger amounts of data.
11. app.use(cors());
What it does: CORS (Cross-Origin Resource Sharing) middleware enables your app to accept requests from other domains.
Why it's used: It's necessary if you're building an API or web app that will be accessed from a different domain, such as a front-end app hosted separately.
12. app.use("/assets", express.static(path.join(__dirname, "public/assets")));
What it does: This serves static files (like images, CSS, or JavaScript) from the public/assets directory at the /assets path.
Why it's used: It allows users or browsers to access these files directly by visiting http://yourdomain.com/assets/filename.
Top comments (0)