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

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...

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...

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.

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.

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 upload to S3 — CanRau.com

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

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

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...

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...

Remix Cookbook - Easy to follow recipes for Remix.run

Easy to follow recipes for the Remix.run framework

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.

Supabase Auth with Remix

Authentication helpers for loaders and actions in Remix.

Debug server-side Remix using VSCode

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.

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...

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...

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

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....

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

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.

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

Remix 💿 mdx-bundler and images — CanRau.com

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

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!

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.

Why you should lift component state up to the URL

"How can I sync component state with the URL?" This is one of the most common questions I see asked in the React community, and in this video we're going to learn why trying to synchronize state between your React app and the URL is a bad idea – and the right way to address this issue. - 0:00 – Intro - 2:04 – Implementing sorting in React - 17:06 – First attempt at shareable URLs: Synchronizing React state - 20:17 – Fundamental problem with first attempt - 21:43 – Second attempt at shareable URLS: Hoist state out of React - 29:13 – Outro Links: 👉 Demo: https://2022-05-16-hoisting-state-to-url.vercel.app 🧑‍💻 Source on GitHub: https://github.com/samselikoff/2022-05-16-hoisting-state-to-url/blob/main/app/routes/index.jsx 💅 Table component from Tailwind UI: https://tailwindui.com/components/application-ui/lists/tables#component-7b5a46e74e475708d966ca31716f1771

Use Server-Sent Events with Remix by sergiodxa

Using Server-Sent Events (SSE) you can keep a connection between a browser (client) and an HTTP server open an...

SSR Date Formatting in Remix using the User's Locale

How I achieved consistent date formatting in Remix on both client side and server side rendered React using a LocaleProvider and Intl.DateTimeFormat.

Remix Cookbook - Does Remix impose a project structure I have to follow?

Aside from a few conventions you have to follow, Remix won’t stay in your way in terms of project organization. That’s nice but, at the same time, ...

How to add canonical URL to Remix 💿 — CanRau.com

Add canonical urls to you Remix website to avoid duplicate content penalties for better SEO

Building a context loaded chat assistant with OpenAI and Remix

It seems everyone is using Chat GPT in their daily lives. From coding, to recipes, to blog generation, carefully crafted prompt engineering…

Convert React website to Remix

This article covers the basics of converting a React website to a Remix website

How to Integrate Markdown Content with Syntax Highlighting in Remix | Andre Landgraf

Markdown is a powerful tool for writing and publishing content. There are different ways of integrating Markdown into your Remix application. In this blog post, I want to show you how my own Markdown setup works.

Using Service Workers with Remix by sergiodxa

A Remix app is by default fast, the framework optimize a lot how the required resources for a page are loaded s...

Dynamically generate og:image using skia-canvas in Remix 💿 — CanRau.com

How to dynamically generate og:images for Social Media using `skia-canvas` in a Remix resource route.

Server-side pagination with Remix

Use query parameters to implement server-side pagination with Remix. Create a rolling pagination component that shows the current page along with a few pages before and after it, like Google Search.

Generate a PDF in Remix with Resource Routes by sergiodxa

Remix has a feature called Resource Routes which let you create endpoints returning anything. Usin...

Building a Simple Search UI with Remix

Photo: Markus Winkler on Unsplash. One thing I love most about Remix is how it encourages you to...

Multi-Page Forms Using Remix and Redis

Recently, I set out to create a multi-page form using Remix. I decided to use Redis to store a temporary version of the form data that can be used between p

Up and Running with Remix

What is Remix? > Remix is a seamless server and browser runtime that provides snappy page loads and instant transitions by leveraging distributed systems and native browser features instead of clunky static builds. > -- remix.run But that summary only scratches the surface. Remix has great mental models, is extremely fast, and has a plethora of components and features that will make your life easier and web apps perform better. And in this course, you'll be learning how to take full advantage of what Remix has to offer. You will learn by building a full-featured blog with a database, authentication, CRUD operations, user roles, and more! If you want to read more about why should give Remix a chance, give Kent's blog post, Why I Love Remix, a read! Check out this repo to see the project code for this course

Parse Markdown with Markdoc in Remix by sergiodxa

Markdoc is this new Markdown parser by Stripe, and it's a simple to use yet extendable library we can use i...

Lazy Loading Routes in React Router 6.4+

Decoupling data-fetching from rendering introduces some complexities if you want to lazily load your route components. Check out how the newly introduced `route.lazy()` method helps solve this to keep your app bundles small and your UX snappy!

Dependency injection in Remix loaders and actions by sergiodxa

Dependency Injection is a way our function or class can receieve from the caller the instancie...

Best 10 Code Snippets for Remix and TypeScript in 2022

