JedWatson / react-sydney-2021-stack

Demo content for my talk at React Sydney, May 2021

Home Page:react-sydney-2021-stack.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

react-sydney-2021-stack

Demo content for my talk at React Sydney, May 2021.

Try it out on GitPod

Open in Gitpod

Running the app

Clone the repo, run yarn to install dependencies, then yarn dev to start the dev server.

Open localhost:3000 for the website, and localhost:8000 for the KeystoneJS Admin UI.

Recap

I presented my favourite stack for creating a website / app:

In the talk I went through a step-by-step live demo of how to put a simple website for React Sydney together, from scratch. It includes:

  • Setting up Next.js and the two pages we want to render
  • Adding some styles with Tailwind
  • Setting up a Keystone project with SQLite and two lists (talks and speakers)
  • Integrating the content with the front-end using Keystone's Node API and Next's static APIs
  • Using the new KeystoneJS Document field
  • Adding a GraphQL API to the Next.js app for front-end queries in production

... then I wrapped up by deploying to Vercel: react-sydney-2021-stack.vercel.app

Follow Along

If you want to reproduce the steps in my live demo, see the steps folder for (light) instructions; or you can see the original steps in the commit history

Note that I rolled back the solution just before the talk, followed by a bunch of WIP commits, so I could push it live from the git repo at the end. You can ignore those 🙂

About the deployment

This scenario of using Keystone means that I'm using an SQLite database, committed into git (so it gets included in the Vercel deployment). The GraphQL API is then read-only in production, and content changes need to be made locally and commited (as you would with, say, markdown content for a blog website).

In a more serious production envronment you would use a proper server for the GraphQL API, and a Postgres database, both of which Keystone support.

License

MIT. Copyright (c) Jed Watson 2021. All rights Reserved.

About

Demo content for my talk at React Sydney, May 2021

react-sydney-2021-stack.vercel.app

License:MIT License


Languages

Language:TypeScript 97.4%Language:JavaScript 2.6%