3 ways to host your frontend app with CI and HTTPS for free

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:

  1. 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.
  2. Surge is a platform for static web publishing. Free plan comes with unlimited deployment count and without a limit on traffic.
  3. 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:

  1. 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.
  2. Setup Gitlab CI for automating deployments.
  3. Create a new project in Firebase console and configure deployment process.
  4. Create a new project in Surge and configure deployment process.
  5. 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:

Firebase add project

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:

firebase login

Then in project folder init firebase config:

firebase init

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:

firebase deploy

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.


4. Surge

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:

surge

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.


5. Netlify

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.

To to this create a netlify.toml file in at the root of the project. You can see all examples and configuration options in Deploy Contexts page.

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.


Conclusion