Static Files For Pages

Dear Sciaku Learner you are not logged in or not enrolled in this course.

Please Click on login or enroll now button.

If you have any query feel free to chat us!

Happy Coding! Happy Learning!

Lecture 419:- Static Files For Pages

When setting up static files for pages in an Express.js application, you'll want to organize your static assets (such as CSS, JavaScript, images, and other resources) in a way that relates to the specific pages of your website. You can achieve this by creating dedicated folders for each page and placing the relevant static files inside those folders.

Let's go through the steps to set up static files for specific pages in an Express.js application:

Step 1: Create an Express Project Assuming you already have Node.js and npm installed, create a new directory for your project and initialize a new Node.js project.

bashCopy code

mkdir static-files-pages-demo cd static-files-pages-demo npm init -y

Step 2: Install Express Install Express.js using npm.

bashCopy code

npm install express

Step 3: Set Up an Express Server Create an app.js file in your project directory to set up an Express server.

bashCopy code

touch app.js

Edit the app.js file:

javascriptCopy code

// app.js const express = require('express'); const app = express(); const path = require('path'); // Serve static files for the home page app.use('/home', express.static(path.join(__dirname, 'public', 'home'))); // Serve static files for the about page app.use('/about', express.static(path.join(__dirname, 'public', 'about'))); const port = 3000; app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); });

Step 4: Create a 'public' Folder Create a folder named public in your project directory to store your static files for different pages.

bashCopy code

mkdir public

Step 5: Organize Static Files Inside the public folder, create subfolders for each page (e.g., home and about). Place the relevant static files for each page in their respective folders.

arduinoCopy code

Step 6: Access Static Files for Each Page Now, you can access the static files for each page in your Express application. For example, when rendering the home page, you'll load the CSS and JavaScript files specific to that page.

In your index.ejs file for the home page:

htmlCopy code

 <!DOCTYPE html> <html> <head> <title>Home Page</title> <link rel="stylesheet" href="/home/css/home-styles.css"> </head> <body>  <script src="/home/js/home-scripts.js"></script> </body> </html>

In your about.ejs file for the about page:

htmlCopy code

 <!DOCTYPE html> <html> <head> <title>About Page</title> <link rel="stylesheet" href="/about/css/about-styles.css"> </head> <body>  <script src="/about/js/about-scripts.js"></script> </body> </html>

Step 7: Start the Server Run the following command to start the Express server:

bashCopy code

node app.js

Step 8: Test Static File Access for Pages Open your web browser and visit http://localhost:3000/home for the home page and http://localhost:3000/about for the about page. The CSS and JavaScript files specific to each page should be loaded and applied accordingly.

Congratulations! You have successfully set up static files for specific pages in your Express.js application. This approach allows you to organize your static assets in a structured manner, making it easy to manage and serve the relevant files for each page of your website.

Static Files For Pages

Please Click on login or enroll now button.

Lecture 419:- Static Files For Pages

Comments: 2

Frequently Asked Questions (FAQs)