We Keep Coding

Nuxt & Express server not getting api requests in production /dist

I have a Nuxt app running successfully on my local server and all API requests are successfully running from the same server (using the serverMiddleware property in nuxt.config.js). When I run a yarn generate, the path to the API server is lost and no data is loaded. Below are a few screenshots.
Loads data successfully from the API.
Unable to find API
Here is an example of an api call in project_dir api/index.js file
const express = require("express");
const passport = require("passport");
const allRoutes = require("../api/routes/routes");
const guestRoutes = require("../api/routes/guest");
const fileUpload = require("express-fileupload");
const path = require("path");
// Create express instance
const app = express();
// Init body-parser options (inbuilt with express)
app.use(express.json());
app.use(fileUpload());
app.use(express.urlencoded({ extended: false }));
app.use(express.static(path.join(__dirname, "../", "dist")));
/**
* -------------- PASSPORT AUTHENTICATION ----------------
*/
// Need to require the entire Passport config module so index.js knows about it
require("./config/passport-jwt");
// Initialize Passport
app.use(passport.initialize());
/**
* -------------- ROUTES ----------------
*/
// Imports all of the routes from ./routes/index.js
app.use(guestRoutes);
app.use(passport.authenticate("jwt", { session: false }), allRoutes);
console.log("express");
console.log(path.join(__dirname, "../", "dist"));
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname, "../", "dist", "index.html"));
});
// Export express app
module.exports = app;
I don't know why I'm not able to get data from the API routes which I'm running on the same server.

Here is an in-depth answer on how to run an Express server alongside Nuxt: https://stackoverflow.com/a/72102209/8816585
First thing to know, is that you cannot have a Node.js server with yarn generate because it's using target: 'static' and as you can guess, when something is static, it doesn't need a Node.js server to be served to the end-user (only the html + css + js static files are hosted on a CDN or alike).
This mode is meant to host the code on Netlify, Vercel or alike, with no Node.js server available there.
Why is it working locally? Because you do have a Webpack dev server running (with a Node.js server so) for debugging purposes like HMR etc...
TDLR: this is normal (works as intended so far). More info on the given link above on how to make it work.

After much research and debugging I came up with a new idea.
Instead of running npm run start or yarn start containing script "nuxt start" inside the package.json file. I added a new script with the name "express-start": "cross-env NODE_ENV=production node api/index.js". Which runs the express server and nuxt static files.
I'm currently creating a template to make it easier for those who'll face this challenge.
Link to a boilerplate I created after solving the issue.
ExpressJs & NuxtJs Boilerplate

React API communication refuse on cloud IDE (MERN Stack)

I'm learning MERN stack following the below tutorial.
https://medium.com/#beaucarnes/learn-the-mern-stack-by-building-an-exercise-tracker-mern-tutorial-59c13c1237a1
I've decided to use a cloud platform IDE called goorm IDE (https://ide.goorm.io) which is similar to cloud 9 IDE, and as I followed the tutorial, I realized a simple problem, that the testing environment is little different because I can not access the localhost on my machine (Or at least I don't know how to.)
Working on the back End did not have much problem because this IDE provides a domain where I can access and I could just run the server.js (not the whole react app) and test the API end point easily.
But now that I run the whole react app as I'm learning Front End side, I discovered that my server.js is not accessible as before when I was running just the server and I would get refused from the connection as below.
Below code is the actual code I'm using from the front End side in order to make API call to the server.
axios.post('http://localhost:5000/users/add', user).then(res => console.log(res.data));
// I tried changing the url to external domain.. changing the directory.. with no luck..
And below is the code for server.js file.
const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();
const app = express();
const port = process.env.PORT || 5000;
app.use(cors());
app.use(express.json());
const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true, useCreateIndex: true }
);
const connection = mongoose.connection;
connection.once('open', () => {
console.log("Mongo DB database connection established successfully");
});
const exercisesRouter = require('./routes/exercises');
const usersRouter = require('./routes/users');
app.use('/exercises', exercisesRouter);
app.use('/users', usersRouter);
app.listen(port, process.env.IP, () => {
console.log(`Server is running on port: ${port}`);
});
And below is the url of the page where I'm actually trying to make the API Call.
https://zimen.run.goorm.io/user
Other environment information
Running URL and Port setting from the IDE : https://zimen.run.goorm.io:3000
React App directory : root/mern-exercise-tracker/
dependencies : express, create-react-app, mongoose, cors
I'm wondering if it would be better to start the whole project again in a clean local environment..
If someone could please help, it would be much appreciated.
Any other information needed, please let me know, or you can actually join the IDE online as this is a cloud IDE.
Thank you in advance.
== UPDATE ==
Sorry I've forgotten to attach the error log.
xhr.js:178 POST https://localhost:3000/users/add net::ERR_CONNECTION_REFUSED
Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)

its seems you have CORS error,i solved this problem by installing CORS extension on Goolge Chrome

