RedwoodJS is an attempt to build a full stack framework for JavaScript and to really deploy it in a serverless way. So that’s one of the primary tenants that we have:

Build it end to end with JavaScript. Deploy it to a serverless environment to give you the advantages of the scale that that can bring as well as the global distribution that that can bring.

Tom Preston-Werner - Full Stack Radio

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

7.1 GitHub Repo

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.

7.2 Netlify

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.

[build]
  command = "yarn rw build && yarn rw db up --no-db-client --auto-approve && yarn rw dataMigrate up"
  publish = "web/dist"
  functions = "api/dist/functions"

[dev]
  command = "yarn rw dev"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

The only other thing we need to configure is our database provider. Go to schema.prisma and change sqlite to postgres.

datasource DS {
  provider = "postgres"
  url      = env("DATABASE_URL")
}

Next you'll need an account on Netlify.

Click 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

Click 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:

7.3 Heroku

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.

Click 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.

Click 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.

7.4 Config/Environment Variables

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 which I will delete after writing this article.

Select the value and copy it to your clipboard. We'll be using this back in our Netlify project.

Select Deploy settings to go to your deploy settings.

Under Build & deploy select Environment.

Click the Edit variables button to edit the variables.

We're going to use the key/value pair from our Heroku Postgres app.

First enter 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.

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 native.

datasource DS {
  provider = "postgres"
  url      = env("DATABASE_URL")
}

generator client {
  provider      = "prisma-client-js"
  binaryTargets = "native"
}

And then Prisma looks up our local environment file. We override these once you deploy to Netlify.

# schema.prisma defaults
DATABASE_URL=file:./dev.db

# disables Prisma CLI update notifier
PRISMA_HIDE_UPDATE_MESSAGE=true

Click the 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.

Click the 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.