Index.html doesn't load css nor script on nested url

Question

The start point of my React app is:

localhost:3000/Admin

So when i am typing in the url this:

localhost:3000/admin/dashboard/

It works all right. But when I write the next nested url:

localhost:3000/admin/dashboard/new

the index.html doesn’t load my script and css. When I change in the index.html the src url from ./js/admin-app.js to ../../js/admin-app.js it works but not more on the other urls.

Localhost:3000/admin/dashboard

I have tried to set in the index.html base href="./" but it doesn't work.

I can’t find the problem .

my server.js:

app.use('/admin', express.static(path.join(__dirname, 'admin/server/static/')));
app.use('/', express.static(path.join(__dirname, 'server/static/')));

app.get('/admin/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'admin/server/static/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
});

app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname, 'server/static/index.html'), function(err) {
    if (err) {
      res.status(500).send(err)
    }
  })
});

Index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base href="./" />
    <title>AdminPage</title>
    <link rel="stylesheet" href="css/admin_style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  </head>
  <body>
   <div id="admin-app"></div>
   <script src="js/admin_app.js"></script>
  </body>
</html>

Solution
My App runs at

Localhost:3000/admin/

Instead of

 src="js/admin_app.js" or src="./js/admin_app.js"

i try this

 src="/admin/js/admin_app.js"

and it works perfectly

Hi, welcome to SO. Could you please post your index.html and your app.js or whatever your base js file is? — c-chavez
– c-chavez, Commented Oct 28, 2018 at 8:26
Please edit your question and add the code there. Don't add it as an answer. Please move that code to your question, and delete your answer. — c-chavez
– c-chavez, Commented Oct 28, 2018 at 8:44

c-chavez · Accepted Answer · 2018-10-29 10:15:38Z

2

There are a couple of things that we can try.

When setting the index.html, leave the file relative to the base url.

So, instead of:

<script src="js/admin_app.js"></script>

use:

<script src="/js/admin_app.js"></script>

This means that the browser will always search for the file in a url relative to the base app, for example:

http://localhost/js/admin_app.js

or something like:

http://myurl.com/js/admin_app.js

So your admin_app.js file HAS to be in that folder (js). In your case, you have a static folder structure like this:

server/static

so the file has to be in:

server/static/js/admin_app.js

This is because in your server you are routing all the requests to / into the folder server/static/.

Basically, you must point to the correct file using your folder structure. You also have a folder called admin, so if the files are in admin/server/static then the relative url should be:

<script src="/admin/js/admin_app.js"></script>

So, it all depends on where the files exactly are in your folder structure.

Do the same for the css:

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

or

<link rel="stylesheet" href="/admin/css/admin_style.css">

Remove this from your index.html file (you don't need it):

<base href="./" />

edited Oct 29, 2018 at 10:15

answered Oct 28, 2018 at 16:47

c-chavez

7,5365 gold badges39 silver badges50 bronze badges

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

2 Comments

Denizo Over a year ago

Hey thank a lot. I‘ve tried with /js/admin_app.js but it don’t helps. I add before /admin. /admin/js/admin_app.js and now it works perfectly. :)

c-chavez Over a year ago

@DennisM. nice, please consider marking this as the correct answer if it helped you, and upvoting it. Thank you!

Collectives™ on Stack Overflow

Index.html doesn't load css nor script on nested url

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related