Today on 07.11.2018 we have started a new company and it’s a web studio called CodeConcept. We are a team of three: team lead, project manager and designer and we have 100 days from now in order to create a working company.
Every time when you develop something and want to go to live the question arises: where to deploy your application? Even if you just start you wan’t pay for the server, HTTPS or deploy you app throw FTP. In this article we will build simple React application with create-react-app and configure deployment to Firebase, Surge and Netlify.
Before we start let’s tale a look at the services we will work with:
- Firebase is a comprehensive mobile development platform and part of it takes hosting for web apps. Free plan comes with 1GB storage, transferring 10 GB/month.
- Surge is a platform for static web publishing. Free plan comes with unlimited deployment count and without a limit on traffic.
- Netlify is a platform for build, deploy, and manage modern web projects. They have the only free plan for hosting and offer a couple of add-ons for your site.
Points of content:
- We will generate a new application with create-react-app. It’s an official facebook CLI for building react application. You can skip this step if already have an app that wants to deploy.
- Setup Gitlab CI for automating deployments.
- Create a new project in Firebase console and configure deployment process.
- Create a new project in Surge and configure deployment process.
- Create a new project in Netlify and configure deployment process.
1. Create new application
Go ahead and start with create new app with create-react-app. If you haven’t it, install with a single command:
npm install -g create-react-app
Then you can run :
create-react-app my-app cd my-app
Now we have the brand new application and can start with setup deployment.
2. Gitlab CI
3 . Firebase
First you need to create a new project in Firebase console:
After you create it, install firebase CLI:
npm install -g firebase-tools
Once you’ve installed the Firebase CLI, sign in using your Google account:
Then in project folder init firebase config:
This command will create a firebase.json file with rules for deployment.
Public property tells which folder needs to be deployed. It should contain index.html file as the entry point of hosted application. And now you can make your first deployment with next command:
CLI after deployment will provide the URL with which you can access your app. All details about deployment and connect your personal domain you can in a Hosting tab.
In first we need to install surge CLI that will handle all authorization and deployment process:
npm install -global surge
Then go to your
public folder and run:
For the first time, this command will prompt you to login or create a new account, ask a folder to deploy and witch domain use. By default, Surge will prompt you for a domain each time you deploy. To skip this, you can pass it into the CLI when you run the
surge command. For example, if your subdomain was
vancouver.surge.sh, you could run the following command:
surge --domain vancouver.surge.sh
For adding a custom domain or any other setting you can go to Surge Help.
First of all you need to create a new account on netlify.com. Chose gitlab as a login option to be able to configure CI for you repository. Even if you use github or bitbucket instead go ahead and choose them.
Right after you login click on New site from Git to setup new deployment:
Then you will see screen with option to choose Git provider for new application. You always can connect new provider from this screen if you login with another.
In second step you should choose repository with witch you will start. Don’t worry if you use GitHub and want to use private repository, Netlify can do this and it’s still free.
Now let’s configure our deployment process. In the third step you can choose deployment branch, build command and publish directory.
Even if you what to configure several development environments Netlify can help you with this.
There are three predefined deploy contexts:
production: this context corresponds to the main site’s deployment, attached to the Git branch you set when the site is created.
deploy-preview: this context corresponds to the previews we build for Pull Requests and Merge Requests integrations.
branch-deploy: this context corresponds to deploys from branches that are not the site’s main production branch.
After all click on magic Deploy button and you site will go to live. After success deployment you will be able to add custom domain and HTTPS protection.