Nodejs - Express js middleware

Hi,

So i have tried to use middleware using express js and for some reason it is not working as expected. My app is hosted on heroku server.

How do i ensure that when i click a button from a static file i am serving in an app.use(), that my app.get(’/’) is called. It seems my app.get(’/’) is never reached whenever i use app.use()

I do see the static file served when i go to my server page on heroku.com, however when i click on the button it does not go to my app.get(’/’) instead my browser address bar shows https://xxxxxx.herokuapp.com/? (notice the question mark)

Here are code snippets :

index.html

form action=’/ ’ method=‘get’
<input type=“submit” value = "Click here />

server.js

app.use(express.static(‘public’));
app.get(’/’,function(req, res)
{
console.log(‘i reached the root!!!’)
})

Hello there,

The question mark comes about because you have an form with no named inputs. Had you named an input <input name="hello" value="some_value" />, upon submission, the URL would show something like: https://x.herokuapp.com/?hello=some_value

You can read more about this behaviour here: Sending form data - Learn web development | MDN

As for why you are not reaching app.get(), I am not sure. This is the most relevant piece of information on the middleware: Express 4.x - API Reference

Would you mind sharing more of your code? It is difficult to get a full picture of potential issues without more information.

Hi,

Thanks for the response. In terms of the question mark, I am not necessarily submitting any information in the form , i just want to go to my root url in my express server i.e. app.get(’/’) when i click on the button.

P.S. The form serves fine as i actually see it when i go to my server home page. it’s just that nothing happens when i click on the button.

My server.js

 const PORT = process.env.PORT || 8000

app.use(express.static('public'));

app.get('/',function(req, res)
{
  console.log('hi, i reached the root!!!')
 })
app.listen(PORT);

Here is my index.html :

<form  action='/' method='get'>
<input type="submit" value = "Click here"/>
</form>

I hope this is clearer :smile:

That is my point. The form has no query parameter, so the query is empty. I suspect different browsers handle this differently - what is displayed in the URL bar.

Your submit input should not have a value - maybe this will prevent the empty query.

Otherwise, I cannot see why you would not have anything loged in the server console. It looks fine.

I do not intend to submit anything actually.

I only want clicking on the button to direct me to my server root url i.e (app.get("/") which should in turn reach the console.log statement

i have also tried to use :

<button>click here</button>

and this is what i get displayed in the URL bar : https://x.herokuapp.com/?

If you do not want to submit anything, then why do you have a form?

What is serving your application? If it is not the server you are talking about, then you will need to make a GET request to the server at the server’s address:

http://servers-address-not-client.com/

You can do this in a number of ways with AJAX, or just:

fetch('https://servers-address-not-client.com/');

But, if the client is not being served by the same server you want to request from, you need to request using the absolute URL, not the relative url.

Again, we will need more information about your setup to be able to help with such.

Hi,

Thanks for your patience, Sorry for not sharing the code as it is confidential so i am trying to describe it as best as possible

All my code is hosted on heroku (i.e. server.js and index.html) so it is all on the same server. The entry point of my app is server.js and at the beginning of this file i have an app.use() which serves static files (i.e. index.html)

The reason i used a form is i saw comments online saying form action=’/’ will submit on the current page which in this case is my server address, so my expectation is that it should go to my app.get(’/’) when i click the button

Previously app.get would run immediately i went to my server address. i want some user interaction so i decided to add the html file so it would only run when the user clicks a button after going to my server address e.g. https://x.herokuapp.com/

Hope this was clearer :smile:

Ok. That description does help a lot, thank you.

Well, as the app is located at /, whenever the browser navigates there, a request will be made to / - no direct user input required.

If you want some other request, you would need to make a new route - basic RESTful practices. Then you can use a button to make an HTTP request on user interaction:
HTML:

<button onclick="myFunc()">Click ME!</button>

JS:

function myFunc() {
  fetch('/some-other-route');
}

Hope this helps

yes this is helpful, Thank you.

However if i am already on the same page i am confused as to why my app.get(’/’) is never reached.

Btw it is reached when i remove app.use(). However whenever i keep app.use() it completely ignores app.get(’/’) wether or not i click on the button

Unfortunately, I am out of ideas why that would be happening.

Are there any logs you could show? The only reason the route would not be reached is:
a) A request to the route has not been made
b) The app has already responded to the request (and not called next())
c) The app has crashed

Although, what version of Express are you using?

I am using : “express”: “^4.17.1”

My app. use is as follows : app.use(express.static(‘public’));

shouldn’t express automatically go to the app.get("/") route after it is done serving the index.html file

The issue is there seems to be a conflict with app.use and app.get because when i remove app.use it all works fine (obviously this removes the button functionality) . I cannot find an explanation for this online either

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.