Set PORT=5000 in Nodejs server-side and the default port for React frontend as PORT=3000.
Set your own separate custom 'Running URL and Port' for Nodejs and React.
Example:
https://[custom-client-side-name].goorm.io
for React at PORT=3000
and
https://[custom-server-side-name].goorm.io
for Nodejs at PORT=5000
For Axios command on React side, use:
axios.post('https://my-server-side.goorm.io/users/add', user).then(res => console.log(res.data));
and similarly, the React frontend can be found on your custom website you have set up: https://my-client-side.goorm.io/[custom-routes]

Refresing a vue app gives: Cannot GET /path

I have a simple webpack template vue app, and let's say I have a page with
http://localhost:8080/profile
On my local page, I can go from any page to /profile and even once on /profile I can refresh/reload the page and I get no error.
But I deployed my app on heroku and even though I can navigate from any page to any other, but if I am for example on /profile page and I hit refresh i get
Cannot GET /statement
what could be the problem?

You trying to use history mode of router without backend.
For getting things working, you may use Express JS. Previous answer is not working for me and i write my own server script.
Here is the my server.js for running Vue app with history mode.
server.js (with Express):
const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');
const app = express();
const staticFileMiddleware = express.static(path.join(__dirname + '/dist'));
app.use(staticFileMiddleware);
app.use(history({
disableDotRule: true,
verbose: true
}));
app.use(staticFileMiddleware);
app.get('/', function (req, res) {
res.render(path.join(__dirname + '/dist/index.html'));
});
var server = app.listen(process.env.PORT || 8080, function () {
var port = server.address().port;
console.log("App now running on port", port);
});
Place this file in the root directory of your project (not src).
Run this script with Node: node server.js
Don't forget build your app for production ;)!

I think your vue-router is in HTML5 History Mode. https://router.vuejs.org/en/essentials/history-mode.html
In development mode, the webpack-dev-server handles the redirect for your but your need to configure your server used in production to redirect your routes.

Express Does app.js get ran on every request?

I am building an express server with pretty standard stuff. I've been unable to get express.router() to execute my routes correctly, which has caused me to dig deeper into what is actually happening when a page is requested from a server running an express app.
console.log('App.JS has ran!');
var http = require('http');
var express = require('express');
var app = express();
var server = http.createServer(app);
var mongoose = require('mongoose');
mongoose.connect('mongodb://52.27.161.16');
mongoose.connection.on("connect",function(err) {
if (err) throw err;
console.log('hello found!');
});
var bodyParser = require('body-parser');
app.use(bodyParser.json());
var router = express.Router();
router.get('/hi'), function (req, res) {
res.send('/hi route response');
};
router.get('/', function(req, res) {
res.send('default route reached');
});
app.use('*', router);
server.listen(config.server.listenPort);
Pretty standard stuff—but for some reason whenever I navigate to localhost:port/hi I am only getting the res from the / path, i.e. router.get('/', function{} (res.send('default route reached'));
So I've become more interested in what's happening behind the scenes. I've noticed that the server only logs to the terminal the output not related to the bodyParser on the first request. I.e., the console.log at the top of the file only gets ran when the application is started, and never after, though bodyParser correctly logs requests for each request instance.
What's going on exactly when a request is made to the server? Is the app object and route cached and being served? Why is app.js not being re-evaluated on each request? Is only the router object responsible for sending requests over?
It would be helpful to know this, to figure out why my router is not responding with the correct route.
Thanks a bunch!

The app object is the express application that you are creating. It is basically a wrapper for the express module which includes all the express functionalities. It basically reduces the code that you requires to handle requests made to the server, rendering the HTML views, registering a template engine etc. This app object is passed to the server object that you are creating and the server continuously listens to requests in the port that you have configured. So, when the server is running, the app object is initiated only once and the requests to the server are handled by the node event loop.

node.js /socket.io/socket.io.js not found

i keep on getting the error
/socket.io/socket.io.js 404 (Not Found)
Uncaught ReferenceError: io is not defined
my code is
var express = require('express'), http = require('http');
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);
server.listen(3000);
and
<script src="/socket.io/socket.io.js"></script>
what is the problem ???
any help is welcome!

Copying socket.io.js to a public folder (something as resources/js/socket.io.js) is not the proper way to do it.
If Socket.io server listens properly to your HTTP server, it will automatically serve the client file to via http://localhost:<port>/socket.io/socket.io.js, you don't need to find it or copy in a publicly accessible folder as resources/js/socket.io.js & serve it manually.
Code sample Express 3.x -
Express 3 requires that you instantiate a http.Server to attach socket.io to first
var express = require('express')
, http = require('http');
//make sure you keep this order
var app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server);
//...
server.listen(8000);
Happy Coding :)

How to find socket.io.js for client side
install socket.io
npm install socket.io
find socket.io client
find ./ | grep client | grep socket.io.js
result:
./node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js
copy socket.io.js to your resources:
cp ./node_modules/socket.io/node_modules/socket.io-client/dist/socket.io.js /home/proyects/example/resources/js/
in your html:
<script type="text/javascript" src="resources/js/socket.io.js"></script>

