Develop Reference

Serving create-react-app build files on express server

I want to serve build files of my react app on my other express application. So I copied all the static files inside build folder to public folder inside my express application and I used.
app.use(express.static(path.join(__dirname, './public')));
app.get("/",(req,res)=>{
res.send()}
)
app.get("/differentRoute",(req,res)=>{
res.send()}
)
app.listen(4000)
When I make a get request on http://localhost:4000/ my react page loads perfectly, however when I make the same request on http://localhost:4000/differentRoute, nothing loads, can someone explain me how it works?

When you request / it finds the index.html file in the public directory, and serves it up using the static handler.
Nothing get ever get to the explicit handler for / since the static route always catches it first.
When you request /differentRoute, there is no matching file in the public directory so the explicit route for that is triggered. You call res.send() with no arguments, which doesn't make sense.
If you want to have URL based routing and don't want to use server side rendering, then use the HashRouter.
If you want to have real paths for the different pages in the app, then use server side rendering (e.g. with Next.js.

using JSON data in client side javascript file

Im fairly new to node.js and express. My question is how to correctly retrieve json data in a client side javascript file since im getting a 404 code about the .json file not being found.
my file structure is a generic express structure and the .json file is in the nodeapp folder right below the package.json file and app.js. Im trying to access this file from a javascript file that is saved in public/javascripts folder but can seem to get around it. here is the function im trying to implement in the .js file:
function getJSONData(){
var json;
$.getJSON('/public/web_text.json', function(data){
json = data
});
}

Option 1
You need to setup static files in express, and you do it like this:
app.use(express.static(__dirname + '/public'))
You then can call it from your client (without the public prefix):
$.getJSON('/javascript/web_text.json', function(data){});
https://expressjs.com/en/starter/static-files.html
Option 2
Your other option is to send it via sendFile http://expressjs.com/en/api.html#res.sendFile:
app.get('/public/web_text.json', (req, res) => {
res.sendFile(__dirname + '/my_json_file.json');
});
Then in your client you can call it like this:
$.getJSON('/public/web_text.json', function(data){})

Getting web application production ready (angularjs/nodejs)

My web application consists of angularjs on front end side and nodejs server listening to client requests. This is my folder structure:Folder Structure
UX contains client side code and IT contains server side code. I am using gulp to watch over development changes and for packaging (you can see the dist folder in UX). I use two terminals to launch this web application locally. From one terminal, I use gulp serve (UX folder) to start a static UI server which monitors the changes as I make to UI and reflect back the changes on the browser immediately. From the second terminal, I start a node server2.js server.
The UX/src/app folder has a config file where I specify server ip address and app.js uses this info to connect to server (currently).
Now, I want to deploy this app over cloud. On the cloud, I have to specify a node it/server2.js as a starting point in its config file. Hence, I want the corresponding web link should point to index.html in UX/src/app folder.
Hence, I need some advice on how to integrate my client side app.js file in the server2.js file on server side.
I am an amateur.
Thanks a lot!

I added this code to my server2.js file:
var express = require("express");
var app = express();
app.use(express.static("ux/dist/"));
app.get("/", function(req, res, next){
res.sendFile('index.html');
});
Currently, it is invoking index.html page from UX folder. But, I am not sure whether I have done it the ideal way. Need help on this.

Node js serving old versions of modified angular files (instead on new ones)

I'm programming a project using the MEAN stack. All fine, except with the static files.
I have some rules in the Node router file to serve the static files. And it's working, but then I have done a change on an Angular file, but the Node server is returning me the old version of this file (before the changes).
Why is this happening?
Mainly, my server routing code is this one:
var app = express();
app.use("/node_modules/angular", express.static(__dirname + '/node_modules/angular'));
app.use("/scripts", express.static(__dirname + '/public/scripts'));
app.get('*', function(req, res){
res.sendFile(path.join(__dirname + "/public/index.html"));
});

The problem is that express will cache your static files because they really shouldn't change like Yevgen said. It's why you'll often see stuff like mainSOMENUMBER.css in production. So everytime you update a resource file like main.css or in this case app.js you add a version number to it and then change the source.
Long story short here is your fix.
app.use("/node_modules/angular",
express.static(__dirname + '/node_modules/angular'){maxage: 0});

I guess you are using such setup only for development process. Ideally static file should never change, the new version of the file should be reflected in new file name. By default express static middleware servs the new version of the file without server restart. I could suggest in your case to setup nodemon or forever to watch on file changes in your static folder and trigger server restart.

expressjs render html file without any engine

I am new to nodejs and expressjs
I am trying to develop a simple login page which has a username field and a password inside a form. on submit of the form i will redirect the user to a home page where i will display the message welcome user- userName. I want both the login and home pages to be simple html files. The form in login page has action set to home.html so when the user submits the form i can get the user name and password using res.body.userName and res.body.password. My question is how to use express to render html file. I do know that i can use res.sendfile function to send a html file but sendfile function does not support sharing variables to the html file.
I have posted below my code in app.js
var http = require("http");
var express = require("express");
var app = express();
app.use(express.bodyParser());
app.all("/",function(req,res,next){
res.render("login.html");
});
app.all("/home.html",function(req,res,next){
res.render("home.html",{"userName":req.body.userName});
})
http.createServer(app).listen(3000,function(){
console.log("Listening at port 3000");
})

You don't need a rendering engine to serve up static assets like html files. You should rethink what is being served up on different request but for what you want you have to place your static assets in a directory and tell express where they are like so
app.use(express.static('public'));
Assuming your server file is on the root, and you have an public folder on the root as well, put your html files in the folder. By default, express will look for an index.html file in the foot of that public folder and serve it on a GET request to /. You are overriding that by serving your login page. That's fine. You have to use res.sendfile('/path/to/file') instead of res.render()