I’m moving my portfolio website from Heroku (static webpage) to Render. Along the road, I’m including some new features in my website which require using Node.js paired with Express.js.
I am looking to serve files from /client folder. See below for reference:
My build command is
npm install. This installs the following npm packages listed in my package.json file:
My start command is
npm run server && npm run client. This runs my server.js where I start an Express server on PORT = process.env.PORT || 8000 and then serves my ./client folder on port 3000.
As of right now, when I deploy this commit the build is successful and I can see the server is running on port 10000, but when I go to my webpage’s URL, I get an error of 404 Cannot GET /.
Any instructions or insight on what I’m doing wrong?
Here is my package.json file contents:
Thanks for reaching out.
I’m not entirely sure about your implementation here, but you wouldn’t be able to serve requests from two different processes (Express & Serve) on one Render Web Service.
If we assume the client pages make calls to the Express server in an API fashion the usual setup would be like this:
The static client files better suited to a Static Site, so could deploy the same repo with the following settings:
- Set the Root Directory as
- Leave the Build Command blank
- Set the Publish directory to
- Optional, you could also set an Environment
true to stop any auto-dependency installation attempts on Static Sites
The Web Service can then be used to just serve the Express server and the client can make calls to it as needed.
However, if you’re wanting one site with a mix of both the static pages and Express served paths, you’d likely need to have Express serve all the content.
Hope that helps
Hi @al_ps, thanks for your comment. To update, I have made some changes and reduced the errors I’m encountering now to just one error. I am using Express to serve statically my /public folder. So this allows me to serve/access anything in my /css, /js, and /media folders, as well as my html files.
I effectively only have two endpoints that I am serving with Node/Express in my server.js file:
- “/” which responds with my index.html file, and
- “/transcription” which all it does is send an axios POST request to an API for a temporary token I use later for audio transcription. This request is made on my asr.html page.
The error I’m encountering is when I click my button on my asr.html page to reach my /transcription endpoint, I get back http 400 error, which confuses me because the very same commit that I deploy to Heroku gives me no problems. I can hit my /transcription endpoint, and continue with performing my transcription. Why is this issue only surfacing on my Render deployment?
For context, my build command is
npm install and my start command is now
npm run server. My root directory is default by Render.
Thanks for your time.
Best place to start would be your service logs to see if there is a corresponding server-side error when hitting that endpoint.
Hi @al_ps, before I attached those three screenshots, I responded to your initial response at some length, but Render’s automated spam filter Akismet flagged my post as spam for reasons unknown to me and it appears my post is awaiting review by a staff member. Do you know how long it will take for my post to return? It will help you understand my updated issue.
I’ve freed up the post. However, my question would still the same, something is returning a
400 (bad request) error, to see if that coming from your app the service logs would likely show it.
If it’s only happening when using a
fetch from the client side, maybe there something not quite right with the request/payload through that mechanism?
I’d start with the logs, to see if something is there to shed some more light when that request is made through
fetch. If not, we can try other avenues.
Thanks @al_ps, after some intense detective work on why the http 400 error was being generated (from my catch statement in /transcription endpoint), I traced the error back to something as simple as although I had generated an environment variable group, I neglected to link it to this deployment. So, my API token was not being passed in the axios POST request when I hit /transcription. Now it is, and all is good. Thanks for your support!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.