Full Stack Web Development with Remix, published by Packt

License: MIT License

TypeScript 91.80% JavaScript 7.81% Shell 0.16% Dockerfile 0.13% CSS 0.10%

full-stack-web-development-with-remix's Introduction

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!

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

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 .env file to the root of your project. Refer to the README.md file 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 .env file by running npm run dev. Environment variables are only loaded when the application starts.

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.

You can find Andre on Twitter and on LinkedIn.

full-stack-web-development-with-remix's People

Contributors

Stargazers

Watchers

full-stack-web-development-with-remix's Issues

PrismaClientKnownRequest Error in chapter 8.

I keep getting errors when running the seed for the databse. It had been a problem in past chapters but it managed to work but now i keep getting the message Unique constraints failed on fields: (email) and invalid db.user.create() on line 152. I did not change anything but keep getting an error. I've checked everywhere but i don't know why it fails.

This is what i get in terminal.
code: 'P2002',
clientVersion: '5.7.1',
meta: { modelName: 'User', target: [ 'email' ] }

Deferring expense logs loader data not working when navigating expense detail pages.

Describe the bug

Deferring expense logs loader data does not work when navigating between expense detail pages.

To Reproduce

Steps to reproduce the behavior:

Finish chapter 13.
Delay (setTimeout) the expenseLogs database query for better visibility (see p. 247).
Use the expense overview page (expenses list) to navigate between different expense details pages.
Notice that the navigation to the expense details page only happens after the expenseLogs data is fetched, not deferring the expenseLogs fetch request.

Expected behavior

When navigating between expense details pages, the navigation should happen after the expense is fetched, but should not await the expenseLogs promise. Instead, it should render the expense details page and show the fallback loading indication for the expenseLogs section.

Actual behavior

The navigation only happens after the expenseLogs promise resolves, not deferring the promise.

Additional context

When navigating from any other page to an expense details page (e.g., the income routes) or when performing a full-page reload, the deferring of the loader data works as expected. The bug only occurs when navigating between detail pages.

Chapter: 13 Deferring Loader Data
Explanation from the Remix team: remix-run/remix#8256

Selecting an item after querying resets the query result

Question

Hi, I'm currently on Chapter 8 reading so I apologize in advance if this has already been addressed in later chapters, but I thought to share a fix for a potential issue. I noticed that when one queries in the search input box and selects a result, the list resets back to the state where no queries were performed. I think that there needs to be an update to the ListLinkItem in dashboard.expenses.tsx like so (also for income):

<ListLinkItem
  key={expense.id}
- to={`/dashboard/expenses/${expense.id}`}
+ to={
+ searchQuery ? 
+   `/dashboard/expenses/${expense.id}?q=${searchQuery}`
+   : `/dashboard/expenses/${expense.id}`
+ }
   isActive={expense.id === id}
   deleteProps={{
     ariaLabel: `Delete ${expense.title} expense`,
     action: `/dashboard/expenses/${expense.id}`,
  }}>

I'm writing this as a question since I'm new to Remix and I don't know its best practices yet. 😅

By the way, it's a great read so far. Thank you!

Context

Chapter: 8
Page: 148 - 152
https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/08-session-management/bee-rich/solution/app/routes/dashboard.expenses.tsx#L50
seems to be the same in future chapters:
https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/15-advanced-session-management/bee-rich/solution/app/routes/dashboard.expenses.tsx#L67

BeeRich remix.init script fails

Describe the bug

BeeRich's remix.init script fails due to an ESM error.

Actual behavior

create-remix fails to execute the init script:

  init   This template has a remix.init script. Do you want to run it?
         Yes

      ✔  Dependencies installed

      ✔  Git initialized

      ◼  Running template's remix.init script... 


      ▲  Oh no! Template's remix.init script failed

Expected behavior

Hey there! Great job practicing using a custom stack! You're doing great! should be logged to the console when running:

npx create-remix@2 --template <bee-rich GitHub URL> to bootstrap the application
npx remix init in the root of the BeeRich project after bootstrapping the application

