I have installed Node.js on my web server plus the dependencies for Express. When I run the command npm start and go to my web site's address using the port 3000 (which I believe the app is set to by default?), it just keeps loading and never loads. Any tipps please on how to fix this?
Try this $ PORT=8080 node app.js. Here app.js is your server config file. I suspect some background servers are running in that port 3000.
Related
I'm trying to understand what needs to be done to put my react app online.
Until now, I launched it on my mac using npm start, and accessing localhost:3000 or http://127.0.0.1:3000.
So I currently have bought a small server, installed everything (last version of node and npm, git and other necessary things), cloned my repo, and installed all dependencies.
When I do npm start on the server, it says it's available on port 3000. But when I go in my server's ip with the following :3000, it times out.
I don't really understand what need to be done to do this, I found some things about configuring apache on the server, others about using pm2 so have a node script running even after leaving the terminal, but that would be my next step I guess.. And other about configuring things with express (but do I need node+ express here ? As it's a simple front end react page ?).
if you are using webpack devserver, use it for development only
The tools in this guide are only meant for development, please avoid using them in production!
back to your question, there is a difference between binding to 127.0.0.1 or binding to 0.0.0.0
try changing the devserver to listen to 0.0.0.0
webpack.config.js
module.exports = {
//...
devServer: {
host: '0.0.0.0'
}
};
Usage via the CLI
webpack-dev-server --host 0.0.0.0
also note, that you will need to allow ingress rules (incoming connections). that is, allow a request from the internet to reach your server
There are a lot of configurations you will have to do when you deploy your application on a server. Building the app, Nginx, pm2 and even ssl certification. This video is 20min and has all you need. https://www.youtube.com/watch?v=oykl1Ih9pMg&t=1s
I tried to sucessfully bulid node js api using crud Operation and working fine in locally.but how to move production to live see the api data.I tried pm2 but also working for local ipaddress.how to solve this problem any solution..
Change the host name in server.js or index.js file from 'localhost' to 0.0.0.0 then you server will expose to the outside of the your network
Change 'localhost' to '0.0.0.0'
If you have any firewalls you must allow your server port to outside network.
If you are using pm2, you can select environment as production while starting the process.
pm2 start config.js --env production
Ref: http://pm2.keymetrics.io/docs/usage/environment/
For some reason my express node.js server won't start anymore. Usually I just run the npm start command in my application folder and the server will start listening. now it is stuck at > node ./bin/www.
> myapp#0.0.0 start C:\Users\...\first-app
> node ./bin/www
I did not change anything significant, just restarted the server and it did not work anymore. This already happened before and I reinstalled express and then it would work again. I just cant reinstall express all the time.
Also changed ports, same result.
I am new to Node and Angular. I need to know whether is it possible to run a Node Express app serving as a backend and an Angular frontend on the same port. I followed Angular Quickstart tips on angular.io and created a Node todo application but both are running on different port which raises the issue of Cross Origin Request Blocked Issue.
To have Node.js serve the Angular app on the same port, your Angular app must be deployed under your Node's directory where the static resources are deployed. But in dev mode, it's more productive to serve your Angular bundles (so they auto-rebuild in memory as you code) from the dev server, e.g. on port 4200, while the Node server runs on another port, e.g. 8080.
To avoid cross-origin issues, you need to configure a simple proxy file in your Angular app to redirect all data requests to your Node server. For example, create a file proxy-conf.json in the root dir of your Angular project:
{
"/api": {
"target": "http://localhost:8080",
"secure": false
}
}
This will redirect all requests that have /api in the URL to your Node server, assuming that it runs on port 8080. Then start your Angular app using the following command:
ng serve --proxy-config proxy-conf.json
An HTTP request in your Angular App can look like this:
http.get('/api/products');
Of course, you need to configure the /api/products endpoint for GET requests on your Node server.
To get Angular and Express running on the same port I've always served my Angular build files by the Express app itself. You should be able to tell Express to serve static content from an Angular build directory like this:
app.use(express.static('../accounting-client/dist'));
Which would work if you had a file structure like so and were running serve.js with Node:
-accounting-server
-serve.js
-accounting-client
-dist/*
You can customize as needed by configuring the Angular build folder to be wherever you need it, or use Grunt/Gulp to move files around to the folders you prefer with a build task.
As mentioned by Yakov this isn't ideal for development since it won't work with the Angular dev server's auto-refresh.
The fact that you need to have access to your client-side project from within Express project, as spacefozzy said, is true. but you still can keep your projects separated.
To do so, you can create a symlink from your client-side project directory in your Express project directory:
// while in Express directory
ln -s ~/path/tp/client-side/build name-in-espress-dir
This way you can maintain projects isolated.
I have an Express app bundled with an Angular 2 app that I run together as such:
ng build -w & nodemon server.js --watch dist
Basically, whenever a file is saved the angular app is rebuilt, and that ultimately triggers the node server to restart as well.
Additionally, I would like to reload the app on the browser so that I don't have to reload it manually. What is the best way of doing this? Previously, when I was using ng serve the browser reload was done by WebPack
Check the first answer here Hooking up express.js with Angular CLI in dev environment
Copying answer here
My experience of 15 hours has taught me that trying to serve an Angular app with Express during development is NOT a good idea. The proper way is to run Angular and Express as two different apps on two different ports. Angular will be served on port 4200 and Express on port 3000 as usual. Then configure a proxy for API calls to Express app.
Add proxy.config.json to root of Angular 2 project:
{
api/*":{
"target":"http://localhost:3000",
"secure":false,
"logLevel":"debug"
}
}
Open up a new terminal tab and run this command to start Express app:
nodemon [YOUR_EXPRESS_APP.js] --watch server
(YOUR_EXPRESS_APP.js is usually named server.js or app.js. server is a directory where you keep all your Express app files)
Open up a second terminal tab and run this command to start Angular app:
ng serve --proxy-config proxy.config.json
This will ensure that Angular app is rebuilt and browser reloaded when a change is made to any Angular app file. Similarly, Express server will restart when a change is made to any Express app files.
Your Angular app is here: http://localhost:4200/
Watch this video to see how to configure a proxy for your API calls with Angular CLI
NOTE: this setup only applies for development environment. In production, you will want to run ng build and place the Angular app inside a dist directory to be served up by Express. In production, there is only ONE app running - an Express app serving up your Angular app.