Setting Up Static Files Access

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 418:- Setting Up Static Files Access

Setting up static file access in an Express.js application allows you to serve static files like CSS, JavaScript, images, and other assets directly to the client without any processing. Express provides middleware called express.static to achieve this.

Here's how you can set up static file access in your 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-demo cd static-files-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 from the 'public' directory app.use(express.static(path.join(__dirname, 'public'))); 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 (e.g., CSS, JavaScript, images).

bashCopy code

mkdir public

Step 5: Add Static Files Place your static files inside the public folder. For example, you can create a styles.css file inside public/css and an image file logo.png inside public/images.

arduinoCopy code

Step 6: Access Static Files Now, you can access the static files in your Express application. For example, to access the styles.css file, you can link to it in your HTML files as follows:

htmlCopy code

 <!DOCTYPE html> <html> <head> <title>Static Files Demo</title> <link rel="stylesheet" href="/css/styles.css"> </head> <body>  </body> </html>

Similarly, you can use the /images/logo.png path to access the logo.png image in your HTML or CSS files.

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 Open your web browser and visit http://localhost:3000. The CSS file and image should be loaded and applied to the HTML page.

Congratulations! You have successfully set up static file access in your Express.js application. The express.static middleware allows you to serve static files efficiently and enhances the performance of your web application.

Setting Up Static Files Access

Please Click on login or enroll now button.

Lecture 418:- Setting Up Static Files Access

Comments: 2

Frequently Asked Questions (FAQs)