I'm using create-react app. In order to view the project in the browser locally:
In the command line, in the application directory I type the command npm start
In the browser I type http://localhost:3000/ for the URL on the same computer (Or other port I specify).
I'd like to be able to access the project from browsers on other computers as well. This is for the purpose of QA. How can I set it? Is there a way to set it in the package.json file, and without npm eject?
You can establish Public Connection using ngrok. When you run ngrok you instantly get a public address to your local development machine.
You share generated public Ngrok link (viz. http://92832de0.ngrok.io) with other users. They connect to Ngrok and this connection between their pc and Ngrok is referred to as Public Connection
Related
How I can connect to my react-app from another PC, but we are in the same network? I just wan't to show the website which I'm making on my colleague PC, cause he is going to use it after it, how I can do it? Or is there any good way to deploy it locally somehow?
This solution work for me
Simply run HOST=0.0.0.0 npm run start.
get IP of your host PC by using ifconfig command
Afterwards open the url from another device on the network.
If you are using create-react-app, you could use HOST environment variable, like this:
$ HOST=0.0.0.0 react-scripts start instead of npm start
Then you can access the website on the other computer's IP like 192.x.x.x:3000
Other than this, you can use ngrok or localtunnel which will create your localhost:3000 public to other computers with a specific link.
I start my React app using:
npm start
This starts the app on localhost:3000
I would like to have it start with a domain instead of localhost. When testing locally, I have a local domain (example mydomain.com) set to IP address 127.0.0.1. This allows me to use the actual domain in code when making requests to the backend. Without this, my code would need to support both localhost and my domain and swap them out in production.
npm start is only a command to run your react app in development mode.. for faster build and publish functionalities..
So for production, you will be using npm build to get a production build for the same. This won;t be automatically deplyed or hosted on your localhost:3000.
So production deployment you will have to host your compiled build files using IIS or some hosting application. There you can configure your preferred DNS, whcihever domain name you would want to use.
You can customise the url for deployment for development.
In your .env.development add this line
HOST='mydomain.com'
If you want to deploy at https, add this line also in same file
HTTPS=true
I am working on a React app and trying to find a way to have it served from a local network server while I work on it, instead of localhost:3000.
The app files would be in a shared directory on the server so I could work on them from my machine. But when I npm start, the app would be accessible from the LAN and from the outside via the server.
The goal is to avoid having to build/deploy every time someone else needs to have a look at the app (which is often).
Is that even possible ?
I suggest using https://ngrok.com/. After you install it, npm start your react app and in another terminal type ngrok http 3000, it will then provide you with external public facing urls anyone can access.
If you're using VS Code you can use the Remote Development Extension Pack to SSH into the local network server and mount the workspace accordingly. You just need to setup the remote host (or subsequent ssh-exposed container) as an SSH server.
what is the best way to deploy a react web app (ex. employee database) on the local area network only? i'm using create-react-app and i'm almost done with the code but after that, i don't know what to do. it was easier to do this in php/mysql with the help of xammp. but i would like to do this using react this time. thank you
The react is already working in your local lan IP
for example your local lan ip is 192.168.1.20 you and your react running port is
localhost:3000
other PC's mobile devices laptop could already access the server in your PC via
http:/192.168.1.20:3000
just make sure you enable it to be allowed in your firewall usually the antivirus does not permit is so try to set enable in the firewall settings in your antivirus and windows firewall
If your app is totally static you can serve it with a web server after building. When you are done with your app first build it with:
yarn build
After this you will have all your static files in your build directory inside your project. build/static/js and build/static/css contains bundled js and css files. Those files are being attached to your index.html file. So, when you serve this directory with a web server like a regular html site, you can use your app.
By default
type npm run build
after a build is successful then,
type serve -s build
it will give you URL
use that with IP to other devices connected in the same network.
I can't access the app built with create-react-app from other devices on the same network using http-server package.
If i use http-server to serve an other react project it works fine to access the app from any device on the same network. But using create-react-app i can access the app only through the device which hosts the app, whether i use http-server or pushstate-server as suggested after running npm run build.
Any idea to solve this?
EDIT
I first create the build folder running npm run build and then I serve the build folder with http-server running http-server -p 9999 -o from the build folder and it works from my laptop which hosts the app, database and the API REST server, but if i try to access the app from another device on the same network using the laptop's ip address (connecting to e.g. 192.168.1.14:9999 from the smartphone's browser) it doesn't load anything returning ERR_CONNECTION_TIMED_OUT error from the browser .
Doing the same exact steps for another project that doesn't use create-react-app works fine for all devices connected to the same wifi network accessing the laptop's ip address (e.g connecting to e.g. 192.168.1.14:9999 from the smartphone's browser).
Simply run HOST=0.0.0.0 npm run start.
Afterwards open the url from another device on the network.
In your case, 192.168.1.14:9999 would work.
Documentation for setting HOST environment variables.