I have an Apollo app with an express/sequelize API. It runs fine in dev. Can anyone tell me what it should look like in prod? Ive added .env environment variables. Where do those get set on the web server? Do I change the url in Apollo client? How do I build/prepare the API for deployment to web server through FTP? I use bitbucket for CI/CD. I really don't what I'm supposed to do.
So basically the answer is, with Node, you can't just deploy to a static server and expect it to work. The app created is already it's own server. Therefore, you have to host on in a service like AWS, Heroku or Now to get it to work. This may seem obvious to some but at first this wasn't clear to me.
Related
I have created my fullstack (Node.js and React.js) blog app and now when I want to deploy my frontend and of course backend, I have noticed, that I don't know how to do it in a proper way.
My application works fine when I use localhost but if I deploy it, my links won't be like "localhost:8080/api/blablabla", but for example some heroku slug (url) and my Node.js routes.
In my Node.js it looks like this:
And here below my app.js code:
And from React.js (frontend side) it looks like this:
So, the question is what I need to add. I suppose, that on React (frontend) must me something like env. variables with backend link? And before it, better to add backend to know what the slug (url) would be, because it is random. But I dont know do I need to add something on backend or not.
If I wrote something wrong, I will be really appreciate if you correct me:)
ThanK you in advance
In the last React.js image you have shared, I can see you are using axios to send the GET request. However, you are providing a url which is a localhost one. So I assume you are trying to make a request to the backend that you have hosted on Heroku, but instead, the url is pointing to your local environment. What I would recommend doing is changing the http://localhost:5000 part to the Heroku app's url.
I am trying to upload a MEAN stack app for the first time, so I am not sure I am doing it the best way but here it is.
I have deployed my nodeJS server to one domain and it seems to be working fine - response message
but I am having problems with the client part.
I deployed the angular code to a different domain (not sure if that's how you do it) and I am getting this error:
error link
Here is a link to my github project repository if it could provide some more information - https://github.com/igalM/igal-school
I used the Heroku CLI and Container Registry to upload the code with Dockerfile.
Thank you in advance!
Looks like I just had to add a server.js to my client folder. SOLVED!
I want to deploy a project (React app + Node server), but I'm new to deployment,
I wanted to know : do I need to have the React app in a Github repo and the Node server in another, or I can deploy all in one ?
Currently, I have 1 Github repository with a folder "frontend" and an other "backend",
I want to have my React app on -> nameofmyapp.herokuapp.com
and the Node server on -> api-nameofmyapp.herokuapp.com,
If someone got ideas... Thanks
While in theory that's not a problem, I would suggest maybe considering keeping things on one domian for reasons such as additional latency and connection trouble as well as path issues such as you are facing. It would seem to me that you would ideally just like to prefix the name of your app with 'backend' or similar and in such a case I would just consider setting up a sub domain on a domain which I had control ie mydomain.com and backend.mydomain.com. While developing on Heroku this model could prove to be tricky as each 'site' or app is separate and not actually intended to work together while they most certainly could. Consider setting up separate routes and an endpoint for 'backend' on your app, similar to your frontend login, then when you are finished developing your app and happy you could register your domain name and point it to your app and point a subdomain ie backend.mysite.com or login.mysite.com to your endpoint on Heroku ie mysite.com/backend. Unless you have a specific reason for separating them into their own repos with separate source control and urls, it might make debugging things much harder. Apologies if I missed your point. Most web hosting companies should allow you to register a subdomain or vanity domian free or charge because you own the primary domian. Just some considerations.
Anything is possible, you just need to understand how things are working... my advice would be that you start simple and have a single repo that contains front+back, you can then deploy that as a single Heroku app.
One app can only have a unique Heroku url, so you cannot have what you mention nameofmyapp + api-nameofmyapp hosted by a single Heroku instance, this would need to be hosted by two different instances, which means code from two repos.
Usually for a node app, you would create an /api route that is hosted by the same app, so you have your frontend served at nameofmyapp.herokuapp.com and your api at nameofmyapp.herokuapp.com/api with some sub routes, for example nameofmyapp.herokuapp.com/api/items.
You should be able to easily find tons of Node/React/Heroku tutorials on the web, just play a bit with it to experiment and build some understanding of how those are working together.
I am currently working on a small project where I used vue.js to build the front end and express.js for the backend.
For the frontend, I have another express server to just serve the static files and all the requests will be redirected to my backend API with proxy by the frontend server.
For the backend, it is just an Express API app.
Both apps are runing on heroku right now. And my questions is:
What is the best practice to connect the front end and back end server, I did a lot of research online and people are saying backend API are not supposed to be exposed to internet？ I am not sure how I can talk to my backend if it is not on internet.
For the frontend, I can use SSL/TLS to protect the connection. But for frontend to backend server communication, what should I do to protect this data transfer, can I use another SSL/TLS? And should I use some mechanism to verify that the request is sent from my frontend server, not somewhere else? If so, what is the recommanded way to do that?
A lot people say that there should not be direct connection with database, it should go through a web service for security. What does that means? Now in my backend Express app, I have line of mongoose.connect('mongodb://someaddress/myapp'); Is this bad practice? If so, what should I do to make it more secure?
Please try to be more specific, I am still new to theses and try to learn, code examples can really help. Much appreciated!!
Vue and Express apps are written in the same language, so it is best practice to have these as separate projects as you have done. These are entirely different projects doing different things so they should be split.
You already deployed to Heroku, so the SSL/TLS isn't really a concern for you. However if you were deploying to your own VPS, you'd want something like Let's Encrypt. For restricting requests from Express to your Vue app, you'll want to look into CORS. See expressjs/cors for more details.
The Express app is the service connecting to your database. If you were trying to directly connect to your database from your Vue app, then that becomes an issue. You would coupling client side code with server side code. What you're doing is fine.
I'm trying to understand how a MERN app fully works, I've been reading about MongoDB, ExpressJs, ReactJs and NodeJs, I also understand how MongoDB, ExpressJs and NodeJs interact and how ReactJs works on its own, my question is simple (I think).
The question:
If I create an API, using Node,Express and Mongo, and I have an APP managed by React, both need a server (via express, I understand), then, how should I run the API and the React app at the same time. Do I need different URLs? should I configure different ports? how should I integrate them?
I really been reading a lot, but almost every tutorial is made locally (and I'm working in a server with Passenger and I can't change the way it starts), just for Node/Express(with pug or else)/Mongo or just React, and I don't understand how to connect the API and React.
Thanks
It depends on several factors: environment (e.g. development, production), and your control over the server. For development, you can have two different URLs and use something like Webpack Dev Server. Normally you would have the module bundler, e.g. Webpack, watching for changes in your React code. However, this can get more complex if you have Server Side Rendering.
For production, normally you would have the bundled file for your client side application already optimized and minified. If you can change your API, you could serve it statically in a new endpoint, for example: /static/bundle.js and request this endpoint from your index.html file, which will be sent by Express.js server when accessing /.
However, because you will probably want to have routes in your React app, your server will need to know how to handle the client app routes (for example app.get('/*', () => ...), and they could collide with your API endpoints. To solve this, you could:
Prefix your API endpoints with a namespace, e.g. /api/v1/...
Place the API in a different URL, port or subdomain. In this case you would indeed need to run these two servers in parallel. With Node.js, there are helpers to make this more convenient, e.g. concurrently.
Pulling out your concerns: API, React, and Integration for MERN app.
I use three approaches
1) Use foreman. With this, you can specify your API and Web Client in the Procfile. I used it here
2) Use a proxy to handle requests that require your API. So in package.json, you specify your API URL(your API must be running)
// package.json
.......
.......
"proxy": "<path to url:[port no if you're developing locally]>"
Check here.
And you can simply add a script to run your API and React concurrently.
3) Set your API and React app in a Docker container. mern-starter is a perfect place to check for this.
Hope this helps!