Cannot access React app from production server - javascript

I have a react app which I can run on localhost without any problems. I dockerized it and put it on the production server, and sudo docker ps shows that the container is running. I used sudo docker run --name "name" -d -p "my port":my port" "uri"
to run the container, and I made sure to specify the correct port. But when I try to access the app from my browser by putting in the ip of the server and the port, I cannot access it. I am able to access other apps running on this server.
Any ideas as to what I'm doing wrong?

Just verify the return of your container, when you run it. Try:
docker run --attach STDERR ****

The command in my start script setting the port to be different than the default 3000 was not working in the docker container, although it worked when I ran the program on localhost. So instead, in my run command, I mapped port 3000 to the port I wanted to use on my server.

Related

How to make sure vue-project runs on port 80

I was following this reference here. I made all the same configurations to make sure I could run on port 80. The reason I am doing this is so that I can route the appropriate url without specifying the actual port number after.
When I made all the appropriate adjustments when I run
yarn build && yarn serve
I get this
App running at:
- Local: http://localhost:1024/
- Network: http://172.31.49.146:1024/
Note that the development build is not optimized.
To create a production build, run npm run build.
and I can only access my website if I provide the 1024 port. I have searched through my code and this port number does not exist anywhere so maybe it is happening by default?

localhost:3000 is not working in the browser

Backend: Express server, with npx create-express-api backend
Frontend: Next.js, with npx create-react-app frontend
I have implemented these command in my root folder and trying to run npm start xxx to check if they are still working or not. But they are not working in my http://localhost:3000
Though they are working in this link http://172.27.178.192:3000 (on my network)
This is the image showing the problem
I have changed browsers and still the same problem is appearing. On the browser it says
Unable to connect
Firefox can’t establish a connection to the server at localhost:3000.
netstat -ano | findstr :8080
Then the PID will appear at the right which you can kill with taskkill.
The last number the pid.
then:
taskkill/pid 11704 /F
How to close TCP and UDP ports via windows command line
I think some other application occupied your 3000 port. try find which one is. If you have found then closed and try again.
For instance you want to free the port 3000 Then, follow these commands.
netstat -ano
taskkill /f /im [PID of the port 3000 got from previous command]
How to close TCP and UDP ports via windows command line
in browser history search for localhost:3000 and delete all of them.
make sure you closed all terminalls(check vscode too) and all tabs in your browsers.
in new widnows terminal npx kill-port 3000 do it in WSL2 terminall too.
make sure your firewall is turn of.
restart you computer.
It worked for me
Delete the .next folder ( if your working on nextjs ) and try npm run dev command OR
Move the project to another folder location OR
Take back up of the code and delete the project and then run the same project again
You can try all of the above also

how to deploy nodejs api and vuejs app in one 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.

Node.JS: Why is my connection to localhost:3000 refused?

I'm a student going into back-end development for the first time and are trying to learn Node.JS. I downloaded a pdf book about Node.JS from sitepoint called: "Jumpstart Node.JS". In following the instructions to set up the server on the command line, install the dependencies, and navigate to localhost:3000, i got nothing except the following message: "Connection refused: localhost:3000", Can somebody please tell me what might have went wrong and how to fix it?
Edit1:
The instructions i followed is about setting up a node.js server using the Node command line, thus no code, simply cmd commands, however, here is a quick summary of the process i followed:
Created an account on MongoLabs and then a database using the free pricing plan.
Installed express using the command: npm install -g express#.2.5.8.
Created an applications with default options using this command: express authentication.
modified the package.json file in system32
installed the dependencies by typing cd authentication, hitting enter, and then typing the command: npm install
Typed node app and hit enter.
According to the instructions i should have seen a message: "Welcome to express" but instead got the error message.
In following the instructions to set up the server on the command line, install the dependencies, and navigate to localhost:3000
It seems that you didn't start the server.
Somewhere between installing the dependencies and navigating to the URL you need to actually start the server if you want it to serve the request.
Check that there is no copy of the server running in the background, or that another app is using the port currently.
(Your firewall show allow you to see which app has been allocated to that port)
Because nodejs requires it to be the only app on that port running on your computer.
Also try a different port maybe?

express runs on two ports even when port is specified

I use app.listen(PORTNO) for running my express app.
It runs on 127.0.0.1:PORTNO but also on 127.0.0.1:3000
3000 is the default port no on which express runs out of box.
Why this unexpected behaviour?
I have tried setting the env variable to production and also using http.createServer(app).listen(PORTNO);
I am generating my express app files using express-generator.
I am on a windows machine if its relevant
UPDATE:
I start the server using npm start which runs bin\www, and it specifies the port to run the server.
But this does not explains the binding to two port :the one specified in app.js and the other in bin\www for the same app and the app being accessible from both of them.
Can you explain the why?
You should start your server using node server.js(filename). Try this if it helps since when you start it with npm it will get default configurations. And Moreover npm command is used to install the node modules(mostly) rather than running the server.

Categories

Resources