Serve index.html with multiple url parameters (ExpressJS) [SOLVED]

1

Hi Campers,

How are you doing. I’m running into an issue with a full stack project.

The Code

My express server serves the index file in the following fashion:

router.get('*', (req, res, next) => { res.sendFile(path.join(__dirname, '../../dist/index.html')) });
Check out full code on GitHub

In the Browser

I tried a few things.
http://127.0.0.1:3000/
This link shows the homepage.

http://127.0.0.1:3000/xxx
xxx is not a real parameter, but still shows the homepage.

http://127.0.0.1:3000/xxx/
or
http://127.0.0.1:3000/xxx/xxx
xxx/xxx and xxx/ are not real parameters either, but these result in:
Uncaught SyntaxError: Unexpected token <

Question

I don’t understand why the following code works with one parameter in the url and not with multiple parameters
router.get('*', (req, res, next) => { res.sendFile(path.join(__dirname, '../../dist/index.html')) });

Anybody knows why this is happening and how to solve this?

Thanks in advance!

2

I set up a quick project with just * routing, and it worked for me. My guess is since you have index routing on the bottom, that some other route is overriding it.

app.use('/auth', auth)
app.use('/api/count', count)
app.use('/api/polls', polls)
app.use('/', index) // Try putting this first to test.

If you want to have all url’s go to the index page, why don’t you just catch 404 at bottom and redirect to home? That might simplify logic as well as keeping the index routing separate. Like this?

app.use('/', index)
app.use('/auth', auth)
app.use('/api/count', count)
app.use('/api/polls', polls)
app.use(...) // 404
3

Thanks for helping out! When I try to put

app.use('/', index)

first, the other routes never get called, so that’s why I kept it at the bottom.

Maybe it has something to do with frontend routing.

4

your routing is confusing to me as im pretty new to backend … but in saying that i have no problem with my routes … as i would put console.logs in my routes to check where i was going

eg … app.all(’/’,validate(data), function(req,res, next){
console.log(‘In the Index all’);

router.get(’/’, function(req, res, next) {
console.log('in the index route ');

Another thing i do is create one route eg for my index and run that if its fine i then create another route then run again and check both work … this way i dont have as many problems as when writing all the routes and then running and checking all at same time

you use … app.use(’/’, index) … index = require(’./server/routes/index’) and get to that file and have … router.get(’*’, (req, res, next) => { … not understanding why you use the * here when / is all you need
also you have … router.get(’/logout’, (req, res, next) => { … in this file but not sure how you expect to use this as to get to here app.use(’/’, index) is used … again i might be wrong as its not the way i do things

In a nutshell try doing one route at a time … put console.logs in all routes and follow the trail and that should really help you figure out what is going on compared to what you expect to be going on

5

Hello antonderegt, it’s not a express problem but a frontend path problem.

When you use only one parameter, the “./build.js” script loads correctly because it’s in the path.
When you use more than one parameter, the “./build.js” script does not exist in the relative path.

To fix your error, just remove the first dot in “./build.js”, so that it would look like this:

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

The backslash loads the script from base url, so the browser always finds the file.

Regards

1 Like
6

You rock! Removing the dot fixed the problem! Thank you.