what is the best way to deploy react app in lan only - reactjs

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.

Related

Start React app using domain instead of localhost

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

React on remote server

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.

Sharing web app (spring + react) in local network

I'd like to run in my local network ubuntu server. I have installed ubuntu on my old computer which is connected to router via ethernet cable.
The goal is to share gitlab repository where my code (java-spring, react) should be build automatically after making changes in git repo (maybe by Jenkins?) and deployed on this server. These apps I'd like to test on other computer/share this apps with my homemates.
Not much to go on in your question but here's a starting point:
Router
In your router, set up a static IP address for your ubuntu box. If you wanted it to be accessible outside your LAN, this is where you'd configure port forwarding.
Server
You don't actually need gitlab for this, you could do it all by installing git directly on to your server. You can never have enough practice with git.
You'll need a web server on your Ubuntu box, probably Apache or Nginx (or similar).
Here's good instructions for Nginx (my personal preference):
https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-18-04
You'll use that to serve the directory where Jenkins or (or whatever tool) puts your built code after the git hook triggers the build.

How to specify a port number in a create-react-app based project in production?

I am deploying a website that will have a few react projects that were built with create-react-app. Each project will be on its own webpage: e.g.: mywebsite.com/project1, mywebsite.com/project. I am setting up an nginx reverse proxy on an Ubuntu server (which I understand how to configure), but I am not sure how to specify port numbers for each of my create-react-app projects so that each of them has a unique port. Can anyone shed light on how to do this? Thanks!
PS - I have seen threads such as this one - How to specify a port to run a create-react-app based project?, but I do not see how this solution can be applied in production.
The server you start with npm start command in create-react-app is webpack dev server. It only meant to use while development and you shouldn't use that in a production environment.
Instead, you can easily host a CRA app with a simple static file server which can easily configure with nginx without a reverse proxy or changing the port of dev server. You simply need run npm run build command and deploy content of build folder to the appropriate folder of your static file server. You can read more about this in the documentation of CRA.
Also, make sure that you specify the homepage in your package.json before building the project, since you are going to host your app in a relative path like mywebsite.com/project1. Because CRA assumes your app is hosted at the server root with default settings.
Hope this helps!

Rest service doesn't work in apk file : ionic

In my ionic application rest service doesn't work when i create apk file using below code
adb install -r platforms/android/build/output/apk/android-debug.apk
If i run application in browser:
ionic serve
then its work file
If I run application in mobile using below code
ionic run -l
then its work fine..
But once i create apk file and install in mobile then service does't work..
how can solve this problem??
please help
The most probable reason is that you don't have cordova-whitelist plugin. The newer version of cordova/ ionic requires for you to use this plugin
Steps:
Install the plugin
cordova plugin add cordova-plugin-whitelist
Update your config.xml to whitelist the allowed urls:
<allow-navigation href="*" />
Refer https://github.com/apache/cordova-plugin-whitelist for details
The rest web service is hosted locally on a development server or PC and running on a address like e.g. http://localhost:8888. Once compiling to an APK it will also be expecting the service address which obviously is not on the device itself.
Therefore you need to host the REST service locally on a development server or PC using a WIFI enabled network exposing the PC's IIS or Apache (which ever one you are using) or you can use cloud hosting and reference the newly created API address in the app's source before compiling the APK.
This ARTICLE provides a good explanation between the difference of ionic serve and run variances

Resources