It seems that this question may have never been answered (although it may be too late for the OP, I'll answer it for anyone who comes across it in the future and needs to solve the problem).
Instead of doing npm install socket.io you have to do npm install socket.io --save so the socket.io module gets installed in your web development folder (run this command at the base location/where your index.html or index.php is). This installs socket.io to the area in which the command is run, not globally, and, in addition, it automatically corrects/updates your package.json file so node.js knows that it is there.
Then change your source path from '/socket.io/socket.io.js' to 'http://' + location.hostname + ':3000/socket.io/socket.io.js'.

... "You might be wondering where the /socket.io/socket.io.js file
comes from, since we neither add it and nor does it exist on the filesystem. This is
part of the magic done by io.listen on the server. It creates a handler on the server
to serve the socket.io.js script file."
from the book Socket.IO Real-time Web
Application Development, page 56

You must just follow https://socket.io/get-started/chat/ and all will work.
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
http.listen(3000, function(){
console.log('listening on *:3000');
});

If you are following the socket.io tutorial https://socket.io/get-started/chat/, you should add this line as below.
app.use(express.static(path.join(__dirname, '/')))
This is because in the tutorial, Express will only catch the url
/ and send the file of index.html.
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html')
})
However, in the index.html, you have a script tag (<script src="/socket.io/socket.io.js"></script>) requests the resouce of socket.io-client, which is not routed in index.js (it can be found in console-network that the url is http://localhost:3000/socket.io/socket.io.js).

Please check the directory path mentioned in your code.By default it is res.sendFile(__dirname + '/index.html');
make sure you index.html in proper directory

Steps to debug
npm install socket.io --save in static files (index.html) for example, you may have installed it globally and when you look at the debugger, the file path is empty.
Change your script file and instantiate the socket explicitly adding your localhost that you have set up in your server file
<script src="http://localhost:5000/socket.io/socket.io.js"></script>
<script>
const socket = io.connect("localhost:5000");
$(() =>
Double check that the data is flowing by opening a new browser tab and pasting http://localhost:5000/socket.io/socket.io.js you should see the socket.io.js data
Double check that your server has been set-up correctly and if you get a CORs error npm install cors then add it to the server.js (or index.js whatever you have chosen to name your server file)
const cors = require("cors");
const http = require("http").Server(app);
const io = require("socket.io")(http);
Then use the Express middleware app.use() method to instantiate cors. Place the middleware this above your connection to your static root file
app.use(cors());
app.use(express.static(__dirname));
As a final check make sure your server is connected with the http.listen() method where you are assigning your port, the first arg is your port number, for example I have used 5000 here.
const server = http.listen(5000, () => {
console.log("your-app listening on port", server.address().port);
});
As your io.on() method is working, and your sockets data is connected client-side, add your io.emit() method with the callback logic you need and in the front-end JavaScript files use the socket.on() method again with the call back logic you require. Check that the data is flowing.
I have also edited a comment above as it was the most useful to me - but I had some additional steps to take to make the client-server connection work.

If you want to manually download "socket.io/socket.io.js" file and attaché to html (and not want to get from server runtime) you can use https://cdnjs.com/libraries/socket.io
like
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js" integrity="sha512-eVL5Lb9al9FzgR63gDs1MxcDS2wFu3loYAgjIH0+Hg38tCS8Ag62dwKyH+wzDb+QauDpEZjXbMn11blw8cbTJQ==" crossorigin="anonymous"></script>

while this doesn't have anything to do with the OP, if you're running across this issue while maintaining someone else's code, you might find that the problem is caused by the coder setting io.set('resource', '/api/socket.io'); in the application script, in which case your HTML code would be <script>type="text/javascript" src="/api/socket.io/socket.io.js"></script>.

If this comes during development. Then one of the reasons could be you are running a client-side file(index.html). But what you should do is run your server(example at localhost:3000) and let the server handle that static file(index.html). In this way, the socket.io package will automatically make
<script src="/socket.io/socket.io.js"></script> available on the client side.
Illustration(FileName: index.js):
const path = require('path');
const express = require('express');
const socketio = require('socket.io');
const port = 3001 || process.env.PORT;
const app = express();
const server = http.createServer(app);
const io = socketio(server);
//MiddleWares
app.use(express.json());
app.use(
express.urlencoded({
extended: false,
})
);
app.use(express.static(__dirname + '/public'));
app.get('/', (req, res) => {
res.sendFile('index.html');
});
io.on('connect', (socket) => {
console.log('New user joined');
}
server.listen(port, () => {
console.log(`App has been started at port ${port}`);
});
After this run your server file by the command
node index.js
Then open the localhost:${port}, Replace port with given in the index.js file and run it.
It solved my problem. Hope it solves yours too.