The frontend is a React SPA and the backend is NodeJs app that exposes an API. The frontend queries the API for data from time to time but other than that it is fairly independent. What is the best way to host an app like this? Should I include the build folder in the NodeJs app and have the express server serve the static contents from a route? Or should I host both separately, set up a Nginx server for the React app on something like DO? I will host the backend on something like Heroku or Google App Engine. So considering this, what is the ideal solution? What are the pros and cons of either approach?
In case of production, include build folder in the nodejs app. Performance increase in case production. You can refer react docs for details.
In case of development, host it separately, so its easier to work on it.
Related
I am going to deploy a simple app with Nuxt on frontend and NestJS on backend. Both of them need Node.js to run.
I saw an example on localhost with Nuxt SSR and NestJS using different ports. However I need to deploy it on the Plesk VPS server which has only one Node.js instance for the domain.
My question is: is it possible to run Nuxt (SSR feature) and NestJS (API) on the same Node.js instance in production? If so, how to achieve it? Or maybe I think totally wrong and the right way of doing is totally different in this case?
Builder is available for Nuxt 2.
import { Builder, Nuxt } from 'nuxt';
https://github.com/Goopil/nest-nuxt-starter
I am still looking for such configuration in nuxt 3. So can/will post once I figure same in Nuxt 3.
Can I / Should I host Angular, Node-express and Mongo on same server, say localhost:3000 or somehosting.com/server-address?
Also is it a good practice?
I've seen Angular and Node running on same server, but what about adding mongo too?
like everything equivalent to
mongodb://localhost:3000/db
ng serve --port 3000
server listen(3000)
Thanks
As you have not mentioned for what purpose - the answer will be depending on the purpose and context. If you are learning, then running webserver, database and serving Angular static files , all from the same server is not an issue. However, if you are going to have live web app, even with less or moderate traffic, then you must run database on its own server, and the webserver and static Angular files from one server. Of course, for SPAs that expect lot of traffic and real use, it is better to serve your static Angular files from a CDN or storage service like AWS S3, and web and database servers separately.
Happy learning!
It is best practice to keep the databases(stateful) in different servers then the applications(stateless) unless it is just for testing...
I am using react, graphql and node. Currently, my react codes are on codesandbox, whilst my server codes are on my local computer. How do i link up my frontend with my backend in this case? Do i need to deploy my server codes onto heroku or digital ocean before i can link them? I like to be able to test them first before deploying my codes
I am also thinking of migrating my backend codes to codesandbox. In this case, am i still able to link my frontend and backend codes in order to test them out before deploying to the hosting provider servers?
Thanks
Charlie is correct. I actually build my react frontend on codesandbox and connected to my node graphql backend on codesandbox too. Both must be running for that to work. Must enable cors too for both to connect. As im using apollo server 2, can pass a cors: true to the apollo server constructor.
I have made a website that uses React for the frontend and a nodeJS backend with MongoDB. Can I host it via Netlify + Heroku? Or is it necessary to host both on Heroku? What are the pros and cons of each? How do I make the frontend communicate with the backend?
I have my Procfile with web: node server/index.js and I can deploy my backend through Heroku.
Yes, we can surely host react on netlify and backend on heroku. But it may cause a problem. heroku free version uses *.heroku.com domain and frontend on .com domain . so our browser may block some kind of requests like setting cookies directly from backend . so you may get problem related to *heroku.com domain
I am looking to serve out some data from some json and csv files to my front end, which is built on create-react-app.
My idea is to have them both listen at different ports (3000 for React, 3001 for express backend) and then make API calls to 3001 to get whatever data I need through ajax.
How can this work in production?
For instance with Heroku, how would I go about deploying this since it's listening at 2 different ports?
What unforeseen issues will this have/ is there a better method?
To add some more info:
All my backend is doing is parsing some csv and json and serving it out in formatted and edited json.
If you use Heroku, it is recommended to use two dynos separately. One for serving static files and react, and the other for API server.
Or you can use PM2 to do the same things in one dyno, by using fork mode of it.
In both case, as two servers don't share the same port, you will have some problems using sessions, and troubles to make API requests. I think it can be solved by using token based authorization like jwt or using separate session storage like redis