How to deploy React/Laravel project?

Viewed 11939

I use Laravel framework as Restful API server, and React as SPA client render and for routing i have used react create app kit, I build React project. I get app.js and app.css files by type npm run build.

  1. How to use this file with Laravel?
  2. How use react routing?
  3. How to deploy it correctly?
3 Answers

Please find the steps to run app in your local machine

Step 1:

Download the code from git

Step 2:

Composer install

Step 3:

Npm install

Please do following steps if you face - cross-env NODE_ENV=development webpack --progress --hide-modules --

You need to make cross-env working globally instead of having it in the project.

1) remove node_modules folder

2) run npm install --global cross-env

3) remove "cross-env": "^5.0.1", from package.json file devDependencies section. Actually, you can skip this step and keep package.json intact. If you prefer.

4) run npm install --no-bin-links

5) run npm run dev

Laravel 5.4 ‘cross-env’ Is Not Recognized as an Internal or External Command

Step 4:

Npm run dev

Step 5: Php artisan serve

we can simplify our task by this bash script.ssh

#!/bin/bash
#install updates
sudo  apt-get update
sudo  apt-get upgrade
#install nginx
sudo apt-get install nginx
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash
#install nodejs
sudo apt-get install -y nodejs
#status of install ndoe and nginx
node -v
sudo service nginx status
#clone repo of project in server
git clone https://github.com/your_new_project.git
cd your_new_project
npm run build 
#(first time,it downlod lib,and files )
npm run build  
#(second time,he build and run it)
cd build/
ls
ls static/
#now tell nginx server (listen :80/ root :path of build folder/ location :index.html)   

Create a project file

sudo nano /etc/nginx/sites-available/react_counter

server {
   server_name your_IP domain.com www.domain.com;
   root /home/username/React-counter-app/build;
   index index.html index.htm;
   location / {
   try_files $uri /index.html =404;
   }
}

server_name put your IP address root we use this to give the server the application located in the disk index The main file

Enable the file by linking to the sites-enabled dir

sudo ln -s /etc/nginx/sites-available/react_counter /etc/nginx/sites-enabled

Test NGINX config

$ sudo nginx -t

Restart Nginx Server

$ sudo systemctl restart nginx

Open your browser and go to http://youripaddress

Thanks for reading. @syedasadrazadevops

Related