DEV Community

Cover image for Deploying CRA to Vercel
obiabo Immanuel
obiabo Immanuel

Posted on

Deploying CRA to Vercel

Have you ever faced the issue of deploying CRA ( Create react app ) to vercel ?

yeap i do , i faced this issue for 3 days

How frustrating it is to deploy your app and the next thing you see is deployment error

frusrar.jpg

its too painful and frustrating seeing deployment error , when you really need push your app to production

HOW VERCEL TREATS CRA

Vercel sees all CRA warnings and treats them as error , because process.env.CI = true

take a look at this frustrating photo below

ver.png

i get pissed of and very angry and feel like braking my laptop screen , and i know you felt the same way too , no one likes errors

Don't panic , this is the end of it

103238786-idea-face-with-a-lightbulb-business-start-up-flat-design-vector-illustration-.jpg

be happy cause today you will put a stop to that

STEPS :

go to vercel
now import your CRA app from your github repo you wanna connect
now you will be taking to the deployment page

ob.png

now click on SELECT to select the account you want
you will be taking to the main deployemt screen

screen.png

now if we click on deploy it will give us some errors and result in deployment failed , cause my code has many warnings from CRA

LETS PASS THE WARNINGS AND ERRORS AND DEPLOY OUR APP

now lets deploy our app even with lots of errors from CRA

NOW TO DO THAT

now when you are in the main deployment screen
click on the build and Output Settings to open expand the other options
now in the build command input box where you see npm run build or react-scripts build
*now click the override button to toggle it on
*now you will be given the access to write in the field
*now inside the text field write CI= npm run build

ova.png

*now click on deploy , to start the deploy process
* now wait for the deployment process to finish

sup.jpeg

Boom our site is ready

Top comments (0)