Tom Preston-Werner - Full Stack Radio 138
|I - Redwood Philosophies||Part 1 - Setup|
|II - Full Stack React||Part 2 - Routes|
|III - Jamstack||Part 3 - Prisma|
|IV - Serverless||Part 4 - CRUD|
|Part 5 - Contact|
|Part 6 - GraphQL|
|Part 7 - Deploy|
|Part 8 - Auth|
In this penultimate part we will:
- Deploy our frontend application with Serverless functions on Netlify
- Deploy our backend to a hosted Postgres database on Heroku
First you will need a GitHub repo with your Redwood project. Mine is here. It contains branches that match up with the state of the project at the end of each of the first six parts. The default branch is part7 and will be the branch we deploy.
yarn rw g deploy netlify
This creates a file at
/netlify.toml containing the commands and file paths that Netlify needs to know about to build a Redwood app.
Next you'll need an account on Netlify.
New site from Git to create a new site from git.
You can also use GitLab or Bitbucket.
Enter the name of your repo into the search bar.
Select the repo.
It selects the default branch to deploy.
The build command may be entered by default.
If the build command is blank enter the following:
yarn rw build && yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up
Deploy site to deploy the site.
If we go to the
Deploys section we can see more information about the build.
Your build should take at least a minute or more, so don't freak out if it doesn't work immediately.
Our deploy took 2 minutes and 15 seconds and we can also see a summary of the deploy.
We haven't really deployed the site though, because right now we just have the frontend deployed to Netlify. But we haven't done anything with our database so we should expect an error:
To get our database online we'll need to set up another account and project on Heroku.
If this is your first project you can click the
Create new app button in the middle to create a new app or you can click the
New button on the top right.
We'll give the app the same name as the Github repo.
Now we have a dashboard for our project much like we did in Netlify.
Lets take a look at our
Resources tab so we can provision our database.
Find more add-ons to find more add-ons.
There are many add-ons. We only need one, Heroku Postgres. Why Postgres? Because Postgres is the best database; there is no other database.
Install Heroku Postgres to install Heroku Postgres.
You can select your add-on plan, we'll be using the free option.
Enter the name of your heroku app and it should appear in the autocomplete.
Select your project and click
Provision add-on to provision the add-on.
Now our database is installed.
Lets go to the
Settings tab so we can connect this database to our frontend. Click
Reveal Config Vars to reveal the config variables.
We can see a key/value pair for the database URL, normally it wouldn't be wise to share environment variables online, but this project is purely explanatory and won't be holding any sensitive data.
Select the value and copy it to your clipboard. We'll be using this back in our Netlify project.
Deploy settings to go to your deploy settings.
Build & deploy select
Edit variables button to edit the variables.
We're going to use the key/value pair from our Heroku Postgres app.
DATABASE_URL for the key.
Then paste the value.
At the end of the value add
?connection_limit=1. This makes sure that each AWS Lambda only opens one database connection.
We'll create one more variable.
It will be called
BINARY_TARGET with the value
This is a setting for Prisma which needs to know how to generate the client libraries to access the database. Usually it can auto detect that. However, in this case the libraries that are being built on Netlify are running on Ubuntu.
The API deployed to AWS Lambda is running a flavor of RedHat Enterprise Linux. We need to let Prisma know to build for RedHat and not for Ubuntu.
If we go back to our code in
schema.prisma we can see that we set our datasource to the environment variable
DATABASE_URL and our client to
And then Prisma looks up our local environment file. We override these once you deploy to Netlify.
Trigger deploy button to trigger a deploy and select
Deploy site to deploy the site.
You will now receive a great series of logs.
The logs will detail the build process.
Do not concern yourself with the logs.
Let the logs wash over you and through you.
Raft is a bunch of logs that get you off Paxos island.
Now let's go back to our site.
Lets create a new post.
NEW POST button to make a new post. Enter a title and body.
Save the new post.
Lets try to edit our new post.
Save your edit to the post.
It looks like it's working. Lets check the front page to make sure it's really working.
In the next and final part we'll add authentication to our application, something that has never confused any developer ever.