Deploy both the backend and frontend in a single place

[BatoolMM]

Explore and test all available free hosting services.

There are several ways to deploy a web application that has both a front-end and a backend. One common approach is to use a web server (such as Apache or Nginx) to serve the front-end files (HTML, CSS, JavaScript) and proxy requests to the backend server (such as Node.js or Flask). This allows you to use the same domain and port for both the front-end and backend, and also allows you to handle SSL/TLS encryption at the web server level.

Another approach is to deploy the front-end and backend to separate domains or subdomains. For example, you could deploy the front-end to a static hosting service (such as GitHub Pages or S3) and the backend to a cloud platform (such as Heroku or AWS). This allows you to scale the front-end and backend independently, but it also means that you will need to handle CORS (Cross-Origin Resource Sharing) settings and possibly use a reverse proxy to forward requests from the front-end to the backend.

We can also use containerization technology like docker to package and deploy both the front-end and back-end, with the help of orchestration platforms like Kubernetes.

We will move to paid tier if the testing works!

• Vercel Not applicable - Only frontend
• Railway Build: failed
• Cloudfare
• Cyclic

[RealRichi3]

@BatoolMM, is it okay if we both host them on one platform but different servers? Because i don't think it'll be possible to host both the frontend and backend on same server even its the same platform. Most of the services these platform offer already configured servers, and to host the two apps on the same server we'll have to do the server configuration ourselves, and these PAAS platforms don't allow it. Should i go ahead to host on different servers but same platform? Or we can go for a clean server

[RealRichi3]

I tried do deploy the frontend on render but it kept giving this error

And i couldn't trace the error to any source

I moved the API to railway and it's working fine tho I'll try to host the front end there too

[RealRichi3]

@sandygudie

I tried to deploy the frontend app but i keep getting this error

I think it's an issue relating to the dependencies, even when i tried to set it up locally, i still got the save error

[sandygudie]

Areas to look into

• The project uses yarn not npm
• Add the environment variables for the hosting platform

[sandygudie]

@RealRichi3 let me know how it goes

[RealRichi3]

ohh, alright then, what env variables do you use, can you send it on keybase?

[sandygudie]

Alright

[RealRichi3]

@sandygudie i tried yarn and it worked fine. but i the React app is listening on port 5173, when i navigate to the generated URL, i get this error

The front end app is hosted here https://moocs-client-dev.up.railway.app/

[sandygudie]

The port settings is for local host, let’s get on a call when you are free

[RealRichi3]

Alright then, I'll let you know when I'm free

[RealRichi3]

@sandygudie i think the issue is from how the code gets the PORT variable, do you pass the PORT variable from an env file?

[sandygudie]

I added the port to the environment variables in the railway , it still Did not work, I have also try it with another normal react app , it did not work either

[RealRichi3]

when you run the react app locally, do you get the port an env file

[sandygudie]

Hi @RealRichi3 , i successfully deployed the frontend to railway : https://moocs-production.up.railway.app/ but it's from from forked repo. Ohkay, for your deployment add the following

• Add a port variable 5173

• And In Settings Root Directory: Frontend Build Command: yarn run build Start Command: yarn run dev --host

[RealRichi3]

alright thanks

On Sat, Jan 21, 2023 at 11:19 AM Goodnews Sandy @.***> wrote:

Hi @RealRichi3 https://github.com/RealRichi3 , i successfully deployed the frontend to railway : https://moocs-production.up.railway.app/ but it's from from forked repo. Ohkay, for your deployment add the following

-

Add a port variable 5173 [image: image] https://user-images.githubusercontent.com/54219127/213862541-ccccf870-3258-420d-b2b5-3d88f3a9ed85.png

And In Settings Root Directory: Frontend Build Command: yarn run build Start Command: yarn run dev --host

— Reply to this email directly, view it on GitHub https://github.com/Open-Science-Community-Saudi-Arabia/MOOCs/issues/158#issuecomment-1399222923, or unsubscribe https://github.com/notifications/unsubscribe-auth/ASJ4A3ELFAP42BELOJOE2DTWTOZ3VANCNFSM6AAAAAATZG7PKI . You are receiving this because you were mentioned.Message ID: @.*** com>

[RealRichi3]

It's working now

[RealRichi3]

@BatoolMM here are the links for the deployed API and client app on railway

• API : https://moocs-api-dev.up.railway.app/
• CLIENT : https://moocs-client-dev.up.railway.app/

[sandygudie]

@BatoolMM here are the links for the deployed API and client app on railway

• API : https://moocs-api-dev.up.railway.app/
• CLIENT : https://moocs-client-dev.up.railway.app/

@RealRichi3 include the env variables from the keybase so that other parameters like google login can work

Also it seems the backend deployment has issues

[RealRichi3]

Alright, About the backend it's working fine

Which error did you encounter

[sandygudie]

I am getting server error

[RealRichi3]

Deployed link for the project technical documentation

https://moocs-docs.up.railway.app