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'.
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 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])
Hi I am new to angular6
In development mode I have worked in angular 4200 port and node in different port (8080) in my operations.
but now I want to move my app into production mode.
for that I had build my angular project by using ng build command. after i get a dist folder is created on the root folder.
so i went to server.js file
here I had add my static file
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
click here to read my server.js file
by this
when ever I redirect to my local host it is opening but
in server.js side i didn't get any response.
when ever I try to login I am getting this error.
can anyone help me to solve this
I think there are 2 things wrong here in your code.
First, update your code
From:-
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
To:- This code needs to be added just before your app.listen(app.get('port')) code
app.get('*', function(req, res) {
res.sendfile('./public/MDProject/index.html');
// load the single view file (angular will handle the page changes on the front-end)
});
Second, Serve your file from your public folder(In your case I think it is the dist folder). So update your code like this.
app.use(express.static(__dirname + '/dist/MDProject'));
after I removed this line in my server.js file
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
and I paste this line before port creation.
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
now it is working fine.
Use this to go to index page.
app.get('*', (req, res) => {
res.sendfile('./public/MDProject/index.html');
})
with that you have to make folder in public in node
app.use('/', express.static('/dist/MDProject'))
Then in your app dist folder -> index.html
<base href="http://192.168.1.1:3000/admin-panel/">
This is my working code. Let me know if you have still any issue. :)
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.
I am having issues w/ serving static files in my current Express app, although I've done a similar setup in a bunch of other apps.. My folder structure is as follows:
/rootfolder/
/app
package.json
/client
/dist
/static
index.html
/server
/src
index.js
Relevant part of my server/src/index.js:
app.use(express.static(path.join(__dirname, "client", "dist")));
Where __dirname = /rootfolder/app/server/src
And when the user hits the / endpoint:
app.get("/", (req, res) => {
res.sendFile(appRoot.path + "/client/dist/index.html");
});
Where appRoot.path = /rootfolder/app
When I hit the / endpoint, I get a status 200 with the following text:
/rootfolder/app/client/dist/index.html
From what I can tell, the files are coded relative to each other correctly.. Does anyone know what I might be doing wrong?
Thanks in advance!
You're using res.send() instead of res.sendFile()
Also I suggest resolving your path via the path module, instead of concatenating a string.
const path = require('path')
app.use(express.static(path.join(__dirname, 'client', 'dist', 'static')))
And for the response of /:
res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html')))
Try
app.use(express.static(path.join(__dirname,'client','dist')));
It basically gets the root directory and combines it with /client+ /dist + /static to give you the full route, without being relative path.
Now Let's call rootdirectory/client/dist X. That is the main directory for static files
If you have other files that are static but not in the same folder, you will have to give relative path from the X directory
Example:
app.get('/',function(req,res){
res.sendFile('/static/data.txt');
}
In the example above you indicate that the static file(data.txt) is located in the X/static directory.
Therefore => rootDirectory/client/dist/static/data.txt
2nd Example:
Let's say you have a folder in dist called images which you want to only store images.
when you are giving routes, you MUST use /images/filename.extention