Full Stack Web Development with Remix
This is the code repository for Full Stack Web Development with Remix, published by Packt.
Enhance the user experience and build better React apps by utilizing the web platform
What is this book about?
We’re in an exciting era of web development marked by the rapid evolution of the JavaScript ecosystem. Remix offers the necessary abstractions to take advantage of the latest advancements in React and beyond. With this Remix book, you can elevate your skills from React development to full stack web development, unlocking the full potential of the latest technologies, such as edge functions, streaming, and the full stack of the web platform.
This book covers the following exciting features:
- Understand Remix’s philosophy and guiding principles.
- Enhance your web platform proficiency to make it applicable anywhere.
- Master data mutations, routing, error handling, and state management with Remix.
- Understand how to build web apps with accessibility and progressive enhancement in mind.
- Get acquainted with advanced topics such as caching strategies, optimistic UI, and real-time communication.
- Work with state-of-the-art technologies such as React Suspense and edge functions .
- Study migration patterns to move an existing project to Remix.
If you feel this book is for you, get your copy today!
<img src="https://raw.githubusercontent.com/PacktPublishing/GitHub/master/GitHub.png" alt="https://www.packtpub.com/" border="5" />
Who is this book for?
This book is for React developers looking to adopt Remix for their next project. For those considering migrating to Remix, this guide offers a comprehensive walkthrough of building a full stack web app. To make the most of this book, beginner-level development experience with React and JavaScript is recommended. While having basic knowledge of server-side runtimes such as Node.js and experience with TypeScript can be beneficial, they are not mandatory prerequisites.
Technical requirements
To follow along, you will need a computer that can run Node.js. All common operation systems should suffice. Please install both Node.js (version 18 or higher) and npm on your machine. An editor such as VS Code is recommended.
You can download Node.js and npm here: https://nodejs.org/en/download/.
How to approach the content of the book?
We recommend having both a text editor and a terminal open while reading through each chapter. Follow the instructions in the text and try to reproduce the steps on your own machine. If you get stuck, you can always refer to the solutions in this repository.
Structure
The code for each chapter can be found in the corresponding folder. For example, 02-creating-a-new-remix-app contains the code for Chapter 2, Creating a new Remix App. Each chapter of the book provides instructions for how to get started and how to incrementally reach the final code of the chapter.
Getting started with Remix
- The Era of Full Stack Web Frameworks
- Creating a New Remix App
- Deployment Targets, Adapters, and Stacks
- Routing in Remix
Working with Remix and the web platform
- Fetching and Mutating Data
- Enhancing the User Experience
- Error Handling in Remix
- Session Management
- Assets and Metadata Handling
- Working with File Uploads
Advanced topics of full stack web development with Remix
- Optimistic UI
- Caching Strategies
- Deferring Loader Data
- Real-Time with Remix
- Advanced Session Management
- Developing for the Edge
- Migration and Upgrade Strategies
BeeRich
BeeRich is a dashboard-like application that mimics both personal and enterprise use cases. BeeRich is a personal finance management application that helps you stay on top of your bee - pardon me - bookkeeping. Well, at least that’s the goal. In every chapter, we will add more code to this application.
We kick off the BeeRich development journey in Chapter 3, Deployment Targets, Adapters, and Stacks. You can find the BeeRich Remix template here.
Troubleshooting and FAQ
Are you stuck, have a question, or want to report a bug? Please check for open issues or open an issue in this repository. Plus, check out the FAQs below for quick answers.
Why do some links in the book point to a outdated version of the Remix documentation?
Remix and its documentation are constantly evolving. Similarly to pinning code dependencies to specific versions to avoid unexpected breaking changes in code, we pin the links in the book to specific versions of the Remix documentation. Most links point to the latest version of the Remix documentation for v2 (/2/). Other links are pinned to a specific version (e.g., /2.0.0/, /v1/), for instance, if the content is likely to change in the future or not part of the latest version of the docs. Even though the links may seem outdated, we ensure all referenced content is relevant to the current version of Remix and your learning experience.
As always, you get the most out of the content of this book if you do additional research. Read through the referenced content of the documentation and then explore the latest version of the docs, as well. The more you familiarize yourself with the Remix documentation the better!
Application Error! How do I fix it?
If you see an Application Error while running the application, it is most likely that you missed a step in the instructions. Refer to the troubleshooting section in Chapter 2, Creating a new Remix App, for a step-by-step guide on how to debug issues in Remix. As always, read carefully through the error message and the stack trace to find the root cause of the issue.
Error: Environment variable not found: DATABASE_URL
- Make sure to add an
.envfile to the root of your project. Refer to theREADME.mdfile of your current chapter. The Run the application section contains the required environment variables for the application to run. - Restart your application after adding the
.envfile by runningnpm run dev. Environment variables are only loaded when the application starts.
Related products
- Building Micro Frontends with React 18 [Packt] [Amazon]
- React 18 Design Patterns and Best Practices, 4e [Packt] [Amazon]
Get to Know the Author
Andre Landgraf is a full stack developer from Germany. He graduated with an MS in Information Systems from the Technical University of Munich and was also awarded an MS in Computer Science from Sofia University in Palo Alto. Andre currently lives in Cupertino, California, and he works as a Software Engineer at LinkedIn. Andre loves learning, writing, and speaking about all things web. In his free time, he tutors aspiring developers and builds for the web.