Node Js Webserver always linking to the same page

Question

Im trying to build a Webpage with multiple HTML Pages.

With the following code I am able to link to the login page, but the localstores-page also links to Login.

const express = require('express')
const app = express()
const port = 3000
var path = require("path");
var request = require('request');
const { get } = require('./routes/brand');

//Static files
app.use(express.static('public'))
app.use('/css', express.static(__dirname +'public/css'))
app.use('/img', express.static(__dirname +'public/img'))
app.use('/js', express.static(__dirname +'public/js'))


app.get('/',(req, res) => {
   res.sendFile(path.join(__dirname +'/views/brand.html'));
})

   app.route('/*').get(function(req, res)  {
        res.sendFile(path.join(__dirname +'/views/login.html'));
});

app.route('/*').get(function(req, res)  {
   res.sendFile(path.join(__dirname +'/views/localstores.html'));
});

// listen on port 3000

app.listen(port,() => console.info(`Listening on port ${port}`))

In the HTML-file, i have the seperate buttons linked to the seperate pages, like so :

<a href ="login.html">
    SIGN IN</a></p>
</div>

<a href ='localstores.html'>LocalStores</a>

I hope someone can help me with this. I am very new to HTML and NodeJS.

Answer 1

app.route('/*').get will execute for all get requests, such as navigation. Since you have login.html first it gets returned.

You can delete those lines and update the href in your html file to be:

 <a href ='/views/localstores.html'>LocalStores</a>

Alternativley you can change it to:

  <a href ='/localstores'>LocalStores</a>

and add:

    app.route('/localstores').get(function(req, res)  {
        res.sendFile(path.join(__dirname +'/views/localstores.html'));
});

Answer 2

    app.route('/*').get(function(req, res)  {
        res.sendFile(path.join(__dirname +'/views/login.html'));
});

app.route('/*').get(function(req, res)  {
   res.sendFile(path.join(__dirname +'/views/localstores.html'));
});

these seem to be affecting the same route. seems like express is just using the first one declared.

My suggestion would be try this, so that each page has it's own individual route:

app.route('/login').get(function(req, res)  {
        res.sendFile(path.join(__dirname +'/views/login.html'));
});

app.route('/localstores').get(function(req, res)  {
   res.sendFile(path.join(__dirname +'/views/localstores.html'));
});

Answer 3

when you do:

     app.route('/*').get(function(req, res)  {
     res.sendFile(path.join(__dirname +'/views/login.html'));
                                                       }); 

its basically saying to Node every Client/user that accesses any route after the root / run this function which returns the login.html page thats what /* means.

instead try specifying different routes to both pages like this:

   app.get('/login',function(req, res)  {
    res.sendFile(path.join(__dirname +'/views/login.html'));
  });

  app.get('/localstores',function(req, res)  {
  res.sendFile(path.join(__dirname +'/views/localstores.html'));
  });

and in your HTML instead of putting the file names you should just use the Routes you defined and Express will handle sending the appropriate file to the client

  <a href ="login">
  SIGN IN</a></p>
  </div>

  <a href ="localstores">LocalStores</a>