Express.js server is not rendering static javascript file

Question

I am building a website and using an express.js server to capture information submitted through a form. Before setting up the server I already had the site built, using static js and css files. After connecting to the server, I was able to get the server to render the html and css stylesheet. But it won't show the vanilla js I had already coded. I only want to use the server for the form and have the vanilla javascript still render like before connecting to the server.

I have the files set up as:

root
index.html
app.js
  public
     css
       styles.css
     javascript
       index.js

app.js

const express = require("express");
const https = require("https");
const path = require('path')
const app = express();
    
    
app.use(express.static(path.join(__dirname, '/public')));
app.use(express.urlencoded({ extended: false }));
app.use(express.json());
    
    
app.get("/", function (req, res) {
    res.sendFile(__dirname + "/index.html");
});

index.html

<link rel="stylesheet" href="css/styles.css" />
<script src="javascript/index.js"></script>

What am I doing wrong here? Is there something I need to code in my index.js file to get it to connect to the server? Thanks in advance.

if your css is working... i don't see a reason your js wouldn't be. — user400654
– user400654, Commented Oct 29, 2021 at 18:58
Thanks for responding. I'm not seeing a reason it wouldn't work either. Hopefully someone else sees something we don't. — shaquille
– shaquille, Commented Oct 29, 2021 at 19:22
well, put another way, if your css is working, so too is your javascript. there isn't a scenario where given your code, one would be served and not the other. I think you are mistaken, in one way or another. — user400654
– user400654, Commented Oct 29, 2021 at 19:25
Ok thanks. So I have a function written in the index.js that changes the navbar from transparent to black on scroll? Also one that opens and closes the sidenav on smaller screens. Neither of those are working when I run the website on the server. Can you advise? — shaquille
– shaquille, Commented Oct 29, 2021 at 19:35
It seems likely that the code in index.js is being loaded just fine, but isn't working properly due to a problem with it's coding. Are you seeing any errors in the browser console? If you want further help with index.js, then show that code. It's also possible that your <script> tag for that file is improperly located in your HTML file. — jfriend00
– jfriend00, Commented Oct 30, 2021 at 8:25

Smit Gajera · Accepted Answer · 2021-10-30 04:31:04Z

1

1. Add this middleware in the `app.js`

  app.use(express.static(path.join(__dirname, "public")));

2. Folder Structure

|__public/   
    |__ css/
        |__ css files...
    |__ js/
        |__ js files...

3. Import this way

Now you set the path to the public directory you have to give the path public folder when you import

<link rel="stylesheet" href="/css/main.css" />

<script src="/js/main.js" crossorigin="anonymous"> </script>

You should now be all set up to access CSS or JS files

answered Oct 30, 2021 at 4:31

Smit Gajera

1,0471 gold badge11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Express.js server is not rendering static javascript file

1 Answer 1

1. Add this middleware in the `app.js`

2. Folder Structure

You should now be all set up to access CSS or JS files

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1. Add this middleware in the app.js

2. Folder Structure

You should now be all set up to access CSS or JS files

Comments

Your Answer

Sign up or log in

Post as a guest

Related

1. Add this middleware in the `app.js`