This is my first project using nodejs and react, I have been working a aplication by following this this tutorial.Its working fine localhost
but not working on prodution mode.I have created a build and its generated a directory called "dist". I have moved everthing to live server from "Dist" folder.
But the node route not working , its says 404 error.How to deploy nodejs with react on production?
Can please help me get rid of it?
Thanks
Your backend server will not know how to handle the routes on your client or know the location of your "client" folder, if you have a dist folder you would need to do something similar to this:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('dist'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'dist', 'index.html'));
});
}
Hope this helps.
Related
I cannot access the routes that I have set up in my app when running from the build version. I can access them on dev enviroment though when my react app runs at a different port than the server.
I have included the below in my express server in order for it to serve the react app and only the root page is showing.
app.use(express.static(path.join(__dirname, 'build')))
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
React Router does all the routing in the browser, so you need to make sure that you send the index.html file to your users for every route.
This should be all you need:
app.use('/static', express.static(path.join(__dirname, '../client/build//static')));
app.get('*', function(req, res) {
res.sendFile('index.html', {root: path.join(__dirname, '../../client/build/')});
});
I found the solution of my issue.
I was having the HTML anchor tags instead of the Link attribute of react-router to my code.
Replaced them accordingly and my app is operating normaly.
I have a React app + Node server with the following architecture from the root :
/build
/src
server.js
package.json
etc.
In production, I want to get to the index.html inside the folder "build", so I have this code in the server, but I think I did it wrong :
server.js
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "build")));
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
}
Can somebody help me ? Thanks
There is nothing wrong with your code, though I don't think there is a need to define a route GET "*". When you serve public static files, they can be accessed directly through the browser.
For now, to debug your app:
Make sure that the "build" directory exists and actually contains an index.html
Log 'NODE_ENV' environment variable, just to make sure that it's set correctly to 'production'.
Deployed my React App onto Heroku and opened my app to get an Invalid Host Header.
Anyone have any ideas what else might be causing this? I keep looking back at past projects to see if I have anything setup differently, but so far can't figure it out.
I tried every solution I could find online, and the only one that got the page to load was to remove my "proxy": "http://localhost:8080" from my package.json but the app can't use the back-end.
if (process.env.NODE_ENV !== 'production') {
console.log('loading dev environments');
require('dotenv').config();
}
require('dotenv').config();
if (process.env.NODE_ENV === 'production') {
const path = require('path');
console.log('YOU ARE IN THE PRODUCTION ENV');
app.use('/static', express.static(path.join(__dirname, '../build/static')));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, '../build/'));
});
}
Figured it has to do with not switching to a production configuration but I have my files setup the same way as past projects and have the code for my node server to change for production too.
I have a react app (with router) that I built and that I use statically on a Node.JS server.
I can navigate inside the app thanks to the internal links (Link & Navlink) but if I enter a url directly, I get the following message
/home/deploy/www/mydomain.fr/production/releases/20181205130322/client/index.html
This is my config to render builded react-app as static files
app.use(express.static(path.join(__dirname, 'client')));
app.get('*', function(req, res) {
res.send(path.join(__dirname, 'client', 'index.html'));
});
Thank you for your help
I have a React app project using Node Express. I'm trying to deploy it on heroku. I think everything is working fine except that my server.jsis looking for index.html file in the wrong folder.
How to solve it?
My folder structure looks like this:
I have logged in to bash in heroku. I have everything there. When I go into dist folder in frontend I can see the dist folder. But when running the server.js it trying to find index.html in the server folder. But it's in frontend. How to solve it?
This is my code in server.js file:
if (process.env.NODE_ENV === "production") {
// Set static folder
app.use(express.static("frontend/dist"));
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "frontend", "dist", "index.html"));
});
}
Try this
Note: if server.js file is in the server folder.
res.sendFile(path.resolve(__dirname, "../frontend", "dist", "index.html"));
for more detail : path.resolve([...paths])