Understanding the Steps of Migrating Your Remix App to Vite.js

Remix 2.7 introduced official Vite support, making it ideal to migrate our Remix Apps to Vite. In today's episode, we'll step by step migrate a base Remix App to Vite. 00:00 Introduction 00:14 Step 1: Setup Vite 00:40 Step 2: HMR & HDR 00:58 Step 3: TypeScript Integration 01:26 Step 4: Migrating Remix App Server 02:00 Step 5: Path Aliases 02:26 Step 6: Remove @remix-run/css-bundle 03:00 Step 7: Enabling TailwindCSS 03:24 App Migration (Remix + Vite)

saas-kits/remix-boilerplate

SaaSKits is a SaaS boilerplate built with Remix, Stripe, Prisma and Resend to help you bootstrap your SaaS idea quickly.

jacob-ebey/remix-electron-llamafile

Chat with LLMs locally utilizing llamafile as the underlying model executor.

edmundhung/remix-cloudflare-template

📜 All-in-one remix starter template for Cloudflare Pages

Project Setup with Remix and Vite | Remix Done Right: Part 1

Remix Done Right Series - Part 1: Project Setup with Remix and Vite Welcome to the first installment of our "Remix Done Right" series! In this episode, we dive into the essential steps of setting up the foundation for our Remix app using Vite. Get ready to embark on a journey of creativity and coding as we create a powerful remix application from scratch. 🛠️ What You'll Learn in Part 1: Project Setup: We guide you through the process of setting up a basic project structure using Remix and Vite, ensuring a solid foundation for your app. Remix Development Tools Installation: Learn how to install and configure Remix development tools to streamline your workflow and enhance the development experience. Plugin Integration: Discover the power of plugins as we add some essential ones to supercharge your Remix app development. Tailwindcss: Learn how to install tailwindcss in Remix and use it to style your projects. 🚀 Get Ready to Remix: Follow along and code with me as we lay the groundwork for an exciting and feature-rich Remix application. Whether you're a seasoned developer or just starting, this series is designed to be beginner-friendly and packed with valuable insights. 🔗 Resources and Links: Remix Documentation: https://remix.run/docs/en/main Vite Documentation: https://vitejs.dev/ Remix Development Tools: https://github.com/Code-Forge-Net/Remix-Dev-Tools 👍 Don't forget to like, comment, and subscribe for more episodes in this series! Join our coding community and let's build something amazing together. 📌 Stay Connected: Twitter: https://twitter.com/AlemTuzlak59192 GitHub: https://github.com/AlemTuzlak ⏱️ Timestamps: 00:00 - Intro 01:23 - Installing a fresh Remix.run project 01:52 - Remix Vite vs old Remix bundler rant 04:12 - Initialing the project 05:02 - Going over what we initialized 05:33 - Modifing our Vite config & adding remix-development-tools 06:54 - tsconfig.json overview 08:49 - Looking at our application with remix dev tools 09:31 - Adding tailwindcss to the project 12:08 - Overview of app with tailwind 12:29 - Adding remix dev tools plugins 14:32 - Our first plugin overview 15:40 - Adding the icons plugin 16:58 - Outro & info on the part 2

rajeshdavidbabu/remix-supabase-social

A community driven social networking app built using Remix and Supabase

kiliman/remix-vite-template

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

remix-development-tools

Remix development tools.

manawiki/repay

Remix + PayloadCMS

Create a Full Stack Realtime Chat Messaging App with Remix.run

Join me in this exciting coding tutorial as we dive into the world of full stack development! In this video, we'll be creating a feature-rich chat messaging application using Remix.run using the power of Server-Sent Events. 👨🏻‍💻Github Repository: https://github.com/ski043/remix-chat-yt 👨🏻‍💻 Ressources used: Remix.run: https://remix.run/ Tailwind.css: https://tailwindcss.com/ Remix-Auth docs: https://remix-docs-flame.vercel.app/ Timestamps 00:00 Intro 00:25 Demo 01:05 Installation 09:00 Setup Prisma 15:10 Coding Application @Remix-Run @TailwindLabs #tailwindcss #react

AlexandroMtzG/saasrock-kb

Knowledge Base starter kit with WYSIWYG, Markdown, GPT, and Multi-language support. Built with Remix, Tailwind CSS and Prisma.

AlexandroMtzG/novel-remix

Remix Edition - Notion-style WYSIWYG editor with AI-powered autocompletion.

L-Steinmacher/epic-stack-with-prisma-client-extensions

Example Remix application to show how to use Prisma Client extensions and setting up enums with Prisma The Epic Stack.

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

Create a Personal Website / Blog using Remix.run, Tailwind.css, Hygraph and GraphQL

Welcome to my latest YouTube tutorial on creating a personal website with a blog using the powerful combination of Remix.run, Tailwind.css, Hygraph, and GraphQL! 🚀 In this step-by-step guide, I will walk you through the process of building an impressive personal website that showcases your unique skills while incorporating a dynamic blog. Harnessing the cutting-edge technologies of Remix.run, Tailwind.css, Hygraph, and GraphQL, you'll learn how to create a stunning online presence that leaves a lasting impression. 👨🏻‍💻Github Repository: https://github.com/ski043/personal-website 👨🏻‍💻 Ressources used: Tailwind.css: https://tailwindcss.com/ Remix.run: https://remix.run/ graphql-request: https://www.npmjs.com/package/graphql-request Headlessui: https://headlessui.com/ remix-themes: https://github.com/abereghici/remix-themes 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 ​@Hygraph @TailwindLabs @Remix-Run #tailwindcss #remix

epicweb-dev/epic-stack

This is a Full Stack app starter with the foundational things setup and configured for you to hit the ground running on your next EPIC idea.

jose-donato/race-stack

Remix run stack built for the edge (cloudflare pages and d1)

dalmaer/postgres-remix

A simple Remix app with Vercel Postgres as the database

itsMapleLeaf/remix-deno-modern

rajeshbabu-oviva/remix-mdx-blog

A simple blog built with remix and mdx

jacob-ebey/remix-d1-northwind

Northwind Traders implemented on Remix + CF Pages + D1

colbywhite/acoustic-stack

This is a minimal Remix stack to serve as a starting point for demos and debugging.

remix-run/react-router-website

The React Router website

jacob-ebey/remix-dashboard-d1

jacob-ebey/remix-dashboard-template

A template to get you up and building a dashboard in Remix.