RedwoodJS is an attempt to build a fullstack framework for JavaScript and really deploy it in a serverless way. 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 can bring, as well as the global distribution that can bring.

Tom Preston-Werner - Full Stack Radio

Part 8 - Deployment

Name: a first look at redwoodJS part 8 - deploy to the world
Rating: 3.4 (9141 reviews)
Author: ajcwebdev

You made it to the last part!

In this part we will deploy our frontend application with Serverless functions on Netlify and connect it to our backend Postgres database hosted on Railway.

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

8.2 Netlify

yarn rw setup 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 deploy netlify"
  publish = "web/dist"
  functions = "api/dist/functions"

[dev]
  command = "yarn rw dev"

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

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 if you're a hipster.

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 (the screenshot is a lie):

yarn rw deploy netlify

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:

8.3 Config/Environment Variables

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.

For our final step, we will give our site a custom domain. We can do this in our Settings on Netlify. Go to Domain management and you should see a box for Custom domains.

Netlify assigns a random domain name by default but gives the option to edit it.

I'll change my site name to ajcwebdev-redwood.

Click Save and it'll reflect your new site name.

And that's it! Right now you should either be feeling a great sense of accomplishment over building some amazing, or a horrible sinking feeling that you just wasted hours of your life building something useless. The choice is yours!