Failed to seed local database with node version >= 20

Describe the bug

BeeRich's npm run seed script fails while using node version >= 20

To Reproduce

Steps to reproduce the behavior:

If using nvm, switch to node version 20 or greater
Clone the repository
Navigate to 05-fetching-and-mutating-data/bee-rich/start
Follow the setup instructions
The npm run seed script throws a TypeError

Expected behavior

Using node version 19

➜  start git:(main) node -v
v19.6.0
➜  start git:(main) npm run seed

> seed
> npx ts-node --esm prisma/seed.ts

🌱 Seeding the database...
🚀 Seeded the database. Done in 295ms

Actual behavior

Using node version >=20

➜  start git:(main) node -v
v20.10.0
➜  start git:(main) npm run seed

> seed
> npx ts-node --esm prisma/seed.ts

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/bart/Documents/Projects/Full-Stack-Web-Development-with-Remix/05-fetching-and-mutating-data/bee-rich/start/prisma/seed.ts
    at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:160:9)
    at defaultGetFormat (node:internal/modules/esm/get_format:203:36)
    at defaultLoad (node:internal/modules/esm/load:141:22)
    at async nextLoad (node:internal/modules/esm/hooks:865:22)
    at async nextLoad (node:internal/modules/esm/hooks:865:22)
    at async Hooks.load (node:internal/modules/esm/hooks:448:20)
    at async MessagePort.handleMessage (node:internal/modules/esm/worker:196:18) {
  code: 'ERR_UNKNOWN_FILE_EXTENSION'
}

Screenshots

Actual

Expected

Environment (if applicable):

OS: M2 Mac IOS
Node version: >=20.10.0

Additional context

Chapter: 5
Page: 84
Link to relevant README/code: https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/blob/main/05-fetching-and-mutating-data/bee-rich/start/README.md

Minor typographical changes

Page: [100] #7 - export async function action({ request }: ActionArgs) --> "ActionFunctionArgs"
Page: [110] #8 - dashboard.expenses.index.tsx --> dashboard.expenses._index.tsx

[email protected] adds `routes/_index.tsx` to templates even if they already have a `routes/_layout._index.tsx` file

Describe the bug

When using create-remix@latest to check out a later version of BeeRich that comes with a routes/_layout._index.tsx file, then create-remix adds a default _index.tsx file to the project code.

This leads to a build error:

⚠️ Route Path Collision: "/"

The following routes all define the same URL, only the first one will be used

🟢 routes/_layout._index.tsx
⭕️️ routes/_index.tsx

Fix/Workaround

There is an easy fix! Just delete the _index.tsx file from the project before diving into the code! :)

To Reproduce

Steps to reproduce the behavior:

Run npx create-remix@latest --template https://github.com/PacktPublishing/Full-Stack-Web-Development-with-Remix/tree/main/15-advanced-session-management/bee-rich/solution with a later version of BeeRich
Follow the prompts in the terminal
Open the BeeRich project in a file explorer and notice the added routes/_index.tsx file

Expected behavior

No _index.tsx file is added.

Actual behavior

Remix's default _index.tsx file is added to the BeeRich project code.

packtpublishing / full-stack-web-development-with-remix Goto Github PK

full-stack-web-development-with-remix's Introduction

Full Stack Web Development with Remix

What is this book about?

Who is this book for?

Technical requirements

How to approach the content of the book?

Structure

Getting started with Remix

Working with Remix and the web platform

Advanced topics of full stack web development with Remix

BeeRich

Troubleshooting and FAQ

Why do some links in the book point to a outdated version of the Remix documentation?

Application Error! How do I fix it?

Error: Environment variable not found: DATABASE_URL

Related products

Get to Know the Author

full-stack-web-development-with-remix's People

Contributors

Stargazers

Watchers

Forkers

full-stack-web-development-with-remix's Issues

Recommend Projects

Recommend Topics

Recommend Org