Build and launch a Modern WebApp - workshop by Swizec

modernwebapp.dev

Draw the rest of the owl

You can read this segment in in 2 minutes. Solving the exercises might take longer.

This segment covers πŸ‘‡

It's time to build something cool. 🀘

We're using the code-along approach πŸ‘‡

  1. Swizec explains what we're going to do
  2. Swizec codes a part of it and makes a commit
  3. You fill in the blanks
  4. Swizec shows you how to fill in the blanks

The following is an outline of what we're doing to help us keep on track.

We're going to copypasta from my solution repo in some places to save time. Also helps with typos :P

Setup

You'll need gatsby-cli and serverless.

$ npm install -g gatsby serverless

Clone the starter repo. It comes with some basic setup and stubbed out files. We'll build the rest.

$ git clone git@github.com:Swizec/modern-webapp-starter-repo.git

Mind you both of those are their own npm/yarn repository ... package? You'll have to be careful about that going forward. It's easy to trip up.

AWS Credentials

You'll need AWS credentials as well

This is a good guide: click me

Make an Admin account for now. It's going to make your life easier.

Dependencies for webapp

Go into the webapp directory and install dependencies:

$ yarn // npm install .

Dependencies for server

Go into server directory and install dependencies:

$ yarn // npm install

Swizec explains what's set up

2 packages

Providers

server-side rendering

Serverless stub

DynamoDB helpers

Setup auth

Auth0 setup

Follow instructions for useAuth

Create album

Server mutation

Server save to dynamodb

Server album query

Dynamodb setup

Serverless deploy

Show Apollo playground

Logged in button for create album

Run mutation with useMutation

Show loading state

See that it works

Enable PWA mode

Deploy

-- Install now cli

-- Add Gatsby config

Do the thing