I have a react app with these directories :
-node_modules
-public
-src
when I run it ( npm start) it will be started !
On the other hand I have some nodejs database config file and server.js that I don't know where to put them.
Moreover I want to know How can I start both apps together and generally how to merge these two apps ?
I'm new to both of these apps BTW. Thanks.
Probably the concept you are trying to understand is about two applications. The first one is called backend (server.js). The second one is the frontend (react app). Usually, you will run them separately (check this tutorial). Let's suppose:
Backend will start on port 5000 and serve an API.
Frontend will serve pages (HTML + Javascript) and might run on port 3000
So, you need to open two terminals (or prompt on windows) and start 2 process:
Terminal 1 - Backend
node server.js
Terminal 2 - Frontend
yarn dev
In this case, you can make HTTP requests directly to your API (backend) calling the backend. For example: http://localhost:5000/api/something
If you hit http://localhost:3000 you should see your web page loaded by index.html file and all react application.
The frontend is just the user interface running on client's browser. So it has to make requests to the backend to actually save and load data (where the database resides).
It's also possible to serve the frontend files using your backend but it seems that the concept you need right now is the separation of frontend and backend.
Related
I am currently using Express and Node js as my backend for my react native app. Right now i need to run my node js server if i want my react app to access the backend and my REST API. I wanted to know how can i run node js in my react app after i extract the apk file. How will others be able to use my app on their networks. How to run the node js server remotely.
Sounds like you misunderstand a few concepts:
You don't run the api server from the client. The server must already be running if you want to access it from the client
If you want others to use this api with their clients, you should be running your api server in a public env (instead, or along with your dev env) so it will be accessible to clients from around the world
I'm building an app with create-react-app and I'm serving the production version via serve. I would like to run it on port 80 and run it forever even after I log out of the terminal.
Look into learning a backend server framework like Express if you are interested in deploying your own production applications.
With Express, you can point specific URL requests to specific static files and apply any data retrieval / setting in the process.
There are also a number of specific resources available for transitioning create-react-apps to Express backends.
When you make this jump, if you haven't already, the important thing to remember is that you are essentially coding two applications, one is the frontend application that user sees, which is rendered in their browser by the bundled React code, and the other application is the backend server which routes and organizes those static javascript files for delivery to the users browser. When they connect to your server, they are sent to Express, which in turn (depending on the request) sends the React javascript.
Build application first,
sudo npm run build
Then,
sudo serve -s build -p 80
I have a NodeJS backend running at http://localhost:4050, and I had configured my react application to make API calls to there. For deploying on heroku, I had to change the PORT variable in the backend to be process.env.PORT. As a result when I put the react app's build folder in the backend's server folder, the react application was still searching for localhost:4050 when I deployed to heroku and naturally failed to make calls, because heroku ran the application on an arbitrarily different port. But apparently adding the very same http://localhost:4050 as "proxy":"http://localhost:4050" in the package.json file worked. I'm really curious as to how doing that got it to work.
proxy field in package.json is used to proxy all requests from frontend domain to backend. For example, you have:
Backend (REST API): localhost:5000/api/user/:id
Frontend (React.JS app): localhost:3000/user
If you call axios.get('/api/user/123'), the browser will send this request to localhost:3000/api/user/123, but then react dev server will peoxy it to localhost:5000/api/user/123
Please note that this is only for development environment. If you want to deploy your React.JS, there's a better way: https://blog.heroku.com/deploying-react-with-zero-configuration
I just starting to learn MERN Stack development as a former .Net developer. I wanted to develop my skills in this area and after lots of researching I just can't figure it out why we need to have two different running port/app when we working with react js?
Firstly I have developed some simple application by using NodeJS, Express, EJS View Engine and already deploy it to Heroku. So far, this works fine for me. I can develop all my personel site with those technologies including MonoDb later. But to become complete MERN Stack developer I started to search React and realized that it only works with giving another port to seperate it like client application. Why we can't use react and all other things in under one port?
This confused me when I get two different web page under;
http://localhost:5000/ (React App)
http://localhost:3000/ (Server Side: opens different html given by me using EJS)
Apperantly if we give same port number with server (3000) in react's package.json file then it gives following warning;
Something is already running on port 3000.
npm run client exited with code 0
Is it due to nature of ReactJS?
You totally can run React and Node on a single port - but it doesn't make for an efficient workflow.
The core answer to your question lies in separating front-end routing from back-end routing. When using React Router your application manages the UI based on the URL parameters.
i.e
http://localhost:3000/some-ui-path
At the same time when using Node as a back-end to respond to HTTP requests - you send the requests to specific URL paths.
i.e
http://localhost:3000/some-api-path
Separating the ports easily lets you differentiate between which route should be handled by React Router on the front-end and which route should be directed to the Node on the back-end.
http://localhost:3000/some-ui-path = React Route
http://localhost:9000/some-api-path = Node HTTP Route
In your configuration files you can customize your front and back end setups so that any request to a certain path will be redirected to your node server.
An Example:you can define that any path prefixed with /api/ should be proxied to port 9000:
http://localhost:3000/api/some-api-path ==> http://localhost:9000/some-api-path
You can use whichever ports you like but 3000 5000 and 9000 are common defaults used by starter kits and module bundlers like create-react-app and webpack
Hope this helps, let me know if I can explain further!
You cannot run React and Node.js server in a single port.
Why?
React uses webpack to bundle all the component files into a
single JS file. This JS file is then served by a
webpack-dev-server which is a part of webpack.
This webpack-dev-server is needed only during development. In production, you use npm run build or yarn build to bundle everything into a directory called build which will be served as a static asset by your Node.js server.
So, during development, you need to use two different ports for:
webpack-dev-server: This by default runs on 3000. If you try to run your Node.js server, you'll get an error.
Node.js server: This should run on port other than 3000.
Note: webpack is used as a default module bundler when creating React app using create-react-app.
Let's start from the port. Port is a logical construct that identifies a specific process or a type of network service. Port is a communication endpoint. And you have two different services, so it seems logical to use different ports generally. Your question is really good. I'm waiting for new answers.
Also a .Net developer here! I had the exact same question around myself and this article seems to clarify a little for me.
It seems like you need two servers (two ports) for development only. In production, you will only have an API server running, with some endpoints simply serving static files in /build directory like:
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
I think the reason why we run two servers (one react webpack server and one API server) ports in development is because 1) we don't want to run npm build every time you make a change and 2) because of not needing to build every time you make changes, it allows hot-reloading for fast development.
I am new to the mean stack. I want to build application having admin and client. So I built two angular 2 apps in my node. But I am not able to render admin app and client app based on router. For example when router is / my client app should render and on /admin my admin app should render.
Please help me to structure my directory an solution to my problem .I am using express for Routing.
You have to assign different port to your both apps.
ng serve --port 4210 --live-reload-port 4950
Open your second project and fire above command.
See : Click here