What is a Code Snippet? A Code Snippet is a block of code you can share and reuse. By...

Remix Cookbook - Form and data validation with ZOD

Remix brings us back to the olden days of web development by relying on web fundamentals. In practice, this means leaving it to the browser to do t...

The Complete Guide to Dark Mode with Remix

Dark Mode can be surprisingly tricky to add with any framework. But Remix gives us some unique tools to deliver a fantastic user experience. In this post, we'll look at how Remix allows us to use the platform to provide a perfect theming solution.

Adding CSRF protection to Remix by sergiodxa

While you may not need CSRF if your cookies have the SameSite: Lax configured, it may still be a good idea to ...

Creating a Github-like Progress bar for your Remix app

This post is about the progress bar that shows at the top of the cover image 🤓 This is a...

How to Create a reusable Form component in Remix by sergiodxa

The blog of sergiodxa

Remix Run Speedrun - Pokemon

Is Remix Run more than just hype? Let’s find out by building out a multi-page Pokemon SPA to show you a bunch of the fundamentals: SSR data loading, Navigation, API Routes, page routes and parameters, and more. Code: https://github.com/jherr/remix-speedrun-pokemon Remix Quickstart: https://remix.run/docs/en/v1/tutorials/blog Remix Philosophy: https://remix.run/docs/en/v1/guides/philosophy 👉 What's my theme? Night Wolf [black] 👉 What's that font? Operator Mono 👉 I'm a host on the React Round Up podcast: https://devchat.tv/podcasts/react-round-up/ 👉 Don't forget to subscribe to this channel for more updates: https://bit.ly/2E7drfJ 👉 Discord server signup: https://discord.gg/ddMZFtTDa5 Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel. 00:00 Introduction 00:33 Setup 01:26 Tailwind setup 02:27 Layout configuration 04:12 Setting up Pokemon data 04:50 Creating the index page 06:42 Creating an API route 07:10 useFetcher and Forms 09:10 Implementing a Route 11:33 Adding Breadcrumbs 12:36 How Remix is different 13:15 Remix Actions 14:08 Outroduction #remix #remixRun

Localizing Remix apps with i18next by sergiodxa

There's a lot if libraries to implement i18n in JS and React, and i18next is one of the most popular out ther...

New Remix App

React 18 upgrade guide

Remix

A remix project using their indie-stack

Build A Pet Management System With Remix, Prisma, and Postgres | Real World Database Application

Senior Developer Advocate Austin Gil lives in a neighborhood with many dogs but can never remember their names. In this new video series, Austin builds out an application to track all of his neighborhood pet friends using Remix, Prisma, and Postgres. Welcome to “Neighborhood Pet Manager!” Chapters: 0:00 - Introduction 1:11 - Overview of the project 3:58 - Project Setup 6:00 - Configuring Prisma 8:53 - Alternative to Configuring Prisma 10:00 - Another Alternative - Using SQLite 18:40 - Starting to Build the Application 20:48 - Outro & What’s Next New to Linode? Get started here with a $100 credit → https://www.linode.com/akatube The code for this project is available here → https://github.com/AustinGil/npm Learn more about PostgreSQL here → https://www.linode.com/docs/guides/databases/postgresql/ Subscribe to get notified of new episodes as they come out → https://www.youtube.com/linode?sub_confirmation=1 #Remix #Prisma #Postgres #Linode Product: Linode, Akamai, Databases, Austin Gil

On Rails

What's the deal with Remix?

Remix request cheatsheet

Build a FullStack AMA app with Remix, Prisma, PostgreSQL - Foysal's Dev Diary

Learn how to build a fullstack app, from spec to production, using remix, prisma and postgresql starting from planning out the app's spec at a higher level and breaking it down into smaller modules and bringing it altogether to form a finished product

Understanding Remix by Building an Application

With Prisma, Tailwind, Multiple Forms, Validation.

Remix v2 Routes Upgrade

This video is walkthrough of a few strategies you can take to migrate from the Remix v1 to v2 route file naming convention - Migration doc: https://remix.run/docs/en/main/start/v2#file-system-route-convention - @remix-run/v1-route-convention: https://www.npmjs.com/package/@remix-run/v1-route-convention - Plopix script: https://gist.github.com/Plopix/58fc3f3be202d9915c466e71077d36a2 - kiliman's flat routes library also has a migration script: https://github.com/kiliman/remix-flat-routes#-migrating-existing-routes - Simple bash script demonstrated in this video: https://gist.github.com/brookslybrand/53ecbcbad0fb7735aa763106536d4ed2

Dynamically generate OG:image using Remix 💿 — CanRau.com

How to dynamically generate OG:images using Remix resource routes, React JSX, TailwindCSS & Puppeteer