Live Reload doesn't work - angularjs

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.

Related

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

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

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.

How to use aws Lightsail for my react build

I'm trying to use lightsail to host a website.
It almost works fine but I have to write example.com:5000 but I don't know what to do to remove this :5000.
I used npm run build to create a file and I use pm2 to serve it automatically on this port.
Since you're using PM2 to serve the react application, you can serve it directly in port 80 by doing the following:
Connect to your server (Note: Only root can bind ports which are less than 1024 so that's why we're going to use authbind which allow this port binding for non-root users)
Bind the 80 port using authbind by executing the following commands:
sudo apt-get install authbind Install the authbind package
sudo touch /etc/authbind/byport/80 Create a "binding file" to bind port 80
sudo chown YOUR-USER /etc/authbind/byport/80 Make your user the owner of this file (make sure to replace YOUR-USER with your username)
chmod 755 /etc/authbind/byport/80 Set the access right for this file
Start the app by using authbind --deep pm2
You can view more information about these steps via the official PM2 documentation: https://pm2.keymetrics.io/docs/usage/specifics/
Also, if you're just serving a React application, you can use S3 to host it since it's pretty cheap and you gives you advantages such as CDN and other features. If you're doing that just make sure to enable CORS in your S3 bucket.

Apache disabling mpm_prefork error: The following modules depend on mpm_prefork and need to be disabled first: php7.3

I have a 8GB droplet on digitalocean. We launched our site today and we got intense traffic, we have about 3000 concurrent users.
I tried to raise the amount of concurrent connections (with the advice of apache2buddy) but the suggested MaxRequestWorkers to be 482. Here is the file:
<IfModule mpm_prefork_module>
ServerLimit 482
StartServers 5
MinSpareServers 5
MaxSpareServers 10
MaxRequestWorkers 482
MaxConnectionsPerChild 0
</IfModule>
Apache2 uses mdm_prefork and we have read that it's better if we use mdm_worker.
So i tried to disable mdm_prefork, so that I can enable mdm_worker:
a2dismod mpm_prefork
And I got the following error:
ERROR: The following modules depend on mpm_prefork and need to be disabled first: php7.3
What do I have to do to enable mpm_worker?
I found the possible solution to resolve this on my ubuntu server, dont know whether you are running ubuntu as well on your side, but I feel that the steps that I have taken will be the same for almost all distros with change in 1 step where you need to install a new package and the command for that may change based on the distro that you are using.
so the first step is
$ sudo a2dismod php7.3 mpm_prefork
This will disable the prefork module but before that it will disable the php7.3 module to stop the dependency error from occurring.
Next, we enable the worker module
$ sudo a2enmod mpm_worker
Now, the output would suggest that you restart the apache web-server. So, we do the same
$ sudo systemctl restart apache2
Now, if you go to check your website homepage, it may either throw an error or may load a blank page.
So, how do we resolve that; I scoured multiple community forums and found a solution related to the same but it was for freebsd platform so tried the same on ubuntu with some tweaks required to be made on ubuntu side for the steps to work.
The Solution based on ubuntu OS :
First of all, we enable the proxy, proxy_fcgi and setenvif module followed with a php-fpm package installation corresponding to your php version
$ sudo a2enmod proxy
$ sudo a2enmod proxy_fcgi
$ sudo a2enmod setenvif
$ sudo apt-get install php7.3-fpm -y
the php7.3-fpm installation command is the one where you may need to check the installation steps based on the Distro you are using.
Once, php-fpm service is installed you need to make sure that it gets enabled and then start it, so for that
$ sudo a2enconf php7.3-fpm
$ sudo systemctl enable php7.3-fpm.service
$ sudo systemctl start php7.3-fpm.service
Once, the php-fpm service starts successfully, just restart apache service to make sure all the made changes take effect properly
$ sudo systemctl restart apache2
After these steps are taken, please check/refresh your website homepage and the error page or the blank page will change to the proper website page.
The End-Result; your website has shifted from using prefork module to worker module to handle requests.
Also, if you want to switch to event module instead of worker module; just enable event module in place of worker module in the second step; the one that you will take after disabling php7.3 and prefork module
replace
$ sudo a2enmod mpm_worker
with
$ sudo a2enmod mpm_event
rest all steps after that remain the same irrespective of enabling worker or event module.
These steps helped me switch from prefork module to worker module on my server so hoping it may help you as well as help others who stumble on this issue.

Changing my project files doesn't change files inside the Docker machine

I'm trying to use Docker to improve my workflow. I installed "Docker Toolbox for Windows" on my Windows 10 home edition (since Docker supposedly only work on professional). I'm using mgexhev's angular-seed which claim to provide full docker support. There is a docker-compose.yml file which links a ./.docker/angular-seed.development.dockerfile.
After git cloning the seed project I can start it by running the commands given on the seed project's github page. So I can see the app after running:
$ docker-compose build
$ docker-compose up -d
But when I change code with Visual Studio Code and save the livereload doesn't work. The only way I can see my changes is by re-running the build and up commands (which re-runs npm install; 5min).
In Docker's documentation they say to "Mount a host directory as a data volume" in order to be able to "change the source code and see its effect on the application in real time"
docker run -v //c/<path>:/<container path>
But I'm not sure this is right when I'm using docker-compose? I have also tried running:
docker run -d -P --name web -v //c/Users/k/dev/:/home/app/ angular-seed
docker run -p 5555:5555 -v //c/Users/k/dev/:/home/app/ -w "/home/app/" angular-seed
docker run -p 5555:5555 -v $(pwd):/home/app/ -w "/home/app/" angular-seed
and lots of similar commands but nothing seems to work.
I tried moving my project from C:/dev/project to home because I read somewhere that there might be some access right issues not using the "home" directory, but this made no difference.
I'm also a bit confused that the instructions say visit localhost:5555. I have to go to dockerIP:5555 to see the app (in case this help anyone understand why my code doesn't update inside of my docker container).
Surely my changes should move in to the docker environment automatically or docker is not very useful for development :)
Looking at the docker-compose.yml you've linked to, I don't see any volume entry. Without that, there's no connection possible between the files on your host and the files inside the container. You'll need a docker-compose.yml that includes a volume entry, like:
version: '2'
services:
angular-seed:
build:
context: .
dockerfile: ./.docker/angular-seed.development.dockerfile
command: npm start
container_name: angular-seed-start
image: angular-seed
networks:
- dev-network
ports:
- '5555:5555'
volumes:
- .:/home/app/angular-seed
networks:
dev-network:
driver: bridge
Docker-machine runs docker inside of a virtual box VM. By default, I believe c:\Users is shared into the VM, but you'll need to check the virtual box settings to confirm this. Any host directories you try to map into the container are mapped from the VM, so if your folder is not shared into that VM, your files won't be included.
With the IP, localhost works on Linux hosts and newer versions of docker for windows/mac. Older docker-machine based installs need to use the IP of the virtual box VM.

Resources