Yes, React runs on the client and Express is a Node.js framework. There's a pretty good chance you're using Express if you're running any boilerplate.
Here's a pretty good walkthrough on more complete routing. https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d
In several of my applications my routes look something like this:
//router.js--and I'm positive this is from some react-express boilerplate
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
const react = (req, res, next)=>{
res.render('react', {
title: 'React Application',
layout: false
});
};
router.get('/app', react);
router.get('/app*', react);
module.exports = router;
//app.js
...
app.use('/', routes); //<--this is the exported router.
...
If you want to be more simple it is probably something like:
let reactRoute = (request, response, next) => {
//render your react page however you're doing that.
}
express.use('/API', yourApiFunction)
express.use('/', reactRoute)
express.use('/*', reactRoute) //Wildcards are REALLY important if you're routing inside react.
You can also bypass things with a proxy but that tends to get more complex than you probably want. Also--keep in mind you don't have to stick to Node on the back-end if you're not comfortable with it. React is client side, I use it with a few production .NET apps, some PHP (lordy!), and, yes, a lot of Node servers.
Answer from Daniel B. Chapman on Stack OverflowYes, React runs on the client and Express is a Node.js framework. There's a pretty good chance you're using Express if you're running any boilerplate.
Here's a pretty good walkthrough on more complete routing. https://medium.com/@patriciolpezjuri/using-create-react-app-with-react-router-express-js-8fa658bf892d
In several of my applications my routes look something like this:
//router.js--and I'm positive this is from some react-express boilerplate
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
const react = (req, res, next)=>{
res.render('react', {
title: 'React Application',
layout: false
});
};
router.get('/app', react);
router.get('/app*', react);
module.exports = router;
//app.js
...
app.use('/', routes); //<--this is the exported router.
...
If you want to be more simple it is probably something like:
let reactRoute = (request, response, next) => {
//render your react page however you're doing that.
}
express.use('/API', yourApiFunction)
express.use('/', reactRoute)
express.use('/*', reactRoute) //Wildcards are REALLY important if you're routing inside react.
You can also bypass things with a proxy but that tends to get more complex than you probably want. Also--keep in mind you don't have to stick to Node on the back-end if you're not comfortable with it. React is client side, I use it with a few production .NET apps, some PHP (lordy!), and, yes, a lot of Node servers.
to solve No 'Access-Control-Allow-Origin' header is present on the requested resource.
you've to use the cors middleware
go to the term
yarn add cors or npm i cors
in server.js
const cors = require("cors");
const express = require("express");
const app = express();
app.use(cors());
Videos
So, suppose I'm making a website which has a contact page which contains a form taking firstname,lastname and a message and sending it to server on the port "localhost:3000/contact.
I can use axios to make a post request and handle the request on the backend.
But when I try to host my sever on the same port(3000) I get an error "cannot get /" ,
Tried serving the index.html inside react's public folder but it's still not working.
I tried serving it on the different port(5000) and it works but isn't it similar to sending the data to a different url or website?
I want to make a post request to localhost:3000/contact and handle it on the server side(so I can save it in mongoDB) without having to host server and client separately.
Hey
I had a small data visualization React open-source project, soon it grew big and now the data in the project is a few Mbs. usually in my apps I would have two repos, one for front-end, another for back-end but since this project is open-source I think it's better to keep it all in one repo in case someone wants to contribute to or star it.
So how should I go about it? Should I have basically two package.json files? I want it to be easy to deploy the project somewhere.
hi so basically I have been using express generator to make new express apps. I can make servers and then endpoint routes and then I then render html files for each of the routes visited and i use PUG as the view engine.
app.set("views", path.join(__dirname, "../views"));app.set("view engine", "pug");
Pug is nice but I am trying to figure out how to use react instead of making views for every route. Also as far as styling, using express generator I seem to only be able to edit styles.css to write vanilla css and then I have to serve the static path.
app.use(express.static(path.join(__dirname, "../public")));
In a nutshell, I am just trying to figure out how to use react with nodejs and express. I read a couple of guides so I think I have the directory structure correct (client and server, each with their own node modules), but not sure on how to proceed. any advice? I've attached my repo. thanks.
https://github.com/ForkEyeee/blog-api
You need to build out your react-app then point your Express server to use static file that get output when build is completed.
Use npm build to build out ur project then in Express app use app.use(express.static(PATH))
This way when you will run your Express backend you can use your react application on same port 5000
Answer by Shivam Sood is absolutely spot on but I thought I would write a more detailed answer as I struggled with this too.
Your folder structure is absolutely fine and many projects use this similar approach even on production. But I will walk you through the process.
Firstly,
cd clientinto the react folder and runnpm run build. This will build your react app for production environment.Go inside your project folder and open the
server.jsfile and add the following lines.
app.use(express.static(path.join(__dirname,"client", "build")));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "build","client", "index.html"));
});
This will point your browser to the index.html generated by React in the client folder.
- Now start the server.js by
node server.jsand point your browser tolocalhost:PORTINBROWSERand test.
Your application and the server will listen on the same ports.