3. Deploy your app. Netlify, Firebase, and Heroku
Lesson summary
Hi! This is Oliwia from the LiveChat Developer Program, and
right now you’re watching the Practical Guide to Building LiveChat Apps.
In this episode, we’ll teach you step-by-step how to easily deploy your
production-ready application to an external hosting service.
So for your application to be available publicly, you need to host it
somewhere for users to access. Usually, it’s a service of sorts. So, we
selected three from the most popular hosting services — Netlify, Firebase,
and Heroku. In this video, you’ll see how are they different from each
other and get a better understanding of the solution you might want to
choose for your own app.
So for each of the services we’ll deploy our application to, we selected
the easiest route for the app deployment. So, knowing that, you’ll be
able to determine whether you want to take up on a bigger challenge, or
rather stick with the simplest solution.
If you wish to know even more about possible hosting options, be sure
to have a look at our article that breaks down many different hosting
solutions on the market. We categorized them by possible apps you’re
likely to build, so it’s very easy to navigate and test yourself.
So without further ado, let’s start with the solution we think
is the most simple one — Netlify. Naturally, you need to register your
account prior to deploying your app there.
So, right now, you can see that we’re in the Netlify’s main team view.
Before we deploy our application, we need to create a production build
of the app in our repository file directory. We’ll use a simple
`npm run build` command. With that, we’ll have a production-ready build
that we can deploy directly to Netlify.
Currently, we don’t have any sites created in our Netlify team account,
so let’s create the first one for our app. For that, we’ll use the simple
drag-and-drop option, and we’ll drop our build folder from the repository’s
directory to Netlify deploy field.
Alright! The app has been deployed, and we got the URL to access it
directly. So, for our app to work in the LiveChat Agent App, we’ll
need to modify our Authorization Block in the LiveChat Developer Console
first. And what we need to do here is to add the application’s URL to
our app’s redirect URIs whitelist. We need to do this as without this
step, our app will not be authorized to receive an access token on the
newly deployed URL. And, the last thing we want to do is to update our
Agent App Widgets block to include the new app’s URL. As you may remember,
by far, our app’s been working directly from our local environment, a
localhost. So now, after it’s been deployed to a public hosting, we can
access it externally. So we can freely switch out the localhost from the
widget source URL to our new app’s URL from Netlify.
Alright! And once that’s done, we can check in the LiveChat Agent App
if everything went smoothly. Yep! Looks like everything works perfectly
fine, our app’s authorized.
Okay! That would be all for Netlify — super easy, right? We find Netlify
a brilliant solution for app deployment. And we also use this service
internally, so we can recommend this as a great option to host your
app.
Alright! Firebase is the next solution we’ll teach you how
to use. It requires a bit more steps, but it is still a very simple and
accessible hosting to deploy your application. So before you start,
make sure you register an account with Firebase. In the browser’s
address bar, you’ll see the URL to the Firebase’s console.
So to deploy our app, in this console, we want to create a new project
and name it. Right now, we’re asked if we want to use Google Analytics
— personally, we don’t need that for our application, so we’ll opt out
from this. And now, we need to wait a moment, so Firebase creates the
project for us. Alright! Once that’s done, we can see the overview of
our created project.
For this project, we’ll be using the Firebase CLI. You’ll find information
on how to install this CLI on your desktop in the Firebase’s documentation.
It’s initially either installing this with a simple curl, or you can
do this by npm. We’ll skip this step, as we have already installed this
CLI locally on our machine.
Alright, so in a terminal opened in the repository’s file directory,
similar to Netlify, we will again create a production build using the
`npm run build` command.
So now, we’ll be using the Firebase CLI. And we’ll input the `firebase
login` command to authorize our terminal first. Now the CLI will ask
us if we want to share reporting data. And now, we want to authorize our
application via our Google account, and authorize with Firebase. After
all that’s done, we see the success information.
Next, we want to initialize our Firebase project in the repository we’ve
already opened in the terminal, using the `firebase init` command. Now,
we will have to go through some Firebase configuration. So first, we’re
asked what we want to use the Firebase tool for — we’re interested in
the hosting solution, so we’ll select this option navigating with arrows,
and confirm this by pressing enter.
Next, we’ll have to select if we want to use an existing project or
create a new one for our app. We’ve already prepared a project, so
we’ll select the “existing project” option. And, select our Tag Master
project.
Then, we want to specify a public directory for our project. The public
option is the default one, but note in the case of a React application
like ours, the public directory would be “build”. Next, we’re asked
whether we want to configure our app as a single-page app, which in
our case would be “no”. We’re also asked if we want to set up automatic
deploys with GitHub. This means that in case of automatic changes, the
new Firebase builds would be created. And we’re not interested in that,
so we’ll press “no”. Next, we can separately select if we want to
rewrite 404 and index files. We don’t want to rewrite either of these,
so we’ll select “no” to those questions as well. Alright! And after all
those questions, the Firebase initialization is now complete.
So since we created a production build, authorized the terminal, and
initialized Firebase, we can now deploy our build to the Firebase
project by typing the `firebase deploy` command.
Okay! So that would be all that we’d need to do to deploy our application
through the Firebase CLI. And now, our application is available under
the URL returned through the terminal.
So for our application to work through this URL, we’ll need to perform
the same adjustments as we did in the case of Netlify — add this URL to
the Redirect URIs whitelist and switch our localhost widget source with
the new URL to the app. So let’s do that.
And as you can see here in the LiveChat Agent App, the app works fine
as well. Now it’s fetched from the external URL deployed to Firebase.
Great!
Okay! Now we can move to the last hosting service in this
episode, which is Heroku. The process of deploying the app here is
pretty similar to Firebase. And, we’ll also be using a dedicated CLI
for that.
Alright, so now we’re logged in to our Heroku account, which you’ll
also need to register in. So here, we’ll create a new app, give it a
unique name, and select the Europe region, as that’s where we’re
located.
In the Heroku’s dev center, you’ll find an installation instruction
on how to install the Heroku CLI we mentioned at the beginning. We
already have it installed on our machine as well, so we’ll skip this
step, but note that it is mandatory for you if you don’t yet have
this on your computer.
Now, we can open our terminal, and authenticate it for Heroku to access
using the `heroku login` command. Then, we can log in to Heroku in our
browser. As soon as we’re authenticated, we can initialize the repository
with a `git init` command. Once that’s done, we will connect the CLI
with our repository. So we’ll type a command saying:
`heroku git:remote -a`, and the name of our app we created in
Heroku.
Now, the CLI is connected with our repository! So, unlike other deployments
we did today, for Heroku, we’ll need to create some adjustments in our
application’s code. So let’s go to our code editor and open the
package.json file.
The first thing we need to change is to remove the `HTTPS true` flag.
We do that as this will be processed on Heroku’s side now, and if we’ll
leave it, Heroku will return us with errors. Next, we’ll need to determine
the engines we’re working on, and that would be the node and npm versions.
We need to determine that so our build builds correctly in Heroku. Next
up, we’ll need to prepare a relevant commit and push the changes we’ve
just made.
And as soon as that’s done, we’ll deploy our application by typing the
`git push heroku master` command. Now, all of the files from our
repository will be pushed to the Heroku’s server, which will create a
production build for this application.
Alright! Once that’s done, we see a URL for our deployed application
in Heroku dashboard, as well as in the terminal. And, same as before,
we’ll need to adjust our authorization in the LiveChat Developer Console,
so this URL receives an access token without issues. So we’ll add this
URL to the Redirect URI whitelist and replace this as the Widget source
URL as well. And, as soon as we have that, we can go to the Agent App
to see if our app works fine.
Looks like everything’s A-OK, so that’s brilliant! Another successful
deployment behind us.
Alright, so that would be all for this episode!
We’re hoping that by now, you have a better understanding of app
deployment, and maybe even have an idea of where you should deploy
your very own application. Remember to have a look at the app hosting
article if you want to get an even more in-depth overview of what
options are available for you.
In the next episode, we’ll teach you all you need to know about the
LiveChat app review process and how to make your app the best it
can be.
So, see you soon!