JSPM

Next generation full stack framework and build system together. Build better websites with Remix and Nx.

Nx makes supercharges your builds, and the optional Nx Cloud provide out-of-the-box distributed caching, distributed task execution, and valuable workspace insights.

Creating new Remix workspace

Use --project=@nrwl/remix when creating new workspace.

e.g.

npx create-nx-workspace@latest acme \
--preset=@nrwl/remix \
--project=demo

Now, you can go into the acme folder and start development.

cd acme
npx nx dev demo

Note: This command runs the dev script in apps/demo/package.json.

You can also run nx build demo and nx start demo.

Existing workspaces

You can add Remix to any existing Nx workspace.

First, install the plugin:

npm install --save-dev @nrwl/remix

# Or with yarn
yarn add -D @nrwl/remix

Then, run the setup generator:

npx nx g @nrwl/remix:setup

You can then add your first app and run it:

npx nx g @nrwl/remix:app demo

Workspace libraries

The Remix setup leverages npm/yarn/pnpm workspaces and Nx buildable libraries.

npx nx g @nrwl/remix:lib mylib

Import the new library in your app.

// apps/demo/app/root.tsx
import { Mylib } from '@acme/mylib';

// ...

export default function App() {
  return (
    <Document>
      <Layout>
        <Mylib />
        <Outlet />
      </Layout>
    </Document>
  );
}

Now, run the dev server again to see the new library in action.

npx nx dev demo

Note: You must restart the server if you make any changes to your library. Luckily, with Nx cache this operation should be super fast.

Contributing

Running unit tests

Run nx test nx-remix to execute the unit tests via Jest.

Publishing

nx publish nx-remix --ver=[version]