I am trying to run a React app under Plesk Windows hosting. The React app was created by the command create-react-app.
I created a static assets directory called build with the command npm run build.
I created a file called server.js in the project root directory with the following content:
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(process.env.PORT);
Under Plesk Node.js, the application startup script is set to start with this file server.js.
With the homepage set to "homepage": "./build" in package.json, when running the app in the browser and inspecting the debug output, console logging is as follows:
The static assets are not reachable because of the faulty path /build/build/static. The path should simply be: /build/static.
With the homepage set to "homepage": "./" in package.json, when running the app in the browser and inspecting the debug output, console logging is as follows:
Now, the static assets are not reachable because the path is set to merely /static, and not /build/static.
delete homepage setting in package.json and "npm run build" again
app.use(express.static(path.join(__dirname, 'build')));
// set * to serve index.html everytime
app.get('*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
Related
I've deployed a react js application with digitalocean app platform and there's an express js file to make react js as a production application. when I deploy my application it loads smoothly. But when I deploy a new version browsers show only a white screen for the index page. But I can manually route to other pages like /about, /stlogin. Also, the console shows an error stating
Unexpected token '<' main.229b5112.chunk.js:1 . But after clearing the browser cache it loads without any problem. I tried giving a homepage to the package.json file but it didn't work.
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(8080);
build folder and server.js are in same level.
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 am deploying a Node.js Express app to a VPS by Render. When I run the app on my local machine, the npm start command does a great job of serving my file when I point the browser to localhost:3001. However, after I deploy, the base directory '/' returns "Not found". I have to point my browser to example.onrender.com/public/index.html.
How do I make sure that example.onrender.com/ routes the request to public/index.html?
Thank you!
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));
app.get('/', function(req, res) {
res.render('index.html');
});
app.listen(3001);
Actually just had to change "Publish Directory" settings in Render to ./public
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
Im new to NodeJS and Express but i want a simple '/' route to Angular's default index.html (client/src/index.html) which contains the app-root tag.
The '/' route successfully serves the index.html file but it doesn't expand/load the 'app-root' tag into the component's html so i just get blank page.
Im not sure why it cant resolve the app-root tag when routed from Express. Only if i run Angular by 'ng serve' does the index.html successfully load the contents of the app-root tag.
My structure is as follows:
/client
/e2e
/node_modules
/app
app.component.css/html/ts
app.module.ts
/src
index.html
main.ts
package.json
server.js
server.js
var express = require('express');
var path = require('path');
var port = 80;
var app = express();
// set static folder
app.use(express.static(path.join(__dirname, '/client')));
app.get('/', function(req, res, next){
res.sendFile(__dirname + '/client/src/index.html');
});
app.listen(port, function(){
console.log("Server started on port " + port);
});
It look like you didn't do 'ng build' your angular app because main.ts is still there.
When you do the 'ng serve', angular compiles and serve it using webpack-dev-server.
If you want to serve your app from the your node as static, you need a compiled angular app.
You can do the following
$ cd client && ng build
There will be client/dist directory created where your compiled angular app is located and you can serve that on your express
You can change the directory in you server.js like below
app.use(express.static(path.join(__dirname, '/client/dist')));
res.sendFile(__dirname + '/client/dist/index.html');
Hope this helps