 Resources from Ben Patton in 2024

Get started with Supabase on your machine

Supabase is an open source Firebase alternative. A service to:

- Listen to database changes.
- Query your tables, including filtering, pagination, and deeply nested relationships (like GraphQL).
- Create, update, and delete rows.
- Manage your users and their permissions.
- Interact with your database using a simple UI.

Supabase is not a 1-to-1 mapping of Firebase. Most notably, Supabase uses Postgres rather than a NoSQL store. 

supabase

Getting Started with Supabase Local Dev

SvelteKit is an application framework that builds on top of Svelte that provides you the app level functionality you need. It does the boring stuff that you don't want to so you can execute on the projects you want. 

As you build with SvelteKit, you'll find it continues the philosphy of Svelte by adhering to Web Standards and APIs. It builds on top of Web APIs so when you're develop SvelteKit sites you are also learning skills that will transfer to any web-based project

In this course, you will build a modern SvelteKit blog powered by Sanity CMS. You'll start from scratch and build out a site that dynamically generates pages that you create inside Sanity. 

As you build your blog, you will learn how to:

- Style Svelte components with TailwindCSS
- Add error pages to different routes
- Query your CMS in the front end
- Parse and validate your data with Zod and JSDoc
- Deploy both Sanity and your app to the web

The magical disappearing UI framework

 - The web's JavaScript bloat crisis, solved. Svelte turns your templates into tiny, framework-less vanilla JavaScript.
 - Simple and familiar. Build apps out of composable, easy-to-write blocks using languages you already know.
 - Super fast, rock solid. Compile-time static analysis ensures the browser does no more work than it needs to.

svelte

Build a Sanity CMS Powered SvelteKit Blog

> _**As new features are added to Nextjs app router that do not fall within the scope of the main course, these lessons will be updated and more will be added**_

How to use this course: 

