loading...
Cover image for a first look at redwoodJS: part 7 - deploy

a first look at redwoodJS: part 7 - deploy

ajcwebdev profile image anthonyCampolo Updated on ・8 min read

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 138

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.

01-github-repo

7.2 Netlify

yarn rw g deploy netlify
Enter fullscreen mode Exit fullscreen mode

02-yarn-generate-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.

03-netlify.toml

Next you'll need an account on Netlify.

04-netlify-sites

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

05-new-site-from-git

You can also use GitLab or Bitbucket.

06-create-a-new-site

Enter the name of your repo into the search bar.

07-ajcwebdev-repo

Select the repo.

08-ajcwebdev/ajcwebdev

It selects the default branch to deploy.

09-branch-to-deploy

The build command may be entered by default.

10-build-command

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

Click Deploy site to deploy the site.

11-site-deploy-in-progress

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

12-netlify-deploys

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

13-deploy-published

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

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

15-error-unexpected-token

7.3 Heroku

To get our database online we'll need to set up another account and project on Heroku.

16-heroku-apps

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.

17-create-new-app

We'll give the app the same name as the Github repo.

18-app-name-ajcwebdev

Now we have a dashboard for our project much like we did in Netlify.

19-heroku-deploy

Lets take a look at our Resources tab so we can provision our database.

20-heroku-resources

Click Find more add-ons to find more add-ons.

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

22-heroku-postgres

Click Install Heroku Postgres to install Heroku Postgres.

23-install-heroku-postgres

You can select your add-on plan, we'll be using the free option.

24-provision-add-on

Enter the name of your heroku app and it should appear in the autocomplete.

25-app-to-provision-to

Select your project and click Provision add-on to provision the add-on.

26-click-provision-add-on-button

Now our database is installed.

27-app-provisioned

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.

28-heroku-settings

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.

29-enter-config-vars

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

30-copy-postgres-vars

Select Deploy settings to go to your deploy settings.

31-netlify-deploys

Under Build & deploy select Environment.

32-environment-variables

Click the Edit variables button to edit the variables.

33-edit-variables

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

34-set-environment-variables

First enter DATABASE_URL for the key.

35-DATABASE_URL

Then paste the value.

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

37-add-connection-limit

We'll create one more variable.

38-new-variable

It will be called BINARY_TARGET with the value rhel-openssl-1.0.x.

39-BINARY_TARGET

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.

40-save-variables

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.

41-schema-datasource-generator

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

42-env.defaults

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

43-trigger-deploy

You will now receive a great series of logs.

44-build-logs-1

The logs will detail the build process.

45-build-logs-2

Do not concern yourself with the logs.

46-build-logs-3

Let the logs wash over you and through you.

47-build-logs-4

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

48-build-logs-5

Now let's go back to our site.

49-website-empty

Lets create a new post.

50-posts

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

51-new-post

Save the new post.

52-first-post-created

Lets try to edit our new post.

53-first-post-edit

Save your edit to the post.

54-first-post-edit-working

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

55-front-page-working

In the next and final part we'll add authentication to our application, something that has never confused any developer ever.

Posted on by:

Discussion

pic
Editor guide