I have a question and got confused with the articles I found on the internet.
I have a react App which deploys on the development server. I want to create an admin part, where the administrator will be able to push content into the database. React App will get content from a Database and render it.
Also after the development, I want to upload this on hosting so users from the internet can have access to it and use it. I understand how the server works with post\get requests from glitch projects.
Writing on React.Js, server with express.js
So can someone explain to me the following:
how the server sends React app? Should I send simple index.html with #root div and the whole website will work?
I am a bit confused about how hand-made server and API are different from hostings? How to connect then backend with a hosting?
IN VSCode is it possible to make a react App showing from the server of Node.js? - On glitch I can
sendfile index.html with simple request and I see the landing page.
So theoretically I should have a possibility to send static file through a server of Node.js/Express.js?
Can you explain these questions to me, please or provide some resources where it explained? Currently I'm watching Youtube and Google but how to connect it with my project I do not get a clear idea.
Pretty much. If you use create-react-app to build your React frontend, the build result folder will contain all the static files required (HTML, CSS, JS, images, fonts...). You can then either have your Express app serve it as static data.
"Hosting" is a nebulous term... No, you can't upload a Express/Node.js app to some PHP web hotel and expect it to work. You'll need an application-hosting centered provider/PaaS such as Heroku.
When developing a react + backend app locally, you'd have your backend server running, and the frontend dev server up to serve your frontend and configured to proxy all API requests to the backend server (like this, via the Create-React-App docs).
Related
Having some trouble understanding where to put html files and redirect. I'm very new to react and node js and just getting started with my first project. I have authentication working well, where my App.js in my client side has some inputs and it sends that info to node js server, which authenticates.
After authentication, should I send back a response to react so react can load a new web page? Or do I simply redirect to an html file on the server side? (res.sendFile...)?
Thanks
From my personal experience. You only use nodejs actually expressjs to read database, design api and expose api endpoint to the front end. On react part, you could call the api and also setup the proxy in the package.json file. Good example to follow:https://create-react-app.dev/docs/proxying-api-requests-in-development/
You could use it as reference.
Edit: I can share either of my package.json files if that helps.
Edit2: I dont know if this is a common question or a dumb question. I know it doesn't fit stackoverflow, but I've been struggling with this heroku deploy for the better part of a day already.
I recently followed the following tutorial on posting a react / express app to heroku, and while I think I have been successful, I am confused as to how I can access my API. For reference, a couple of relevant steps in the tutorial are:
Create Node / Express API, push to heroku, and check that it works (by going to the api endpoints in the URL and literally seeing the data), and add "start": "node index.js" to the Node package.json file.
Create React App inside of the root directory of the Node API, add to the react app's package.json this: "proxy": "http://localhost:5000" (I figure so that the api and app can communicate.
I've followed all of these steps, and my React App is working on heroku. The app is displaying, and since the app relies on the Node API to get data to display, clearly the Express/Node API is working.
However, I would like to Actually See the node API endpoints, by going to the endpoint in my browser, and I am not able to do that in heroku currently. All of the React Routes work, however when I visit the api routes my screen is blank. Any thoughts on how i can visit my API endpoints, that are on heroku, in the browser?
For example of my problem:
Localhost Node
when I launch (node index.js) on localhost, I can access my node API endpoints at http://localhost:8080/api/path/to/endpoint
http://localhost:8080/ is root of my node API
Localhost React
when I launch (npm start) on localhost, I can access my react app root at http://localhost:3000/
another one of my react router routes is http://localhost:3000/myreactpage/, which leads to a page of my react app.
Heroku
lets say my heroku app name is https://dusty-manager-23562.herokuapp.com/
https://dusty-manager-23562.herokuapp.com/ leads to the root of my React app
https://dusty-manager-23562.herokuapp.com/myreactpage does lead to my react app page
https://dusty-manager-23562.herokuapp.com/api/path/to/endpoint does not show my data, even though i thought it would / want to see my data. This right here is my question.
So this is my problem. A long post for a simple question - why can't i visit the API endpoint of my node / express app when its pushed to heroku, when I can see the data when its at http://localhost:8080/api/path/to/endpoint. The react app is working, so it's getting the API data correctly, but i want to be able to see the data in browser at the endpoint.
Thanks!
So there are two problems that are probably working in tandem to cause you this headache.
The first and more likely issue is that react-router is intercepting the "/api" urls and deciding prematurely that it doesn't have any components to show for those. A way to fix this is to edit the "proxy" property in your client code's package.json.
"proxy": {
"/api": {
"target": "http://localhost:5000"
}
}
(☝️ I'm assuming here that you kept the 5000 port number from the tutorial. If not change it to 8080 or whatever you used for the api port number.)
The second issue is that the service worker create-react-app adds for you is doing the same thing. It reads the path and thinks there's nothing to serve. If your '/api' route is still showing a blank page, in your browser's dev tools go to the 'Application' tab and click 'Clear site data' (assuming you're using Chrome, not sure how this is done in other browsers) then refresh.
If you don't care about having a service worker, remove the registerServiceWorker() call from your client code's index.js. If you do want the service worker, you'll need to edit the registerServiceWorker.js file to be a little more discerning in how it matches paths.
Hope that helps!
A think this is a relevant post here - Accessing internal API with React, Axios on Heroku
I am not using Axios, but i think the app.get(*) may be giving me issues.
EDIT: no this didn't help a ton actually...
I'm currently working on a new ReactJS application. In all the previous applications I've built I used Express for the server side rendering. I used Express because routing in production mode wouldn't work if I didn't.
So I've recently discovered that it's posible to just always redirect my React app to my index.html file and let the React routing just do it's work. This also works when I deploy my application to production.
I know Express can be usefull for SEO porposes but other than that I have no idea why I would need to use it. So am I just missing something? Or is it just fine to don't use Express with my React application if I don't need any SEO.
React configured as a Single Page App, renders the express routing all but unnecessary. The standard transition from a web server rendered app to a single page app is to change the server into a REST Web API and any server side data needed from the React App is obtained through AJAX calls.
So in most cases you don't need Express when you are using React to handle your routing except for in less common cases when you might want to use express as a reverse proxy or something.
If you want to do server-side rendering, you'll need a node server (typically but doesn't have to be express) to render your React components. This could not only help with SEO but also allow your page to appear to load faster (you wouldn't have to wait for the JS to download and run before the user sees the HTML).
If you don't care about the benefits, don't use SSR.
when deploying react application it is just usually an html and a JS file. So you need some kind of server to host it. Luckily there are services out there that offers that like S3, Github etc.
You're using Express because it can host the html and js files. So technically you don't need specifically express but you need some server that will host your files.
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!