Migration and Upgrade Strategies

Throughout this book, we’ve explored many aspects of web development with Remix. You learned how to use Remix to unlock the full potential of the web platform, and you thoroughly practiced developing full stack applications by building BeeRich. In this last chapter, we will talk about migration and upgrade strategies.

The chapter is split into two sections:

• Migrating to Remix
• Keeping Remix apps up to date

First, we will discuss how to migrate to Remix. Different applications may require different migration strategies with varying efforts. We will look at non-React, React, and React Router apps and create a migration strategy for each. Next, we will learn how major version upgrades are rolled out in Remix. We will introduce you to Remix’s future flags and discuss how future flags enable us to gradually upgrade Remix apps.

After reading this chapter, you will know different migration strategies for Remix. You will...

Migrating to Remix

Migrations are never easy. Moving an existing code base to a new framework comes with difficulties and may involve a lot of refactoring. Remix is no exception, but some strategies may make a migration less painful, depending on the existing application architecture. In this section, we will discuss different migration strategies for Remix. Let’s start by reviewing a migration from a non-React app.

Migrating non-React apps to Remix

Migrating from a non-React app to Remix is a challenging task and may be very time-consuming, depending on the size of the existing application. The complexity of a migration usually increases with ongoing feature development. Most of the time, we may be unable to freeze feature development and bug fixes while migrating. This results in having to migrate existing code and features to Remix while also having to implement new features in both the old and new applications.

One solution may be to run the new and old applications...

Keeping Remix apps up to date

Remix, like every framework, undergoes constant maintenance and development. Bigger updates are introduced as major releases that can include breaking changes. Upgrading to a newer major version can require refactoring, and especially for bigger applications, this can be a painful chore. Remix aims to make upgrading to major versions as painless as possible. In this section, we will see how we can gradually migrate to newer major versions in Remix.

Like most open source projects, Remix uses semantic versioning to denote its patches and updates. Semantic versioning provides a way to document three different kinds of changes in a definitive hierarchy:

1. 2.x.x: Changes that increment the first digit are major releases that include breaking changes
2. x.1.x: Changes incrementing the middle digit are minor releases that introduce new features but remain backward-compatible
3. x.x.1: Changes that increment the last digit are bug fixes and dependency...

Summary

In this chapter, we discussed different migration strategies for Remix. You learned strategies to migrate a non-React, React, and React Router application to Remix.

For bigger migrations, you can run the new Remix app and the old legacy application side by side in production. You can build new pages in Remix while incrementally moving features from the old application to Remix. Using a subdomain for your new Remix app, you can share UI state using cookies.

You now understand that React Router and Remix use the same baseline routing implementation. Thus, migration from React Router applications to Remix is easier, as you can incrementally prepare your React Router app by taking advantage of the shared primitives and conventions. This allows you to reuse much of the code between a React Router and Remix app without further refactoring.

After reading this chapter, you now understand how to use Remix as a BFF to forward and orchestrate requests to downstream services....

Further reading

The Remix documentation includes a guide on how to migrate from React Router to Remix: https://remix.run/docs/en/main/guides/migrating-react-router-app.

The Remix documentation further includes an article by Pedro Cattori that documents how to migrate from webpack to Remix: https://remix.run/blog/migrate-from-webpack.

Refer to Remix’s release log to stay up to date with Remix’s releases: https://github.com/remix-run/remix/releases.

Sergio Xalambrí wrote an article on how to run Next.js side by side with Remix for an incremental migration: https://sergiodxa.com/articles/run-next-and-remix-on-the-same-server.

You can find Remix’s roadmap on GitHub: https://github.com/orgs/remix-run/projects/5. You can also find roadmap planning meetings on YouTube: https://www.youtube.com/c/Remix-Run/videos.

You can find more information about semantic versioning here: https://semver.org/.

Learn more about Remix’s future flag approach...