This course is meant to be a supplemental course for the [Next Migrate Course](https://egghead.io/courses/migrate-next-js-application-to-app-router-c4b31d29). 

The lessons match up as follows: 

- The two 'primer' lessons follow the 'Initialize The App Router' lesson in the Next Migration Course.
- The 'migrating routes/pages' lessons (3 & 4) match up with the migrating routes lessons (sales, customer routes, and deposit route)
- The migrating route handler and api routes lessons follow the migration of customer api routes from the main course
- The refactoring of api routes to server components lessons follow "Refactor Customer Id Api Route Handler to Server Component" lesson
- The refactoring to server actions lessons follow/fall within the main course refactoring to server action lessons 

Next.js is a minimalistic framework for server-rendered React applications.

Next Migration Course Extras

> This course will be updated as all the app router features and apis become stable 

>_Credit for this application goes to Kent C. Dodds. The starter application was ported to Next.js from Kent's Remix workshops at Frontend Masters._

Why this course? Simply put, many are wondering how to migrate their application to Next.js new app router architecture and make use of server components, server actions, etc.

"Server components are the future." Twitter is saturated with comments like this. Many of us feel like it is tech version of Thanos, "Dread it. Run from it. Server Components arrive all the same." 

Is this true? Emphatically no. So we can silence the infinity war now and say there is nothing wrong with using the pages router. 

In fact, after the initial deployment lesson, you could stop this course and go make it something better or into something you want it to be using the pages router. 

There are many incredible additions to Next.js new app router architecture. This is simply a course and resource for you should you choose/desire to migrate from pages router to app router.

You will learn how to: 
- migrate api routes, pages, and nested layouts
- take advantage of routing in the app router for a better nested layout experience
- turn getServerSideProps into a React Server Component
- use server actions

And much more. 

Due to the applications scale here are a few things to note:

- The course shows how to migrate a set of routes, api routes, etc with a few exceptions
- The remainder videos have been added to a supplemental course which you can find by searching for "Next Migration Course Extras" or clicking [here](https://egghead.io/courses/next-migration-course-extras-83bec19c). Consider them your bonus features and deleted scenes from the 'movie'. 
- The extras course has been set up to align with the lessons here. For example: 
    - As you create the app router, there are 'primer' videos for how to create a page and dynamic routes in the app router
    - As you go through migrating routes, you will find additional 'migrating routes' videos in the extras course
    - As you migrate api routes, the remainder of the api route migration videos are in the extras course

And with that you are good to go!

Start your journey today and experience the possibilities of the Next.js app router



Migrate Next.js Application to App Router

The first step to starting a SvelteKit projects is initialize the app with commands from SvelteKit's website. 

```bash
npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open
```

We'll then test our app is running by adding html to our `src/routes/index.svelte` route.

Create a new SvelteKit project

SvelteKit gives us unique files for adding layouts. Using the `+layout.svelte` file name, we can set layouts for all levels of routes. We can also set `+error.svelte` in each route so that we can handle any errors for these routes. 

We'll do that in this lesson by adding a `<h1>Header</h1>` and `<h4>Footer</h4> ` that wraps a `<slot />` to see it rendered on different pages. Notice that we will need to utilize `<slot />` to render the routes content onto the page as well. This gives us finegrain control of where content goes in our layout.

Add an Error Page and Layouts to SvelteKit Routes 

A route is very simple to create in SvelteKit. Using 'file-based routing' you simply add a .svelte file (posts.svelte) in the routes folder. Then we can navigate to where our app is running. In this case, we go to localhost:4000/posts. 

The index.svelte file can be thought of as the home route which evaluates to localhost:4000. 

We will see more types of routes as we go along. 



Add a Route to a SvelteKit Application

In svelte, you define components in a file. 

This is a special file extension that allows you to add your script, style and template all in one place. You’ll see how a counter component will hold state in Svelte as well as interact and style that component through the different parts of the file.

We'll implement the classic counter example that will show you how to update component state.

You can do a deep dive on Svelte with Tomasz Łakomy’s [Up and running with Svelte 3](https://egghead.io/courses/getting-started-with-svelte-3-05a8541a)

Understand the Structure of a Svelte Component

UploadThing makes it easy to migrate to the App router with a step by step guide. We'll move our upload functionality to the App router and finally delete our pages directory.

Migrate UploadThing Route Handler to Next.js App Router 

Now that we have moved over the bulk of our routes to the app router we can move the remaining routes to the pages routes app router. 

Migrate Remaining Next.js Pages to App Router

With our customer POST handler now moved to a server action your goal is to do the same thing with the invoice POST handler

Refactor Invoice POST Handler to Next.js Server Action

Bite-size video tutorials for badass web developers.

egghead

Use Infrastructure as Code with Architect to Deploy to AWS

In common workflows we do not want to push directly to the remote database from our machine. We will setup a github action that will run whenever we push to our main branch of our github repo. 



Deploy Local Database Changes to Supabase Remote Through Github Actions

It is common, when working on a team, for changes to have been applied to a remote database and for your local instance to be out of sync.

By running `npx supabase db pull` we can pull any changes to our remote database schema to keep our local database in sync.

Pull Remote Database Changes with Supabase

When `npx supabase init`, `npx supabase start`, or `npx supabase db reset` is run, supabase will look for our `seed.sql` file and seed our local database.

Since we have already created the project and we want to add seed data, we can run `npx supabase db reset`. 

Add Seed Data to Local Database with Supabase

With Supabase Link we can link our local project to a remote database. Then we can use the command `npx supabase db diff -f <fileName>` to create a local migration file. 

Then we use `npx supabase db push` to apply our local changes to the remote database.

Link Local Database to Remote and Run a Migration with Supabase

With the project setup, we can now start our local instance of supabase. This gives us a local running version of the supabase studio that we can interact with. 

We will create a table in called todos in the studio

Start Supabase Locally and Create a Table

With our project setup we will use our supabase dev dependency to run the supabase cli. We will login to our supabase account and then init the project locally. 

To run supabase locally you need to have Docker installed and running on your computer. To install Docker and get it setup visit this link - https://docs.docker.com/desktop/

Use Supabase CLI to Login and Init Project

Create an application and install packages 

Generate a New NextJS with Supabase App

Create a Supabase account and database quickly by going to https://database.new

Create a Supabase Account and Database

We are now ready to deploy. We can first deploy our CMS by running the command `npm run deploy`. Make sure you are in that project's terminal when you deploy.

Next we need to set up a github repository for our app. Then we can push our code to the repository.

Finally, we can go to Vercel. Create an account if you do not have one and link it to your github. If you are creating an account you will need to make sure that you give Vercel permission to read your repositories or a selected repository. 

Then in your Vercel dashboard click 'New Project' and choose your newly created project for your SvelteKit blog. 

Add your environment variables (you can copy and paste them)

Then deploy 🎉

After deployment go to the url it provides and now you have a deployed blog. 

To make sure all works as expected go ahead and log in to Sanity. Choose your project. It will be named whatever name you gave it when creating your Sanity project. Then click "Open Sanity Studio".

Now navigate to Posts and click the create new post icon. Go ahead and create a second post. Click "Publish" and then navigate back to your posts page on your blog site and now we have posts uploading to our site as we write them. 

Note: If you are already on the the /posts page on your blog site when you go back to it, you will need to refresh the page.

Topics

Instructors

Content Type

Ben Patton