So just for the testing purposes in production I had to split my frontend client written with angular 1.x and my node backend server code. Client uses api function provided by node but they are running on the different servers on my local machine. I set up my node server for running on port 5000 and when it's running my angular server gives me information that it has to move to port 5001 because port 5000 is already occupied.
How can I launch both of the servers and force them to share API functions on my local machine?
For the angular I use 'serve' -> https://github.com/angular/angular-cli/wiki/serve
you just need to change port for your client side,
for this, edit your angular-cli.json
{
..............
"defaults": {
"styleExt": "css",
"component": {},
"serve": {
"port": 5001
}
}
.................
}
when you do ng serve , it will run your angularjs server on port 5001
This is not an answer but since I couldn't add comments I had to write here.
If you are already using Vagrant then disregard the rest of this post.
This is just an option that may allow you to use both applications on the same port by setting up a vagrant instance.
Setup Vagrant for your node application. Configure the Vagrantfile to forward host:5001 to guest:5000.
config.vm.network :forwarded_port, guest: 5001, host: 5000
You can continue hosting the angular application on your host(localhost) machine. Requests to your API can then be forwarded to the the vagrant instance.
If your angular app and api are already separated by a different domain, you can then update your host file on the local machine to rewrite domain requests to your vagrant machine.
Related
I have a project with a client folder containing a React app bootstrapped with create-react-app. I also have a server folder with an express API server running on localhost:80.
Originally, I ran my frontend and backend as separate servers, making requests to the API server by making requests with fetch("url") and using "proxy": "localhost:80" in my package.json
I have recently altered the project so that my server serves the static frontend files like so: app.use(express.static(path.resolve(__dirname, "../client/build")))
I then tested running the server on two different ports 80 and 3000, and the frontend and backend both worked perfectly but I believed it would only work when the server was run on port 80
How does my frontend now know where to call the API server when it is running on different ports?
Proxy is used in the development environment and after that when you make build then its convert into the static HTML, CSS and JS files and that can be run in any port using node if you try that in a different port than it will also work as same
Proxy is not made for the production environment
https://github.com/facebook/create-react-app/issues/1087
I'm trying to set up a reverse proxy on the development server for my VUE js webapp to get around the CORS issue that I was getting when I was trying to use my flask HTTP APIs with the vue js webapp.
I did this by creating a vue.config.js file in the root of the project directory:
module.exports = {
devServer: {
proxy: 'http://localhost:5001/'
}
}
when I run npm run serve, and try to use a REST API defined on port 5001 - I don't see the request going to port 5001, it uses the same port as the web app.
And there are no useful logs being written to stdout either to help me debug this.
Has anyone come across this issue before ?
I had a similar issue and found that the port was already in use by another application and hence it was not going to the correct port. Once i shutdown the other app, it started working as expected.
I have created a project using angular-universal.
after building the project it created browser, server, server.js and prerender.js. I want to know how it can run on the nginx.
with the current scenario i create the build of the project send it's zip file to the /var/www/html and unzip it there and it runs.
Make sure your angular ssr project is running on same port , which you domain is listning to in nginx configuration file.
By default it listnes to 80 port , you need to change that port number in nginx configuration file and restart the server.
I have developed node rest api and vuejs web applications,
Im trying to deploy both project in to one aws server which run ubuntu.
Both applications have different port,
domain I try to configure api.example.com for api and example.com for vue app.
I can run both applications once after running the command in SSH, but I need them to run it forever.
What I did,
Deploy to apps separately
Apps can access with ports
I need them access
api.example.com
example.com
what are the step to do,
Any changes host file.
I found another way to deploy vue app and express/nodejs in one server without using PM. This what I did
Build your vue code using npm run build command. This will create a folder dist which should have index.html file and static folder.
Copy dist folder into your server code repository. In my case I created a folder public and moved the dist folder inside public.
In app.js file right before module.exports=app line, copy the following lines of code
//These 2 lines make sure that vue and express app are coming from the same server.
app.use('/static', express.static(path.join(__dirname,"../public/dist/static/")));
app.get('/', function(req,res) {
res.sendFile('index.html', { root: path.join(__dirname, '../public/dist/') });
});
First line make sure that the /static folder is accessible and second line will serve the index.html file when you run the node server. Routing between components will be taken care by vue.
This is how we are running our VueJS UI and ExpressJS REST API from the same server.
We are managing our services with PM2.
VueJS (Dev Environment, You can add the same settings to production)
In package.json add "start": "HOST='0.0.0.0' PORT=80 npm run dev",, where 80 is the port VueJS is listening on, to the "scripts": {..} array. Then, after installing PM2, (for dev) we can start VueJS with cd /location/of/vue/root; sudo pm2 start npm run dev --name Vue -- start. (Make sure that Apache is not running).
Please note that setting the HOST to 0.0.0.0 is important. Do not set it to LocalHost or your Servers IP address or you may run into issues.
ExpressJS
In the /location/of/express/app.js add this similar to the bottom of the file:
app.listen(process.env.PORT || 8081), where 8081 is the port your REST API should be listening on. I can then start it with sudo pm2 start /location/of/express/app.js --name Express
At this point, the VueJS should be available at www.example.com (implied Port 80) and the REST API would be available at www.example.com:8081.
If you want to have api.example.com/ point to the API, you need to make sure that your DNS is pointing the "api" subdomain to the desired port, or you may have to add the port into the URL as above.
Additionally, you can easily follow the logs through PM2 as well with pm2 logs APPNAME --lines 100.
I have a local Node.js server running on port 3000. I have another dev server for front end using webpack, running on 8080. Node is connected to MySQL server. I want to send data from my Node to front end. My project structure looks like this:-
SampleProject
-> BackEnd
-> FrontEnd
Should I use CORS node module? If not how should I send the data?
The easiest way would be to use webpack-dev-server proxy option to proxy requests from webpack-dev-server (8080) to Node (3000).
Example config:
{
devServer: {
proxy: {
'/api': {
target: 'http://127.0.0.1:3000'
}
}
}
}