Hello community!
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:
Axios
Cors
Dotenv
Express
Serve
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?
Thanks,
James
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 client
Leave the Build Command blank
Set the Publish directory to .
Optional, you could also set an Environment SKIP_INSTALL_DEPS to 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.
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.
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!
