a first look at redwoodJS part 8 - deploy to the world

ajcwebdev - Aug 10 '20 - - Dev Community

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

You made it to the last part!

00-rob-wooooo

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.

01-github-repo

8.2 Netlify

yarn rw setup deploy netlify
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Next you'll need an account on Netlify.

02-netlify-sites

Click New site from Git to create a new site from git.

03-new-site-from-git

You can also use GitLab or Bitbucket if you're a hipster.

04-create-a-new-site

Enter the name of your repo into the search bar.

05-ajcwebdev-repo

Select the repo.

06-ajcwebdev/ajcwebdev

It selects the default branch to deploy.

07-branch-to-deploy

The build command may be entered by default.

08-build-command

If the build command is blank enter the following (the screenshot is a lie):

yarn rw deploy netlify
Enter fullscreen mode Exit fullscreen mode

Click Deploy site to deploy the site.

09-site-deploy-in-progress

If we go to the Deploys section we can see more information about the build.

10-netlify-deploys

Your build should take at least a minute or more, so don't freak out if it doesn't work immediately.

11-deploy-published

Our deploy took 2 minutes and 15 seconds and we can also see a summary of the deploy.

12-deploy-summary

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:

13-error-unexpected-token

8.3 Config/Environment Variables

14-copy-postgres-vars

Select Deploy settings to go to your deploy settings.

15-netlify-deploys

Under Build & deploy select Environment.

16-environment-variables

Click the Edit variables button to edit the variables.

17-edit-variables

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

18-set-environment-variables

First enter DATABASE_URL for the key.

19-DATABASE_URL

Then paste the value.

20-paste-postgres-vars

At the end of the value add ?connection_limit=1. This makes sure that each AWS Lambda only opens one database connection.

21-add-connection-limit

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"
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Click the Trigger deploy button to trigger a deploy and select Deploy site to deploy the site.

22-trigger-deploy

You will now receive a great series of logs.

23-build-logs-1

The logs will detail the build process.

24-build-logs-2

Do not concern yourself with the logs.

25-build-logs-3

Let the logs wash over you and through you.

26-build-logs-4

Raft is a bunch of logs that get you off Paxos island.

27-build-logs-5

Now let's go back to our site.

28-website-empty

Lets create a new post.

29-posts

Click the NEW POST button to make a new post. Enter a title and body.

30-new-post

Save the new post.

31-first-post-created

Lets try to edit our new post.

32-first-post-edit

Save your edit to the post.

33-first-post-edit-working

It looks like it's working. Lets check the front page to make sure it's really working.

34-front-page-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.

02-custom-domains

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

03-change-site-name

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

04-ajcwebdev-redwood-netlify-app

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

05-default-subdomain

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!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .