Deploy React app for free
--
Yes, you can deploy or host your React Application for free. You just need to set up your React application locally & push it on GitHub/Gitlab/Bitbucket. It’s completely your choice which code repository system you want to use.
We will use the Vercel application in this tutorial. Vercel provides you with free/paid services. below are a few Vercel free service benefits:
- Deploy from CLI or personal git integrations
2. Built-in CI/CD
3. Automatic HTTPS/SSL
4. Previews for every git push
Step 1:
Create React app on your local & push it on Github/Gitlab/Bitbucket.
If you are new to React then follow this documentation to create react app & add your code to Git.
Step 2:
Signup/login to Vercel, I suggest you log in/signup using Github/Gitlab/Bitbucket where your code is already present.
Step 3:
Once you are logged in you will see the dashboard screen, click on the New Project button.
Step 4:
Once you land on the Create project screen you will see a similar interface, click on the Add Github Account.
Step 5:
Next, you will be redirected to the Github/Gitlab/Bitbucket depending on which code repository system you have selected. select Only select repositories option & choose to react application repository & click on install.
Step 6:
Once you complete the previous step you will see your repository name on the dashboard. Click on import, This will import your source code to Vercel app from your code repository system
Step 7:
Once your code is imported you will be redirected to this page. Here you can configure the project name/directory & other options. If you wish you can change the details otherwise click on Deploy.
Step 8:
Once you click on the Deploy, deployment will automatically start. this will run the react build command. Once the build is done you will see the URL to access your application.
Some users might get the build fail error due to some code errors but commonly we get the below error while building.
So the hack to this error is to add one line in your packege.json. In the build section, you will have to add CI=false in the build command.
Example:
“scripts”: {
“start”: “react-scripts start”,
“build”: “CI=false && react-scripts build”,
“build:production”: “env-cmd -f .env.staging react-scripts build”,
}
Once you are done with this change save & commit this file and repeat Steps 6 to 8.
Once done you will see the below screen.
Click on Go to Dashboard.
Step 9:
On this page, you will see your deployed application URL. You can navigate to your application & see the deployed application.
On this page, you can explore other options like build logs/add custom domain & etc.
Hope you reached this step & can see your application deployed for free.
If I missed any step or anyone facing any error then feel free to comment here I am actively replying to the queries.
Thanks & happy coding.
Heads Up: I am working on one of the cool Chrome extensions which helps to format your code easily & it’s superfast It can format your code within milliseconds. on top of it, it’s completely free for use. So go & hit that Add to Chrome Button. https://chrome.google.com/webstore/detail/code-formatter/njpgcnaadikbannefjibknjopmogeidm
