Remix Webpack Demo

This is an example of using Webpack as the compiler for a Remix app. While not supported as a long-term solution, we offer this example as a migration path for your React Router / Webpack apps to Remix.

To migrate your Webpack-based React Router app, check out the migration guide. 👀

---

How this repo was made:

1. Create a new project with Create React App
2. 👉 Implement the React Router v6.4 tutorial
3. 🚚 Migrate to Remix
4. Replace standard Remix dev tools with Webpack-based compiler found in ./scripts

The commit history includes 👉 and 🚚 emojis so you can follow along with which commits came from which step.

Setup

1 Install

npm install

2 .env

Copy .env.example as .env:

DATABASE_URL="file:./dev.db"

3 Initialize the database

npx prisma db push

If you want some data for development, seed the database:

npx prisma db seed

4 Run the app

# development
npm run dev

# production build
npm run build
npm start

Configuration

Webpack configs can be found at:

• ./config.browser.ts
• ./config.server.ts

You can add loaders or plugins there to add support for any features you'd like from Webpack!

For example, you could install postcss-loader and add it to both the browser and server configs to get PostCSS features!