How to deploy frontend and backend on Render?

1

Hi,

I am a beginner with web development and working on an eCommerce website where I separate the frontend and backend work into two different folders. When I run it locally, I will run npm start in the frontend folder at a terminal and run ‘node server.js’ in the backend folder with another terminal. Can anyone help how I should deploy this project at Render? Please advise the Build & Start Command.

Thank you very much!

1 Like
2

Hi,

I am also new to web development and facing the same issue and don’t know how to deploy the application to the render. Please help all the new comers here.

Thanks!

3

Hi there,

Thanks for reaching out.

Our docs are full of Quickstart guides for various languages/frameworks, which is often the best place to start.

Every project is different, so you will know what commands are required to get your app up and running. If you have a frontend and backend in the same repo, that’s a “monorepo” and Render has support for that: Monorepo Support

In general terms - and this may not be specific to your projects - a common pattern for what you’ve described would be to have the frontend app as a Static Site and the backend as a Web Service, using the Node Native Environment. So two services, both linked to the same repo with settings like (but amended to your required values):

  • A Web Service for the backend

    • Root Directory: “your_backend_dir”
    • Build Command: “npm install; npm run build;” (some backends don’t need to be built - will depend on what you’ve built)
    • Start Command: “node server.js” (or whatever file within “your_backend_dir” that starts your backend app)

  • A Static Site for the frontend

    • Root Directory: “your_frontend_dir”
    • Build Command: “npm run build” (static sites auto-install dependencies)
    • Publish Directory: “public” (this is Create React Apps default build directory, amend as required for your own project/framework)

Try getting something deployed and if you come across any issues, then reach out for assistance. If doing so, please elaborate on the issue in as much detail as possible, e.g. service name/ID, URLs, any logs/error messages, reproduction steps, screenshots, etc., to show the problem you’re experiencing, and the community may be able to offer advice.

Hope that helps

Alan

5 Likes
4

Thanks, man,

Thank you for helping out, I was able to host my first web app using render.

Thanks a lot!

1 Like
5

Hi Alan,

Thank you so much for your reply and my apologies to get back late. I have successfully deployed my site at Render based on your guidance.

Appreciate your help!

6

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