showing a white screen after every new version deployment react js - node.js

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.

Related

React app under Plesk static assets are not reachable

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'));
});

routes in angular and nodejs deployed app not working

I have deloyed a nodejs and angular app on heroku but after deployed routes are not working.
here is my webiste - https://murti123.herokuapp.com
with routes - enter link description here
but with routes it gives a can't get / errror.
i don't know how to resolve it
Here is My project Structureenter code here
You need to resolve your path to the frontend application
so assume that in /public folder you have the dist files from the builded frontend application
app.use(express.static(__dirname + "/public"));
and here you resolve that index.html for any route
app.get("*", function (req, res) {
//path is required at the top of the file ofcourse
//const path = require("path");
res.status(200).sendFile(path.resolve(__dirname + "/public/index.html"));
});

Improper Routing when deploying Node.js app to Render VPS

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

Express 4 route won't hit

const express = require('express');
const path = require('path');
const app = express();
app.listen(9000);
app.get('/test', function(req, res) {
console.log("not being hit");
res.send(200);
});
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
console.log("always hits");
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
This seems like such a simple problem but my brain is starting to turn to mush.
Here's the details:
I have run build on a react app and the index.html file resides in the build folder, and I want this served via express.
I want express to prioritize /test first, and if it's not /test, then I want it to serve the index.html file in the build folder.
If you go to /test, it is skipped and always hits the /* route. If you remove the wild card and use / instead, neither routes will hit if you go to / or /test in the browser. However, index.html is still served and it looks like that's because of the static middleware.
Everything I have read suggests that order in express is important, but I feel like I'm losing my damn mind and I'm starting to slowly descend into madness.
Thanks in advance.

How to link angular 2 in node js?

Newbie question that is driving me crazy. I am trying to build the ToDo app with the MEAN stack and I can't get the Express server to connect to Angular 2. I believe it has something to do with where I have my index.html view relative to the Angular installation, but I can't figure it out.
Your project folder struction should like below
project/server [Node]
project/server.js is your express server
// Get our API routes
const api = require('./server/routes/api');
const app = express();
// Parsers for POST data
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
// Point static path to dist
app.use(express.static(path.join(__dirname, 'dist')));
// Set our api routes
app.use('/api', api);
// Catch all other routes and return the index file
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
project/src/index.html [angular code]
You can build angular code into dist using
ng build
This creates the dist folder with the angular 2 app built files. Now we can serve the app with express.
For run server use
node server.js
which create server
Go through https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli for more information.
Thanks in advance

Resources