Getting Started with RedwoodJS and Railway

Getting Started with RedwoodJS and Railway.md

1. Create a RedwoodJS project

yarn create redwood-app javascript-jam-redwood
cd javascript-jam-redwood
yarn rw dev

Open localhost:8910

Create home page

yarn rw g page home /

HomePage.js

// web/src/pages/HomePage/HomePage.js

import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags
        title="Home"
        description="This is the home page"
      />

      <h1>Hello JavaScript Jam 🍯</h1>
    </>
  )
}

export default HomePage

Add Post model and set provider to postgresql in schema.prisma

// api/db/schema.prisma

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

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

model Post {
  id        Int      @id @default(autoincrement())
  title     String
  body      String
  createdAt DateTime @default(now())
}

2. Provision a PostgreSQL database with Railway

First you need to create a Railway account and install the Railway CLI

railway login

Initialize project

Run the following command, select “Create new Project,” and add a plugin to your Railway project.

railway init
railway add

Select PostgreSQL.

Set environment variable

Create a .env file with your "DATABASE_URL".

echo DATABASE_URL=`railway variables get DATABASE_URL` > .env

3. Setup database with Prisma Migrate

Running yarn rw prisma migrate dev generates the folders and files necessary to create a new migration. We will name our migration nailed-it.

yarn rw prisma migrate dev --name nailed-it

Generate scaffold

A scaffold quickly creates a CRUD interface for a model by generating all the necessary files and corresponding routes.

yarn rw g scaffold post

You likely need to restart your development server for the environment variables to take effect.

yarn rw dev

Open localhost:8910/posts Create a post and click save.

Create a cell

yarn rw g cell BlogPosts

BlogPostsCell.js

// web/src/components/BlogPostsCell/BlogPostsCell.js

export const QUERY = gql`
  query POSTS {
    posts {
      id
      title
      body
      createdAt
    }
  }
`

export const Loading = () => <div>Loading...</div>
export const Empty = () => <div>Empty</div>
export const Failure = ({ error }) => (
  <div style={{ color: 'red' }}>Error: {error.message}</div>
)

export const Success = ({ posts }) => {
  return posts.map((post) => (
    <article key={post.id}>
      <header>
        <h2>{post.title}</h2>
      </header>

      <p>{post.body}</p>
      <time>{post.createdAt}</time>
    </article>
  ))
}

HomePage.js

// web/src/pages/HomePage/HomePage.js

import BlogPostsCell from 'src/components/BlogPostsCell'
import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  return (
    <>
      <MetaTags
        title="Home"
        description="This is the home page"
      />

      <h1>Hello JavaScript Jam 🍯</h1>
      <BlogPostsCell />
    </>
  )
}

export default HomePage

Deploy to Netlify

yarn rw setup deploy netlify
git init
git add .
git commit -m "we jammin, we jammin, hope you like jammin too"
gh repo create javascript-jam-redwood
git push -u origin main

Set DATABASE_URL in Netlify dashboard.

postgresql://postgres:xxxx@containers-us-west-6.railway.app:5958/railway?connection_limit=1