Table Of Contents
* 1. Firebase Hosting
* 2. Github Pages
* 3. Netlify
* 4. Heroku
* 5. Now
* 6. Surge
* 7. AWS S3
* 8. Roast
* Conclusion
Useful solutions for deploying and hosting your React applications in After working in your development environment and playing around with localhost, you most likely would need to build out your react application to become production ready and deploy it for everyone to experience the react goodness in their local machines too. In this article, we would look at a number of options to developers quickly pick from to deploy their react applications.
Useful tip: Bit helps your team collaborate on shared components. Each component can be independently developed, tested and used across your apps. Bit handles the entire lifecycle of each shared component so you can focus on building great apps.
Share reusable code components as a team · Bit
Easily share reusable components between projects and applications to build faster as a team. Collaborate to develop…
bit.dev
1. Firebase Hosting
Firebase Hosting is part of the many services Google’s firebase offers like authentication, storage, cloud functions and even database. This is basically a static site hosting that would be perfect for any frontend react application, it also supports SSL, CDN and custom domains.
To use firebase hosting:
§ Ensure you have a google account
§ Login to Firebase Console
§ Create a project
§ Navigate to the hosting tab and click get started.
After this, you proceed to install firebase cli on your terminal with this line of command:
npm install -g firebase-tools
This would install firebase tools globally and you can now deploy using these commands sequentially in your terminal:
// cd to your project folder
firebase init firebase deploy
Firebase would deploy your application to yourProjectName.firebaseapp.com
Github Pages
React applications by default when you build out for production gives you github pages as a great deployment option. Github pages is a deployment service by github that builds and deploys your react application straight from the application repository with a smooth git integration, it is such a breeze to use. When you run:
yarn build
React builds out your application for production and afterward shows you a suggestion if you choose to use github pages. Copy the homepage description given, it would look like this:
“homepage” : “https://yourgithubname.github.io/yourreponame",
Add it to your package.json file, then re-run the build command:
yarn build
Go to the package.json and add a new line under scripts
“deploy”: “gh-pages -d build”
Then deploy with oneline of command:
npm run deploy
Open the homepage on your browser and see the react application is live.Netlify
Deploying with Netlify is one of the the trendiest ways to put your react application out in the universe. Netlify provides a very stress-free and easy-to-use interface where you literally just click and select options and configure deployments and build your app from a development environment from a repository like github, you can even test deploys and also get support for A/B testing from the same user interface.
To get started:
§ create a netlify account
§ login to the created account
§ click new site from git on the top right corner.
§ choose github (if that’s where your project is)
§ follow the prompt to add navigation and test deploy
§ hit deploy site button
This can be achieved manually too in your terminal with a few commands
npm install netlify-cli -g netlify deploy
And you would have a netlify.com project deployed successfully.Heroku
Heroku, an industry leading cloud-platform-as-a-service that handles a number of cloud based operations which includes building, managing and deployment of applications is a great place to start deploying your react application. If you wish to use create-react-app to build out your react application, here is an easy way to deploy it on heroku:
§ create a heroku account
§ login to the created account
You can now open your terminal and run the following commands below:
npm install -g create-react-app
create-react-app my-app
cd my-app
git init
heroku create -b https://github.com/mars/create-react-app-buildpack.git
git add .
git commit -m "react-create-app on Heroku"
git push heroku master
heroku open
After this, you have successfully deployed your react application, check your dashboard for the application link.Now
Ziet’s Now is a revolutionary serverless deployment service for various kinds of applications including react applications all the way to node applications. It provides a very robust support for the CLI also and it is smoothly integrated with github. To get started:
§ install now desktop here (it ships with the cli tool)
alternatively use npm:
npm install -g now
§ Create a new account on now
§ Login with the newly created account.
To deploy a react application, navigate to the root folder of your built project and run the now command in the terminal:
now --name your-project-name
A now.json file should appear in the root folder looking like this:
{
"version": 1,
"type": "static",
"static": {
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Follow the prompt and you will successfully deploy your application.Surge
Surge is a very popular hosting service for static applications like react applications tastefully targeted at frontend web developers. The free plan supports custom domains, making it a really great option for deploying react applications. To get started:
§ install surge using npm
npm install -g surge
§ build out your react application
cd your-react-project npm run build
§ navigate to build folder
cd build
§ run surge
surge
Follow the prompt and you will be given a surge url where your react application is live at.AWS S3
Amazon web services has a suite of cloud services to support every single part of software development cycle. They have a couple of services for deployment of web applications and S3 is one of the less complicated one to use. It is often said that a lot of amazon web services sacrificed simplicity of getting started for flexibility of usage. There is however a cli tool built by a community member for easily deploying your react application to the amazon s3 service called s3cmd. To get started:
§ sign up to aws services
§ login to the created account
§ open an s3 bucket according to your preferable data point/center
§ Download s3cmd here
Note: Amazon web services has an AWS CLI tool but we are using the s3cmd tool in this article
Alternatively, if you have homebrew, you can install with this line of command:
brew install s3cmd
You need the access keys of the bucket for the next step. To get the keys lookup this guide.
When you have gotten the keys, run this line of command to use them:
s3cmd --configure
when prompted, paste in the keys you already got. We go ahead to list all our buckets with this command:
s3cmd ls
Now let us build out ur react application
yarn build
To synchronise the build folder with our s3 bucket, we run this:
s3cmd sync LOCAL_DIR s3://BUCKET[/PREFIX]
And your react application would be automatically deployed to your s3 bucket successfully. After making any changes, just re-run the following commands:
yarn builds3cmd sync build/* s3://reactApp
To make it even a little easier, you can add these commands to your package.json file so that you can run it all like a yarn command
"build-deploy":"yarn build && s3cmd sync build/* s3://reactApp && echo 'Deployed Successfully' "Roast
Roast is a content delivery network static web host you can use to deploy your react applications. It is built with speed and simplicity in mind with provisions for https and full-page server-side render. To get started:
§ Create an account on roast here
§ login with your new account.
§ Install the Roast CLI tool
npm install -g roast
Then build out your react application:
yarn build
Add a _redirects file. See a guide here. When that is done, you can deploy your react application by running a line of command:
roast deploy
You would see your react application live with a roast url.
Conclusion
In this article we took a good look at some easy options react developers should know they have when it comes to deployment of their react applications. You can finally just take that new step of stepping out of the localhost comfort zone and deploy your application for the world to see too. Happy Coding! 👏
Top comments (0)