Unable to view the React app started with 'sudo npm start' - reactjs

I need to run my local React app at banker-dev.mh*b.my on port number 443.
This is to enable the app to call a third party API
I've set my local .env file with the following:
HTTPS=true
HOST=banker-dev.mh*b.my
PORT=443
When I run npm start, I encountered the message:
? Admin permissions are required to run a server on a port below 1024.
Would you like to run the app on another port instead? (Y/n)
So I tried sudo npm start but hit error sudo: npm: command not found
I then sudo installed npm by referring to this: sudo: npm: command not found
Now I'm able to run sudo npm start
The app is started as I can see from the code editor.
But it's not opening a new browser window with the app loading as it usually does with my normal npm start
And I noticed a weird thing: it's trying to bind to the host dev.mh*b.my instead of banker-dev.mh*b.my
My hosts file contains the following:
127.0.0.1 localhost
127.0.1.1 yogesnsamy-ThinkPad-E490s
127.0.0.1 banker-dev.mh*b.my
127.0.0.1 dev.mh*b.my
I'm doing something wrong, but I'm not sure what. I'm attaching a video reference of what's happening: https://drive.google.com/file/d/1TYcX3wG8yBFjSukvVAkYZDloPJE3JS8T/view?usp=sharing
Sorry that part where the app starts to load takes long (0:34 to 1:00). After it does, I try to view the app on the browser but fail.

Related

Front-end application with yarn starting locally but when docker container is run ports are empty

The port loads and I can view the app locally on port 3000. I can do this by running yarn the yarn start. The container runs and says it can be
Available on:
http://127.0.0.1:3000
http://172.17.0.2:3000
When loading the ports in my browser I see nothing. This is error is occurring with two projects I am working on.
For reference these are the front-ends I am trying to place in images.
https://github.com/Uniswap/interface/
https://github.com/safe-global/web-core
I am running node v18.12.1
The DockerFile
FROM node:16-alpine
RUN apk add --no-cache libc6-compat git python3 py3-pip make g++
WORKDIR /app
COPY . .
# install deps
RUN yarn
ENV NODE_ENV production
# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
ENV NEXT_TELEMETRY_DISABLED 1
EXPOSE 3000
ENV PORT 3000
CMD [ "yarn", "start" ]
I am able to get the images to say they compiled all the code and run locally. I was expected these apps then to load on port 3000 like they do when I run it locally but this only results in an error in the browser stating "this site can't be reached"
Port 3000 its port inside container. You have to expose port.
For example:
-p 3000:80
And open outside port 80.
https://docs.docker.com/config/containers/container-networking/

React app rewired doesnt run under port 1024

I have this React application that needs to run under port 443. Usually it works fine but now i got a new computer and for some odd reason i cant run it anymore.
I have two ways for this. A custom script in the package.json file and it should also work when ran with sudo. sudo npm start or npm run https.
The port is defined in the .env file by default.
This is what my package.json looks like
When i run sudo npm start the expected behaviour is for it to run, without sudo, it should warn me that Admin permissions are required. This is what is happening with sudo aswell.
$ sudo npm start
or with the other command
$ npm run https
Not quite sure what to do in this situation. Anyone have any idea how to make it work ?
Running this command fixed the issue for me.
sudo sysctl net.ipv4.ip_unprivileged_port_start=443

React using wrong IP address for localhost

I'm trying to run the most basic react app possible and run it locally. I have referred to the startup docs: https://reactjs.org/docs/create-a-new-react-app.html
I run the app using both npm start from the docs and yarn start as indicated in the terminal. The result in the terminal looks like this:
My app appears to be running, but the IP address looks wrong. When I copy and paste this into my browser's address bar or try localhost:3000, my page does not load.
Other solutions I tried after referencing other StackOverflow threads:
restarting my computer
changing the port to another port
deleting and rebuilding the node_modules folder with yarn
None of those worked. What can I do to fix this?
I ran the command unset HOST in the terminal just before starting up my app and this worked.
Also, several other threads have referenced this article: https://choy.medium.com/fixing-create-react-app-when-npm-fails-to-start-because-your-host-environment-variable-is-being-4c8a9fa0b461
To set your localhost in .bash_profile do the following in the terminal...
Open bash profile in nano
nano .bash_profile
type HOST="localhost" and save this file
back in the terminal, type
source .bash_profile

Running a react app inside a linux docker container

I created a Linux container in docker with all the packages and dependencies I need it for my school project. I am aware you can deploy react app containers and use Docker for deployment, although I did not want that. I just need it a Linux container with everything installed so all the members in the team will use the same versions of npm and node. After building the container I ran inside my workdir folder:
npx create-react-app my-app
cd my-app
npm start
and this is what it shows
enter image description here
which means that the app is running locally in my computer how can I see it locally in my PC?
use this to run your image:
docker run -d -p 8080:8080 my_image
-p 8080:808 - will map your docker container port to your localhost 8080 port, and you should be able to just go on http://localhost:8080 to see it.
(assuming that npm start is starting server on 8080 inside of your docker)
-d means in detached mode, your going to start docker and stay outside of it.

Live Reload doesn't work

I watched a few videos where the app was recompiled after any changes in the code were detected. Actually, when you run ng serve I think it should show something like
Live reload server on ...
But for some reason it doesn't work in my case, so in order to see changes in code I have to close ng serve and run it again.
I have two default ports forwared in my Vagrantfile, one for web server and one for LiveReload server:
config.vm.network "forwarded_port", guest: 4200, host: 4200
config.vm.network "forwarded_port", guest: 49152, host: 49152
And, of course I have to run ng serve --host 0.0.0.0 to make this thing available from my host machine browser.
I had the same issue on Ubuntu and this solve my problems:
sudo echo "fs.inotify.max_user_watches=524288" >> /etc/sysctl.conf
sudo sysctl -p /etc/sysctl.conf
I don't know are you using linux or not?
If above doesn't help you try to:
remove node_modules/
npm cache clean
npm install
I use angular-cli and the command that I use is npm run start. If you are using vagrant then I wonder how it would access your local browser. However, angular-cli doesn't really need vagrant to run, it generates it's own environment.

Resources