How to deploy React app in vercel
If you know the basics of reactjs it will be very easy for us to deploy any react app in vercel. Vercel is the most useful platform for front-end developers, providing the speed and reliability innovators need to create at the moment of inspiration. it is easy to use as compared to others.
Step 1: Create an account with vercel. after signup with google go to the dashboard
go to Add new > Project> Browse All Templates → Create React App
Step 2: signup with GitHub/GitLab/ BitBucket
Choose the repository name and create. Your first React app deploys it to the vercel platform….
How to deploy local react app to vercel
first clone the react deploy app which is in your GitHub repo
use command
git clone “repo link”
customize the react app and install all the packages which are required in your app link react-router-dom for routing.
you see the file structure link given below
Here we see the new file which is most important in vercel-react-app which is the pnpm-lock.yaml file. previous when we create react app using the npx create-react-app we see that there is no .yaml file but when we create react app using vercel platform we see that it will create that file. it is basically for the production file.
when we push to code in GitHub after customizing we will see your app is running successfully
The Error occurred when deploying local react app deploy to the vercel platform because in that app there is no .yaml file you have to add that file manually. when you add that .yaml file manually and install all the dependencies using npm we see that there is no change in .ymal file and when you try to deploy in vercel platform we see that kind of error
ERR_PNPM_OUTDATED_LOCKFILE Cannot install with “frozen-lockfile” because pnpm-lock.yaml is not up to date with package.json
it is one of the most command problem developer faces when they try to deploy.
for solving that problem You have to install the pnpm using
npm install -g pnpm
and delete the node modules folder and install using
pnpm i
and push in GitHub we will see the error has gone and you deploy your local l react app successfully.
