By the end of this level you will have a React website that is available on the internet
To deploy our applications we need to find a service that allows us to deploy both the frontend and the backend side of the applications. The following three services all have a free/trial tier that allows one to set up a tiny applications online. However each of them has some limitation on their free tier, hence neither of them can be considered better than the other. Here is a small table of the pros and cons of the free tier offering and you should pick one based on your preference:
| Name | Pros | Cons |
|---|---|---|
| Render | Very easy to set up Supports GitHub integration Supports GitHub Pull Request Snapshots |
Free Tier backend shuts down after inactivity and is slow to restart Free database only available for 3 months |
| Netlify | Very easy to set up, except for the database Doesn't shut down during inactive periods Supports GitHub integration Supports GitHub Pull Request Snapshots |
No built-in database support, so it needs an external service for that Connectivity to external database is slow |
| Fly.io | Everything is included in one service No time limit on database Quick recovery speed after inactivity |
Most complex of the three to set up GitHub integration is manual No Pull Request Snapshots |
If you cannot pick from the above ones, some guidance:
- For the Full Stack Assessment choosing Render is likely a good option, as it's the easiest to set up
- If you want to use this template for future projects Netlify or Fly.io might be better options as they don't have as many time limitations on their free/trial tier
Once you pick an option please scroll down to the relevant provider and follow the guides.
We will be using Render to deploy your application. If you haven't done so yet first make sure to Connect your GitHub account to Render
This repository already has a Render blueprint available that will set up the backend, frontend and database components. This file is called render.yaml and you can find it in the root directory. To use this, after logging in the Render click the New + button, then select Blueprint from the list.
Once selected you should find your project in the list below. Click Connect, then fill in the next page, and finally click Apply. Once that's you need to wait for the system to create your app, after which it will go live.
Render will link to your GitHub account and will automatically update the deployed application whenever you merge your PRs to the main branch. For every PR, it will also generate a snapshot of that build so you can verify if your PR is actually working before merging.
Occasionally automated deployments (including the first one) might fail or get stuck. One way to try to unstuck them is to force a new manual deployment. To do that go to your render Dashboard, select the video-recommendation Web Service, then click Manual Deploy, and select Deploy latest commit. This will retry the deployment from start. You will also be able to check the logs of the deployment and see if there are any issues.
We will be using Netlify to deploy your application. If you haven't done so yet first make sure to Sign up to Netlify using GitHub
This repository already has a Netlify blueprint available that will set up both the backend and the frontend components. This file is called netlify.toml and you can find it in the root directory. This file will be picked up automatically when you import your project, so you won't need to set up things like the "Build command" or "Publish directory" values.
Netlify will link to your GitHub account and will automatically update the deployed application whenever you merge your PRs to the main branch. For every PR, it will also generate a snapshot of that build so you can verify if your PR is actually working before merging.
We will be using Fly.io to deploy your application. Fly.io is a cloud provider allowing you to run docker containers on virtual machines. They also provide a couple of tools to help you deploy applications, for example tools to automatically make applications compatible with Docker. They have a free tier available that allows you to run two machines - one machine will host the database, the other the monorepo, e.g. both the frontend and the backend.
Fly.io relies on a command line utility to launch and deploy applications. You need to download and install it. You can find installation instructions here: https://fly.io/docs/hands-on/install-flyctl/
After installing you might need to close your terminal and reopen it to be able to access flyctl
To sign up for a fly.io account go to their sign up page at https://fly.io/app/sign-up Make sure you register using the "Sign up using GitHub", as otherwise you won't get added to the Trial package!
Once signed up you need to log in locally. Type in the following on your terminal then follow the instructions:
flyctl auth login
Once signed up you can now launch your application. Go to the root of your project and type
flyctl launch
Once you enter this command it will provide you with a prompt like the following:
We're about to launch your NodeJS app on Fly.io. Here's what you're getting:
Organization: [email protected] (fly launch defaults to the personal org)
Name: full-stack-project-assessment (derived from your directory name)
Region: Amsterdam, Netherlands (this is the fastest region for you)
App Machines: shared-cpu-1x, 1GB RAM (most apps need about 1GB of RAM)
Postgres: <none> (not requested)
Redis: <none> (not requested)
? Do you want to tweak these settings before proceeding? (y/N)
Make sure you enter Y on the prompt as the default settings are not going to use the free tier!
Once you enter Y and press enter you will be redirected to a website where you need to fill in the details as follows:
- Name: Use
YOURNAME-videorec, examplejohn-smith-videorec - Region: Pick
lhr - London. - VM size: Pick
shared-cpu-1x. Anything else is not included in the free tier! - VM memory: Pick
256Mb. Anything else is not included in the free tier! - Database:
Fly Postgres - DB Name:
YOURNAME-videorec-db, example:john-smith-videorec-db - Configuration:
Development - Single Node. Anything else here is not included in the free tier! - Redis:
None
Once you fill in the details click "Confirm Settings"
This will set up your database and a machine for running your backend. If everything is successful you should get something like:
Now: run 'flyctl deploy' to deploy your Node app.
Once everything is in order you can see that new files have been added by fly launch to your repository. These include a Dockerfile and a fly settings file called fly.toml. Make sure you commit both into your git repository, they will be needed during further deployments!
Finally you are now ready for deployment:
flyctl deploy
This command will send your current repository to fly, build a docker image of your code then deploy that image to the Fly.io infrastructure.
Note: if you are on the Trial Tier the deployer will return an error message saying it could only deploy your app to one machine instead of two because of the Trial Tier limitations:
Creating a second machine to increase service availability
Error: error creating a new machine: failed to launch VM: To create more than 1 machine per app please add a payment method.
This is okay, as one machine is enough for our deployment. Actually if you are not on the Trial Tier, then the deployer will create two machines. If you don't wish to pay for both then you can decrease them to a single one by using the following command:
flyctl scale count 1
If everything else goes well (as mentioned the error message above can be ignored) your application will be available on
https://YOURNAME-videorec.fly.dev
Make sure to check that it works as expected!
Note that fly.io doesn't have access to your GitHub account so it will not deploy your application whenever it changes. Either you need to run fly deploy from your computer every time you want to push a change, or you need to set up GitHub to do this for you.
In order to do this there are two steps: You need to give GitHub access to your fly.io account, and then also need to set up a workflow that runs the deploy command every time you push changes to the main branch.
For the first one you need to run the following command:
flyctl tokens create deploy -x 999999h
This will create a token that can be used by flyctl to run deployments. Make sure you save the result as you will need it later. It looks like a very-very long string starting with something like FlyV1 fm2_lJPECAAAAAAAA....
Next go to your GitHub repository on GitHub, and click Settings. On the left hand side scroll down to "Secrets and variables" and select "Actions". One the page that shows up scroll down to "Repository secrets", and click "New repository secret"
Set the Name to FLY_API_TOKEN and the value to the full results of the previous call.
Now you have given GitHub access to your fly.io account. You also need to let GitHub know that you want to run a deployment every time your main branch changes. We have prepared a GitHub workflow for you in the .github/workflows/fly-deploy.yml file. Open it up and uncomment the line starting with main. Once you commit this file and push it to your main branch, GitHub will automatically run flyctl deploy against whatever is in your directory.