remix-auth

Simple Authentication for Remix

How to Debug Remix loaders and actions in VS Code

This video shows how to configure VS Code to debug your Remix loaders and actions. NOTE: You can now use the `debugger` statement instead of the external `debug()` function. I tried this before, but it didn't work. Not sure why it works now. You still can't set a breakpoint inside a route module, but you can add `debugger` statement and it will break there. You can then step through your code. I will be re-recording this video with this new info. Get the launch configuration here: https://rmx.fyi/debug

kiliman/remix-component-data

This is a proof of concept for showing how you can expose loader functions from your components to use in your routes.

HTTP vs. Server-side Cache in Remix by sergiodxa

When you build a web application, you may reach a point where some performance problems could be solved by a...

edmundhung/remix-guide

A platform for sharing everything about Remix

remix-forms

Magically create forms + actions in Remix!

QuentinWidlocher/remix-template

Remix template with Typescript, Tailwind, Zod and Prisma

jacob-ebey/remix-pwa

A template to get a Remix PWA up and running

remix-utils

This package contains simple utility functions to use with [Remix.run](https://remix.run).

Remix vs Next.js

An objective comparison between Remix and Next.js

remix-etag

## Problem

Test Remix loaders and actions by sergiodxa

If you are using Remix, most of your application code will live in the loaders and actions instead of React compo...

sergiodxa/personal-site

Personal website

remix-tailwind

Use TailwindCSS with Remix without an extra build step!

Deploy Remix K-pop Stack + Supabase

Have you heard about our new Remix Stacks template the K-pop Stack? It combines Remix, Supabase, Tailwind, and more to give you a note creation app with auth to help jump start your own Remix creation. Check out how to make it your own and get it deployed to fast and free! Repo: https://github.com/netlify-templates/kpop-stack Blog Post: https://www.netlify.com/blog/deploy-your-remix-supabase-app-today!/

remix-auth-oauth2

A strategy to use and implement OAuth2 framework for authentication with federated services like Google, Facebook, GitHub, etc.

remix-vite

Static file serving and directory listing

Build a Realtime Chat App with Remix and Supabase

Supabase is a collection of open-source tools that wrap around a PostgreSQL database. In this course, we look at building a realtime chat application with Remix, using Supabase for db hosting, authentication, authorization and subscribe to realtime db events - updating the UI as the database changes. We will learn about: loaders and actions in Remix querying and mutating data with Supabase authentication with GitHub authorization with RLS merging client and server state with realtime events deploying a Remix app to Vercel This course is 100% TypeScript, however, don't stress if you don't have any experience with TS, as Supabase does most of the heavy lifting here! 🎉

Validating Remix Form Data Using Zod and TypeScript

You can use Zod to validate form input and create typed TypeScript objects in a Remix action function that is handling the form data.

jacob-ebey/remix-ecommerce

WIP

Building a full stack app with Remix, Prisma, and Supabase

There is a misconception that Remix is only for static sites. This is a how-to guide for building a full-stack app with the new framework + Prisma + Supabase, and deploying it to Vercel.

Data Flow in Remix

Remix takes the idea of “one-way data flow” and extends it across the network, so your UI truly is a function of state: from the client to the server and back again.

remix-i18next

The easiest way to translate your Remix apps

remix-pwa

A PWA handler for Remix

remix-graphql

Utilities for using GraphQL with a Remix app

rileytomasek/zodix

Zod utilities for Remix loaders and actions.

dilums/interactive-remix-routing

Interactive app to demonstrate how routing works in Remix

Remix Run - Introduction to HTTP Caching

HTTP Caching is a web fundamental every web developer should eventually learn. The quickest way to a slow website is to not understand caching and ofc, the best way to make your website fast is to take advantage of it. In this video we'll explain the basics of HTTP caching, how web browsers respond to it, and how CDNs take advantage of it, by building a bare-bones Node.js server and then quickly see how to specify caching headers in a Remix App.

remix-run/indie-stack

The Remix Stack for deploying to Fly with SQLite, authentication, testing, linting, formatting, etc.

dev-xo/stripe-stack

A Stripe focused Remix Stack that integrates User Subscriptions, Authentication and Testing. Driven by Prisma ORM. Deploys to Fly.io

remix-image

A React component for responsive images in Remix

Remix upload to S3 — CanRau.com

Upload files to S3 compatible API - I'm using Backblaze B2 - with Remix and parseMultipartFormData

eslint-config-remix

ESlint config for remix app

zod-form-data

Validation helpers for [zod](https://github.com/colinhacks/zod) specifically for parsing `FormData` or `URLSearchParams`. This is particularly useful when using [remix](https://github.com/remix-run/remix) and combos well with [remix-validated-form](https:

@ignisda/remix-pagination

Pagination for Remix apps

E2E test Remix with Vitest and Puppeteer by sergiodxa

Vitest is a testing framework, similar to Jest, but way faster, built on top of Vite, which uses esbuil...

debounced-search.tsx

Remix Image Component

remix-validated-form

Form component and utils for easy form validation in remix

Use Remix with socket.io by sergiodxa

If you want to add real-time capabilities to your Remix app without using an external service, the easiest way is proba...

The useMatches hook in Remix by sergiodxa

If you use Remix, there's a hook that you can use called useMatches, this hook is a way to access some internal d...

itsMapleLeaf/remix-electron

kentcdodds/kentcdodds.com

My personal website

Kent C. Dodds @ ReactNext 22 - Stream Away the Wait

ReactNext 2022 www.react-next.com Israel's Annual React & React-Native conference Powered by EventHandler ----------------------------------------- Stream Away the Wait: When implementing the design of a user interface, we often finish before remembering that not everyone's running the app's services locally on their device. There's going to be network latency, long running database queries, and large datasets that can slow down the experience. We can and should do everything we can to speed things up, but not all of this is within our control. This means we need to start thinking about pending states. But pending UI is terrible. In this talk, Kent will walk us through building a pending experience that is quite delightful. Ultimately taking advantage of React 18's new streaming APIs and a soon-to-be-released API in Remix to give a top-notch user and developer experience. Prepare to have your mind blown. ----------------------------------------- Kent C. Dodds: Kent C. Dodds is a world renowned speaker, teacher, and trainer and he's actively involved in the open source community as a maintainer and contributor of hundreds of popular npm packages. Kent is a Co-Founder and Director of Developer Experience at Remix. He is the creator of EpicReact.Dev and TestingJavaScript.com. He's an instructor on egghead.io and Frontend Masters. He's also a Google Developer Expert. Kent is happily married and the father of four kids. He likes his family, code, JavaScript, and Remix. ----------------------------------------- #javascript #reactjs #programming #software #development #softwaredevelopment

remix-seo

A package for easily managing SEO meta and link tags in Remix.

remix-params-helper

This package makes it simple to use Zod with standard URLSearchParams and FormData which are typically used in Remix apps.

remix-query

Query for Remix-Run

Loader vs Route Cache Headers in Remix by sergiodxa

Document Request So, let's say you have a route at /my-super-route, and there you have a loader fun...

Roadmap #5

Learn more at https://remix.run

Remix Cookbook - Easy to follow recipes for Remix.run

Easy to follow recipes for the Remix.run framework

remix-server-kit

Useful utilities and simplified validation for actions and loaders.

Authentication in Remix

As apps grow, almost all will need user authentication. Fortunately, Remix gives us tools to make this easy. In this post, we'll look at how we can add authentication to an app using Remix.

"Working with Nested Routes and Parameterized Routes" by Aaron Saunders at #RemixConf 💿

We will walk through a simple demonstration of a remix application using nested routes and parameterized routes. The use of nested routes helps me with component design and separation when architecting an application. Parameterized routes / Dynamic Routes contain state information that can through the parameters that are defined on the route. This provides powerful flexibility when designing your app and app's components. Putting the two together in an simple solution to be a reference when you build something amazing. Speaker bio: Aaron is an Information Technology Strategist, Thought Leader, and Diversity and Inclusion Trailblazer - Founder & CEO of Clearly Innovative. He believes technology and in his case coding is an enabler and an equalizer. Aaron has focused a large part of his career training and developing individuals who want to get into tech but cannot find the opening; through the apprenticeship program he ran at Clearly Innovative, teaching web and mobile development at Howard University, and the free technical videos on his Youtube Channel he just want to help others get a seat at the table of tech and innovation. Learn more at https://remix.run/conf/2022/speakers/aaron-k-saunders

Supabase Auth with Remix

Authentication helpers for loaders and actions in Remix.

Debug server-side Remix using VSCode

HMR and Hot Data Revalidation with v2_dev 🔥

Check out the new v2_dev docs 👉 https://remix.run/docs/en/main/other-api/dev-v2 Indie stack 👉 https://github.com/remix-run/indie-stack

Remix and “The Edge”

“The edge” isn’t just about static assets anymore. It’s increasingly becoming a place for dynamic assets resulting from compute. Remix is taking full advantage of this next generation of edge computing.

Add rolling sessions to Remix by sergiodxa

Rolling sessions is a technique to extend the maxAge of a session cookie by resetting the cookie's expiration date...

Build a server-side filter UI with Remix

Create a filter bar that stores its state in the URL. Use the OData query string format to parse and serialize the filters. Create a custom hook to manage the filter state.

eslint-plugin-remix

Latest version: 1.0.1, last published: 6 months ago. Start using eslint-plugin-remix in your project by running `npm i eslint-plugin-remix`. There are no other projects in the npm registry using eslint-plugin-remix.

xstevenyung/remix-crash

Get better insight on why your Remix app crashed during development 💥

Remix Fundamentals — Exclusive Workshop

Spend A Full Day Immersed in Remix with Kent C Dodds

Improving Web Vitals in Remix

**[Your Remix app](https://remix.run/docs/en/v1/pages/stacks)** is fast by default, but with a few edits to **root.tsx** you can make it feel even faster...

remix-auth-github

The GitHub strategy is used to authenticate users against a GitHub account. It extends the OAuth2Strategy.

Not Another Framework!

The web ecosystem can feel like it moves too fast sometimes. We're sensitive to that at Remix so we've designed it with your future in mind. Get good at Remix, get better at the web.

Progressively enhance the useFetcher hook in Remix by sergiodxa

If you're using multiple forms on the same route, you may use the useFetcher hook, which also...

Metronome — Performance data tailored for Remix

Delivering the best experience to users is critical for your success. Metronome lets you visualize how your Remix app performs from top to bottom.

The Remix Podcast

This podcast will inspire you to build excellent user experiences for the web. Sometimes with Remix, the modern web framework.

Moulton

A Remix Newsletter

Roadmap Planning #1

Learn more at https://remix.run

How to Upload Images in a Remix Application by sergiodxa

The blog of sergiodxa

How to Redirect with Search Param in Remix by sergiodxa

The blog of sergiodxa

jacob-ebey/remix-react-18-streaming

Remix + React 18 Streaming

CDN Caching, Static Site Generation, and Server Side Rendering

Remix relies on CDNs and cache control headers to get the best web performance possible. Here we’ll compare various caching strategies, including Static Site Generation and Increment Static Regeneration, and compare the tradeoffs.

Validating Remix forms with Constraints API by sergiodxa

The Constraints API is a browser API that has been available since the times of IE10, yep, that old....

mcansh/snkrs

show off your sneaker collection

Remix & Firebase - using Firebase Auth and Firestore with Remix

In this video I convert the Remix demo app to using Firebase Cloud Firestore database and Firebase Authentication. We'll also take a look at using Sessions and Cookies in Remix. Watch this first if you are not yet familiar with Remix: https://youtu.be/SmMqdF2v30s Github: https://github.com/ianlenehan/my-remix-app

partykit/remix-starter

🎈 PartyKit ⤫ Remix 💿

jckw/remix-radix-stitches-starter

Remix Single: Loading data into components

The first thing you usually need for any route is a way to load data from the server. Remix makes it easy with loaders. Learn more at https://remix.run/docs

Avoid waterfalls of queries in Remix loaders by sergiodxa

Remix does a fantastic job of avoiding waterfalls everywhere. It preloads assets. It downloads JS a...

Remix Authentication Using Remix-Auth Package

Remix Authentication Using Remix-Auth Package #remix #remixrun #reactjs This is a walkthrough of a sample application using the remix-auth package which is a passport-like framework for simplifying authentication of your remix application using specific packaged strategies. In this example, I am using the Form Strategy to show a simple login flow Remix Playlist - https://buff.ly/3GuKVPS ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Chapters --------------- 00:00 - Intro, What is Remix Auth 01:20 - Sample App Flow 03:10 - Walking through the code 04:10 - Checking if a user is authenticated, in protected pages 04:42 - Getting session information from the authenticator, in protected pages 05:30 - Logging out, session cleanup 06:10 - Getting Errors when logging In 06:50 - Logging In using the authenticator 08:10 - Setting Up The Authenticator 09:59 - Throwing Errors When Authenticating, Returning Successful Session Info 12:10 - Why this is awesome 13:10 - App Flow Review 16:01 - Redirecting from the login page if a session already exists 18:28 - Wrap Up Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Remix Auth - https://github.com/sergiodxa/remix-auth Remix Auth Form Strategy - https://github.com/sergiodxa/remix-auth-form Source Code - https://github.com/aaronksaunders/remix-auth-form-strategy Remix Playlist - https://buff.ly/3GuKVPS #reactremix #remixrun #authentication #remixauth #remixformstrategy #reactjs

Nx ❤️ Remix

First version of the Remix plugin for Nx. #reactjs #monorepo #nx

Where to host your Remix app in 2023

Should you host your Remix app on a serverless provider like Netlify, Vercel, Cloudflare Pages, or AWS Lambda? Or a long-lived server like Fly, Render, Railway, or DigitalOcean? This guide will help you choose the right hosting option for your app.

PhilDL/remix-gospel-stack

Remix template with Turborepo, TypeScript and pnpm. The remix app deploys to fly.io or build to Docker image. Example packages for Database with prisma, Tsyringe dependency injection, UI, and internal TypeScript packages.

kiliman/remix-vite-template

Remix template with Vite, Tailwind CSS, and Fly.io support

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration

Working with Remix: AWS Amplify Authentication Using Authenticator UI and AppSync Integration #remix #aws #authentication Walkthrough a code sample of integrating AWS Amplify with a Remix Application. We show how to implement complete authentication flows to your application with minimal boilerplate. We then make a database query using the AWS Appsync API to retrieve data. This video does not walkthrough setting up an aws amplify environment, there are plenty of videos cover that already, this just shows how to using remix with that environment Chapters --------------- 00:00 Introduction 01:18 Quick Application Demo 03:28 Changes In Root.jsx 04:29 Changes to Index.jsx, redirecting when not authenticated 05:28 Login.jsx, using AWS Amplify Authenticator Component 06:50 Using a Fetcher to Submit Credential Tokens to Create Session Cookie 07:47 In Session.Server.ts managing the session cookie 08:22 Loading Data Using AppSync API with credentials saved in Session Cookie 10:44 Using Client Side SDK to Get User Information 11:29 Signout using client SDK and clear server session information 12:14 Review Pattern Source Code -------------------- - https://github.com/aaronksaunders/amplify-remix-todos-1 Documentation Links ---------------------------------- Remix Cookie Package - https://remix.run/docs/en/v1/api/remix#cookies AWS Amplify Web Client SDK - https://docs.amplify.aws/cli/start/install/ AWS Amplify Node SDK - https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-nodejs.html AWS Amplify UI Components - https://ui.docs.amplify.aws/react/components/authenticator Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic #remix #remixrun #firebase #googleauth #firebaseauth https://www.clearlyinnovative.com

Remix Single: Concurrent Mutations w/ useFetcher

While Remix and browsers model mutations as form navigations, `useFetcher` allows you to get the same programming model without causing a navigation. This allows apps to add pending and optimistic UI to multiple elements at the same time. Concurrent Mutations! Learn more at https://remix.run

sitemap.xml generator for remix.run

Creating An Authentication Flow Using Remix and Supabase Tutorial

Creating An Authentication Flow Using Remix and Supabase Tutorial #remix #supabase #reactjs Remix is a full-stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff. Simple application showing authentication flow and session management using react remix and supabase See Part Two where we cover file upload and writing records to Supabase - https://youtu.be/ySQcGc9NICo Timestamps -------------------- 00:00 What's Covered In The Tutorial 02:15 Application Feature Walkthru 03:19 Looking At Code Starting With index.js, Covering Actions & Loaders Sessions 07:38 Managing Sessions in Authentication Session Using Remix 08:40 Logging In A User In Supabase and Creating the Session 12:18 Creating A New User Account In Supabase and Creating A Session 14:40 Running The Project 15:13 Using Remix Server 15:34 Configuring Environment With .env 16:16 Running Remix App and Verifying Data In Supabase 18:02 Final Thoughts ------------------------------------------------------------------------------ 💰 Support this channel - https://ko-fi.com/fiwic ------------------------------------------------------------------------------ Follow Me ------------------------------------------- twitter - https://twitter.com/aaronksaunders github - https://github.com/aaronksaunders udemy - https://www.udemy.com/user/aaronsaunders gumroad - https://app.gumroad.com/fiwic Links --------- Remix Docmentation - https://remix.run/docs/en/v1 Supabase Documentation - https://supabase.com/ Source Code - https://github.com/aaronksaunders/supabase-remix-auth Supabase Playlist - https://youtu.be/MVy46MGmfOQ #reactremix #remixrun

rphlmr/supa-fly-stack

The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.

Remix 💿 mdx-bundler and images — CanRau.com

How to get mdx-bundler (by Kent C. Dodds) working with local images

shamsup/remix-starter-serverless

A template for deploying Remix to AWS with the Serverless framework

jacobparis/remix-cloudflare-prisma

An example of prisma working on cloudflare pages with Remix

Create a Remix Ecommerce store with Medusa

Tutorial on how to create a Remix ecommerce store together with Medusa.

Remix Crash Course 2023 (React Framework)

Remix is an amazing React framework that vastly simplifies the process of building fullstack React web apps. With this crash course, you'll learn how Remix allows you to seamlessly blend frontend and backend code into each other. Besides crucial essentials like project setup, routing and styling you'll also learn how to fetch and submit data, and how to integrate backend code into your React application. 👉 If you want to learn more about this awesome React framework, you can explore my full course "Remix - The Practical Guide": https://acad.link/remix (a huge discount will be applied automatically). 👉 Learn more about React.js itself with my bestselling "React - The Complete Guide" course: https://acad.link/reactjs Code attachments: https://github.com/academind/remix-practical-guide-course-resources/tree/main/Code/02%20Essentials Join our Academind Community on Discord: https://academind.com/community Check out all our other courses: https://academind.com/courses ---------- • Go to https://www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts • Follow @maxedapps and @academind_real on Twitter • Follow @academind_real on Instagram: https://www.instagram.com/academind_real • Join our Facebook community on https://www.facebook.com/academindchannel/ See you in the videos! ---------- Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

kiliman/remix-flat-routes

Remix package to define routes using the flat-routes convention

opentelemetry-instrumentation-remix

open telemetry instrumentation for the `remix` package

Remix Single: Optimistic UI

Instead of adding pending states and busy indicators while we wait for the server to process a mutation, we already know what the UI will look like when its done. Skip the spinners with Optimistic UI! Learn more at https://remix.run

MDX blog in Remix.run - Oldweb2 blog

A minimal MDX powered blog with Remix.