@remix-run/dev

What is @remix-run/dev?

@remix-run/dev is a development tool for building web applications using the Remix framework. It provides a set of utilities and commands to streamline the development process, including building, watching, and serving your application.

What are @remix-run/dev's main functionalities?

Build

The build feature compiles the client and server entry points into a production-ready build. This is useful for preparing your application for deployment.

const { build } = require('@remix-run/dev');

build({
  entryClientFile: 'src/entry.client.tsx',
  entryServerFile: 'src/entry.server.tsx',
  outputDir: 'build',
  publicPath: '/build/',
}).then(() => {
  console.log('Build completed!');
}).catch((error) => {
  console.error('Build failed:', error);
});

Watch

The watch feature monitors your source files for changes and automatically rebuilds the application. This is useful for development as it provides instant feedback on code changes.

const { watch } = require('@remix-run/dev');

watch({
  entryClientFile: 'src/entry.client.tsx',
  entryServerFile: 'src/entry.server.tsx',
  outputDir: 'build',
  publicPath: '/build/',
}).then(() => {
  console.log('Watching for changes...');
}).catch((error) => {
  console.error('Watch failed:', error);
});

Serve

The serve feature starts a local development server to serve your built application. This is useful for testing your application in a local environment.

const { serve } = require('@remix-run/dev');

serve({
  buildDir: 'build',
  port: 3000,
}).then(() => {
  console.log('Server is running on http://localhost:3000');
}).catch((error) => {
  console.error('Server failed to start:', error);
});

Other packages similar to @remix-run/dev

webpack

Webpack is a popular module bundler for JavaScript applications. It offers similar functionalities to @remix-run/dev, such as building, watching, and serving applications. However, Webpack is more general-purpose and can be used with various frameworks and libraries.

parcel

Parcel is a web application bundler that offers zero-configuration setup. It provides similar features to @remix-run/dev, including building, watching, and serving applications. Parcel is known for its ease of use and fast performance.

vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It offers similar functionalities to @remix-run/dev, such as building, watching, and serving applications. Vite is optimized for speed and efficiency, making it a strong alternative.

README

Welcome to Remix!

Remix is a web framework that helps you build better websites with React.

To get started, open a new shell and run:

npx create-remix@latest

Then follow the prompts you see in your terminal.

For more information about Remix, visit remix.run!

Changelog

v2.12.1

Date: 2024-09-19

Patch Changes

• @remix-run/dev - Properly abort request.signal during vite dev when the node response is closed (#9976)
• @remix-run/dev - CSS imports with ?inline, ?inline-css and ?raw are no longer incorrectly injected during SSR in development (#9910)
• @remix-run/server-runtime: Single Fetch: Fix types when loader, action, clientLoader, or clientAction return a mixture of bare objects, json(...), defer(...), and unstable_data(...). (#9999)
• @remix-run/node/@remix-run/cloudflare/@remix-run/deno - Single Fetch: Re-export interface Future through runtime packages so that pnpm doesn't complain about @remix-run/server-runtime not being a dependency (#9982)
  • If you've already opted into Single Fetch, you can change your Single Fetch type augmentation in vite.config.ts to augment @remix-run/node (or cloudflare/deno) instead of @remix-run/server-runtime

Changes by Package

• @remix-run/cloudflare
• @remix-run/deno
• @remix-run/dev
• @remix-run/node
• @remix-run/server-runtime

Full Changelog: v2.12.0...v2.12.1