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

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

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

Roadmap #5

Learn more at https://remix.run

"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

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

Roadmap Planning #1

Learn more at https://remix.run

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.

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

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

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

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

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

Migrating a Rails & React SPA to Remix by Diogo Biazus

Maintaining a stack with multiple programming languages can drastically increase the cognitive load of a team. Unifying the frontend and the backend under a single language has always been a tantalizing prospect. With Remix this becomes an achievable goal, however, migrating without a big rewrite is always challenging, while migrating with a big rewrite is often disastrous. This is the story of how we are planning a migration feature by feature, using an integrated authentication system that works on both our Rails backend and on the Remix server. We also disastrous leveraged resource routes to proxy the old application and integrate everything under the same domain, making the back and forth between legacy and rewritten features seamless. Speaker bio: Diogo Biazus has been a software developer since the late 90s. Since then, he has also worked as an open-source contributor, conference organizer, PostgreSQL instructor and consultant, systems integrator (yay, EDI!), "the DevOps guy", and team lead. He has contributed to PostgREST (https://github.com/PostgREST/postgrest) and published PostgreSQL tools such as postgres-websockets (https://github.com/diogob/postgres-websockets), postgres-copy (https://github.com/diogob/postgres-copy), and hasql-notifications (https://github.com/diogob/hasql-notifications). He now focuses on improving DX at Seasoned. Diogo Biazus' GitHub: https://github.com/diogob Repo: https://github.com/SeasonedSoftware/remix-migration

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

Shipping to the Edge: Kent C Dodds

Recorded live at Reactathon 2022. Learn more at https://reactathon.com Shipping to the Edge The landscape of the web has evolved drastically since the first website was published to the World Wide Web in 1991. Over the years, the pendulum has swung from servers rendering HTML to JavaScript-heavy clients and now it's swinging toward something more in the middle.What about the web today is enabling us to overcome the shortcomings of the web of the past? In this talk, we'll get a little peak into the history of each of these stages of the web and what that means for anyone building on the web platform in the future. About 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 React. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

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

When To Fetch: Remixing React Router - Ryan Florence

Recorded live at Reactathon 2022. Learn more at https://reactathon.com When To Fetch: Remixing React Router We've learned that fetching in components is the quickest way to the worst UX. But it's not just the UX that suffers, the developer experience of fetching in components creates a lot of incidental complexity too: data fetching, data mutations, busy spinners, optimistic UI, error handling, form state, network race conditions, user event interruptions, and all the code that holds it together gets pretty difficult! As we've built Remix, we've gotten a lot of practice leaning on React Router's nested route abstraction to solve all of these problems all at once. Now, millions of React Router apps in production can get the same benefits because we've moved the responsibility of knowing When To Fetch into React Router itself! About Ryan Florence Ryan is the co-founder of Remix, co-creator of React Router, and co-founder of React Training. Event production and post-production by EventLoop. Let's build your conference brand, or take it to the next level. info@eventloop.app

Supabase Happy Hour #15 - Supabase File Storage in Remix

Supabase is an extremely powerful and cheap option for building your next big startup idea. In this series, Jon Meyers, Alaister Young and Tyler Shukert demonstrate how to build a SaaS product using Remix and Supabase 💰 This week we dive deep into Supabase File Storage and Remix. We build our own custom upload handler using the experimental `unstable_parseMultipartFormData`, `unstable_composeUploadHandlers` and `unstable_createMemoryUploadHandler` APIs, and define a relationship between our entries and their uploaded files, using the Array column type in PostgreSQL. 00:00 Starting soon 00:50 Introductions 03:17 Supabase Launch Week 10:49 Supabase Hackathon 23:43 Reviewing community PR 34:40 Uploading files in Remix Action 55:30 Array column type in PostgreSQL 01:03:26 Creating signed URLs for private files 01:32:38 Displaying signed URL images in UI 01:57:23 Social links 02:01:01 Thanks for watching GitHub Repo: https://github.com/dijonmusters/happy-days Wanna have a say in what we build? Join us live every Thursday 5pm PT / 8pm ET ⌚️ Follow the Supabase Happy Hour team 🙌 🦘 Jon Meyers: https://twitter.com/jonmeyers_io 🍣 Tyler Shukert: https://twitter.com/dshukertjr 🐨 Alaister: https://twitter.com/alaisteryoung Resources 🧠 Supabase Launch Week 5 - https://supabase.com/launch-week Supabase Hackathon - https://supabase.com/blog/launch-week-5-hackathon Supabase Gold Cap - https://store.supabase.com/products/gold-supacap Supabase File Storage docs - https://supabase.com/docs/guides/storage Remix Upload Handler docs - https://remix.run/docs/en/v1/api/remix#unstable_parsemultipartformdata Dashibase's Lotion - https://lotion.dashibase.com/ Happy Chat 💬 Did you miss us building out a multi-platform realtime chat app with Supabase, Next.js and Flutter? Check out this playlist 💯 https://www.youtube.com/watch?v=sOSrPDtvvaQ&list=PL5S4mPUpp4OvEgxBhoVxXb5YS1ZAZih2l --- Learn more about Supabase 👇 🕸 Website: https://supabase.com/ 🎥 YouTube Channel: https://www.youtube.com/c/supabase 🐦 Twitter: https://twitter.com/supabase/ 👾 Twitch: https://www.twitch.tv/supabase_tv 📄 Docs: https://supabase.com/docs ---

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

Purge Per Route by Brooks Lybrand

Love or hate Tailwind, one thing it gets right is only shipping the CSS _you_ use. However, you still have to ship your **entire** site's CSS, no matter how big it gets or what page the user is on. Love or hate Remix (wait, who hates Remix?), one thing it does best is only shipping the CSS each _page_ needs. Remix also removes stylesheets when you navigate away, which avoids clashing styles and class names. What if we could combine these two features? In this talk I will show you how to generate only the CSS _you_ use, while shipping no more CSS than each _page_ needs? Speaker bio: Hi, my name is Brooks Lybrand and I work as Web Engineer for the best grocery store in the world (okay, at least in Texas): H-E-B! I specialize in building proof of concepts, evaluating tools, and creating highly interactive, data-rich applications. I am passionate about exploring new ideas and technologies, discovering how they can better other's lives, and guiding people to these solutions. When I'm not coding, I love spending time with his wife and dogs, camping, playing board games, and pretending I know what I'm talking about when it comes to coffee and beer. Brooks Lybrand's Twitter: https://twitter.com/BrooksLybrand Repo: https://github.com/brookslybrand/purge-per-route Statechart representation of logic: https://stately.ai/registry/editor/105a41c2-1cd9-41a9-a27a-324c71bfb735

Create a Movie Emoji Quiz - Clerk, Fauna, Remix

Want to build this yourself? Check out the full tutorial here: https://clerk.dev/tutorials/build-movie-emoji-quiz-with-remix-fauna-and-clerk Looking for the FQL Snippets ? https://gist.github.com/devchampian/a11f4edb2cf26831a2c0bf369526be40 Tutorial code repo: https://github.com/clerkinc/remix-fauna-tutorial Tutorial live demo: https://remix-fauna-tutorial.clerk.app/ Sign up for a free Clerk account: https://dashboard.clerk.dev/sign-up 00:00 - Introduction 00:18 - Clerk Setup 01:15 - Code Setup 02:49 - Fauna Setup 05:27 - Clerk + Fauna JWT Integration 06:12 - Working Example 07:18 - Outro

Roadmap Planning #2

Learn more at https://remix.run

Server-Sent Events in Remix (feat. Moishi Netzer)

Moishi Netzer teaches Brooks how to implement server-sent events in Remix! Repo 👉 https://github.com/moishinetzer/remix-live-loader Server-sent events docs 👉 https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events Learn more about Moishi 👉 https://github.com/moishinetzer 00:00 - Introductions 02:44 - Walkthrough of the app 08:50 - Setting up server-sent events 27:18 - Adding multiple listeners 39:14 - Live Chat 52:40 - Final thoughts Learn more at https://remix.run

Remix Utah Meetup 2022-02-03

Learn more at https://remix.run

Remix Utah Meetup 2022-01-06

Learn more at https://remix.run Join discord: http://rmx.as/discord Join the meetup: http://rmx.as/meetup

Ali & Divya LIVE at Remix Conf! (JS Party live)

Remix Conf is May 24-25 and we're recording a live episode during the big after party! Join Ali Spittel, Divya, and a huge cast of Remix Conf speakers & attendees for a fun show about Remix and the web ecosystem! Chat in the #jsparty channel 👉  https://jsparty.fm/community

What is the edge? Lightning-fast e-commerce with Vendure & Remix at the edge

What is edge computing? And how can it help us create lightning-fast e-commerce experiences from anywhere in the world?

Contribute a Remix Example

Learn more at https://remix.run GitHub: https://github.com/remix-run/remix Join discord: https://rmx.as/discord

Roadmap Planning #3

Learn more at https://remix.run

Upload e Crop de Imagens com Remix JS e Easy Crop. Uso do Shadcn UI Bun com gerenciado de pacotes.

GitHub Repo: https://github.com/RemixJS-Brasil/remix-upload-cropimage Neste vídeo, mergulhamos em uma jornada de desenvolvimento web emocionante, onde exploramos como realizar o upload e o recorte de imagens com Remix JS e a eficiente biblioteca React Easy Crop. Além disso, vamos dar um toque visual de classe ao nosso projeto, utilizando os componentes do elegante Shadcn UI e otimizar nosso fluxo de trabalho com o gerenciamento de pacotes Bun. Prepare-se para aprender a criar uma experiência de usuário excepcional enquanto aprimoramos nossas habilidades de desenvolvimento web.

Build a Project Management App with Remix (with Chance Strickland) | Some Antics

Remix is a new tool for building and deploying fullstack React applications with a keen appreciation for the web's foundations, built by the team behind React Training — and it was just made open source! Come join us on Some Antics as Chance Strickland shows us how we can build a project management app using Remix. Broadcasted live on Twitch on December 21, 2021. Watch future streams live at https://www.twitch.tv/someanticsdev. Transcript and links at: https://someantics.dev/remix/ Starter code: https://github.com/remix-run/remix/tree/main/examples/pm-app #WebDev #ReactJS #RemixRun --- More From Chance: - Follow Chance on Twitter: https://twitter.com/chancethedev - Chance's Egghead course on React and TypeScript: https://egghead.io/courses/refactor-a-react-application-to-typescript-c70bffa0 Mentioned Links: - Remix docs: https://remix.run - PM2: https://www.npmjs.com/package/pm2 - On-Demand Hydration in Remix, by Sergio Xalambrí: https://sergiodxa.com/articles/on-demand-hydration-in-remix - Marcy Sutton's client-side routing user testing at Gatsby: https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/ - Join Remix's Discord server: https://rmx.as/discord - See Chance and Ben build an accessible tab component: https://someantics.dev/tabs-react/ --- 00:00:00 Introductions 00:04:48 What Even Is Remix? 00:07:35 An Aside About T-rexmas Apparel 00:08:44 The Root Route 00:20:00 The Index Route and Redirects 00:21:57 The Sign-In Route 00:25:51 Actions and Forms 00:33:33 The Register Route 00:38:31 Projects and Todo Lists 00:48:21 Fetchers and Optimistic UI 00:58:58 Displaying Nested Routes with Outlets 01:06:57 Creating New Todos with Fetchers 01:29:16 An Aside About Focus Management 01:32:27 Initializing and Deploying Remix Applications 01:36:47 Wrapping Up

Remix Tutorial with Kent

In this live stream, Kent will be going through the Remix tutorial and you can follow along. Join the discord #live-stream-chat channel to ask questions as we go. By the end of it, we'll have a full CRUD-based application with authentication and everything. Should be a good time! Make sure you have Node 16 installed on your computer before attending! GitHub Repo: https://github.com/kentcdodds/remix-tutorial-walkthrough Learn more at https://remix.run Join the discord at https://rmx.as/discord Timestamps (thanks Tejas Ahluwalia!): 00:00:00 Intro Music 00:00:35 Stream starts 00:03:37 About the tutorial 00:05:35 Let's start: Overview 00:10:58 Let's start: Outline & Prerequisites 00:14:30 Questions 00:17:27 Generating a new Remix Project 00:20:35 Exploring the structure 00:30:09 Questions 00:44:19 Routes 00:53:00 Questions 01:02:45 Parametrized Routes 01:04:20 BREAK 01:09:23 Questions 01:13:10 Styling 01:26:17 Alternate CSS methodologies 01:29:41 Questions 01:35:45 Database: Setting up 01:43:00 Questions 01:46:10 Database: Connecting to the DB 01:50:22 Questions 01:51:45 Database: Reading from the DB 01:58:50 Questions 02:00:39 Database: More data fetching 02:06:00 Questions 02:09:07 Database: Type safety and other stuff 02:19:25 BREAK 02:24:35 Mutations / Forms 02:32:56 Questions 02:34:00 Form Validation 02:43:30 Questions 02:47:40 Authentication 03:17:45 Questions 03:19:30 Authentication continued 03:31:30 Questions 03:35:10 Authentication continued 03:52:57 Questions

Introducing Remix v1 💿

Learn more at https://remix.run Sign up for our newsletter: https://remix.run/newsletter Join the Discord: https://discord.gg/remix

Deploy a Remix App to AWS in 2 minutes

Learn more at https://remix.run/stacks

Deploy a Remix App to Production in 2 minutes

Learn more at https://remix.run/stacks

Routing Patterns in Remix

Learn how to use dynamic routes, relative URLs, dot delimiters, and pathless layout routes in Remix!

How to Add Nested/Persistent Layouts in Remix

In this video take a previous demo I created showing how to add nested/persistent layouts in Next.js and show how to accomplish the same thing in Remix. You can find the original video here: https://www.youtube.com/watch?v=WOeLxL2DF3E&t=8s&ab_channel=ReactTipswithBrooksLybrand Code: https://github.com/brookslybrand/remix-nested-layouts Live Demo: https://remix-nested-layouts.vercel.app/

Remix React Fullstack Tutorial | Crash Course

Learn about Remix: the newest fullstack ReactJS framework from the creators of React Router! In this crash course we'll be build a new application from scratch and you'll get to learn all of the remix fundamentals including routing, loaders, actions, validation, navigation, mutations, and several other concepts! We'll also use tailwind css for styles, and explore a couple other tips and tricks. Code: https://github.com/mariusespejo/remix-ghibli Docs: https://remix.run/ 00:00:00 - Intro 00:00:19 - What we'll build (preview) 00:01:28 - Project setup 00:02:41 - Setup tailwindcss 00:05:34 - The meta function 00:07:17 - The links function 00:09:26 - Routing fundamentals 00:13:42 - Layout routes 00:16:20 - Dot delimiter (flat files) 00:17:33 - Dynamic paths 00:20:02 - Entry files 00:20:25 - Building the Films home page 00:23:39 - The loader function 00:34:18 - HTML Form GET 00:39:01 - Parsing URL search params 00:42:44 - Navigating between routes 00:46:06 - Parsing route params 00:48:54 - Prefetching 01:08:52 - Navlink 01:13:23 - Error Boundaries 01:16:30 - Catch Boundaries 01:30:06 - HTML Form POST (Mutations) 01:31:42 - The action function 01:36:05 - Pending states with useTransition 01:38:32 - Form Validation 01:44:18 - Route Module API summary 01:44:44 - Outro

Remix Single: Clearing Inputs After Form Submissions

After a form submission completes, you often want to clear out the form fields. You can `useTransition` to know when to reset the form. Learn more at https://remix.run

Live with Kent: Building Authentication with Postgres, Prisma, and Remix

"Deno and Remix" by Ryan Dahl at #RemixConf 💿

In this talk Ryan will give an overview of Deno, a modern JavaScript runtime, and Deno Deploy, a serverless at edge JavaScript hosting service. He'll give a peak behind the sceenes at the technology powering Deno Deploy, and of course demo how to deploy a Remix app on it. Speaker bio: In 2009, Ryan Dahl released Node.js. Now, Ryan is the CEO of Deno, the company behind the Deno project: A modern runtime for JavaScript and TypeScript. Deno's deploy product is pushing this runtime in the future of modern web architecture via multi-regional deploys with an outrageously fast runtime. Learn more at https://remix.run/conf/2022/speakers/ryan-dahl

Remix Single: Multiple Forms and Single Button Mutations

How to handle multiple forms in one route, and modeling mutations with a single button form. Learn more at https://remix.run

Remix.run V2 Full Stack Tutorial 2023 | Crash course

Welcome to the Remix.run V2 Full Stack Tutorial 2023 Crash course! In this exciting Crash course, we'll dive deep into the latest version of Remix.run, a cutting-edge framework for building full stack JavaScript applications. 👨🏻‍💻Github Repository: https://github.com/ski043/remix-tutorial-yt 👨🏻‍💻 Ressources used: Remix.run: https://remix.run/ Tailwind.css: https://tailwindcss.com/ Timestamps 00:00 Intro 00:25 Demo 01:35 Initial Setup 07:00 Dark Mode Setup 17:00 Coding Application 50:30 Hygraph Setup 56:00 Coding Application 01:38:06 Deployment @TailwindLabs @Remix-Run #tailwindcss #remix