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

Рет қаралды 2,662

Күн бұрын

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:
Github Repo link: github.com/AlemTuzlak/remix-e...
Remix Documentation: remix.run/docs/en/main
Vite Documentation: vitejs.dev/
Remix Development Tools: github.com/Code-Forge-Net/Rem...
👍 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: / alemtuzlak59192
GitHub: 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

Пікірлер: 28

@dquangvn1467 24 күн бұрын

Amazing pipipipi!

@alemtuzlak 23 күн бұрын

Thank you!

@codernerd7076 4 ай бұрын

Yeah great new series!

@alemtuzlak 4 ай бұрын

Thank you! Will be a blast to record!

@planetmall2 4 ай бұрын

Great video. Thank you

@alemtuzlak 4 ай бұрын

Thank you!

@user-lt8fj8ef9n 4 ай бұрын

Great video!

@alemtuzlak 4 ай бұрын

Thank you!

@eleah2665 4 ай бұрын

Cool. Thanks.

@alemtuzlak 4 ай бұрын

Thank you for watching 😊

@vVolodka 4 ай бұрын

Thank you, Alem, great work! Would love to see auth implementation using remix-totp

@alemtuzlak 4 ай бұрын

Will be done in one of the later parts!

@OvidiuIspas 4 ай бұрын

Awesome video! My only preference is to use pnpm instead of npm (has more mature workspaces features, you don’t have to add “run” to every command, has built-in interactive dependency updates and if you have a lot of projects locally, you save quite a lot of disk space). That being said it’s pretty subjective and for local development shouldn’t make much of a difference. The github actions deploy scripts would differ tho based on the chosen package manager)

@alemtuzlak 4 ай бұрын

I actually never tried pnpm on projects, I could give it a go on this one. Although it's hard for me to switch away from npm due to the fact it's really easy to setup, but might even go for bun 🤔

@rodolphobravo298 4 ай бұрын

Great content, Alem! Could you please show us how to implement internationalization with Remix (with Vite), I couldn't find any examples...

@alemtuzlak 4 ай бұрын

Yes I can, will be doing that in the upcoming videos, part 2 I've already recorded so will be dropping that in part 3 probably

@rodolphobravo298 4 ай бұрын

@@alemtuzlak awesome!!! 👏

@tristianchung8383 3 ай бұрын

hi alem, as you have mentioned vite is a server and remix is a request handler, what if i deploy my remix app to aws, aws or vite will be the server? is this the correct flow, user request -> aws -> vite -> remix -> vite -> aws -> browser

@alemtuzlak 3 ай бұрын

Correct, although when it gets bundled it will be served with the remix-serve command by default so it would go aws -> node server -> remix -> node server -> node server so you woul probably need to provide a serverless alternative here, depending obviously if you're running it on an aws serverless env or nor

@radandevist4168 4 ай бұрын

I have succcesfully managed to get up and running a remix application within a monorepo using @mui/material in dev mode but not yet able to run the production build.

@alemtuzlak 4 ай бұрын

MUI has big issues with Remix because it relies on emotion, I wouldn't recommend it as the go to library for components

@ronreyes1294 4 ай бұрын

I've followed the video however I've encountered an issue where hmr is not working. I've got a message "hmr invalidate /app/root.tsx?client-route Could not Fast Refresh", even after installing react-refresh the hmr is still not working.

@alemtuzlak 4 ай бұрын

This is due to a bug with Remix I believe, should be gone with the next version, hmr is working but logs a false warning from what I understood

@6qat 4 ай бұрын

I would change Tailwind for PandaCSS.

@alemtuzlak 4 ай бұрын

I am a big fan of TailwindCSS and I personally always hated CSS-in-JS solutions. PandaCSS does look like the best alternative, maybe second only to lightningCSS. Have you looked into that? Wonder what you thought about it?

@6qat 4 ай бұрын

@@alemtuzlak You can just set lightningcss: yes in Panda to use it as the parser :)

@alemtuzlak 4 ай бұрын

@@6qat I didn't know that, pretty cool!