React Router

Learn how to deploy your React Router v7 (formerly Remix) project to your own cloud infrastructure with Ownstak.

Prerequisites

• An Ownstak account with a fully set up organization
• A React Router v7 project (version 7.x.x)
• Node.js installed locally (version 18.x or higher)

Getting Started

1. Prepare your React Router project

Create a new React Router v7 project by running:

npm create react-router@latest

Once the wizard finishes, enter the project directory and install all dependencies:

cd your-react-router-project
npm install

note

For existing projects, remove any provider-specific dependencies, such as @react-router/cloudflare, from vite.config.js and install generic @react-router/node together with @react-router/dev.

2. Configure your project

Create a new react-router.config.js file in your project root if it doesn't exist:

react-router.config.js

import type { Config } from "@react-router/dev/config";

export default {
  ssr: true,
} satisfies Config;

3. Deploy from your machine

Now, you can deploy the project from your machine by running:

npx ownstak deploy

When you run the deploy command for the first time, the CLI will detect the currently used framework and guide you through the login and project configuration setup. Simply follow the instructions:

The organization and project names are stored in the ownstak.config.js configuration file for subsequent deployments, so you won't be prompted for this information again.

4. Deploy from CI

For CI and other non-persistent environments, you can skip the interactive deployment by providing the API key and other required options as command arguments. You can generate a new API key for your account or project in the Ownstak Console under Settings > API Keys.

npx ownstak deploy --api-key=<your-secret-key> --organization=ownstak --project=ownstak-react-router --environment=default

5. Done!

Your project is now live and deployed to your organization's cloud infrastructure. You can visit and test it using the environment and deployment links provided in the output:

• Environment link – Always points to the latest deployment in a given project environment Example: my-react-router-app-development.aws-primary.my-org.ownstak.link
• Deployment link – Always points to a specific deployment Example: my-react-router-app-development-10.aws-primary.my-org.ownstak.link

Local testing

If your project doesn't behave as expected, you can build and test it locally before deploying.

1. Build the project

Run the following command in your project directory to build your project without deploying it:

npx ownstak build

2. Start the project

Start the project and make sure it works for you locally with Ownstak:

npx ownstak start

When you see the ready message, you can visit `

Custom Express server

OwnStak runs React Router projects with a preconfigured HTTP server by default. If you would like to run React Router with Express or any other custom server, you can provide a custom entrypoint file. Here's how:

1. Install @react-router/express

npm i @react-router/express express

2. Create custom server file

Create your custom server entrypoint file server.mjs in the root of your project that imports the React Router build output. Here's an example:

server.mjs

import { dirname, join } from 'path';
import { fileURLToPath } from 'url';
import { createRequestHandler } from "@react-router/express";
import express from "express";

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

const PORT = Number(process.env.PORT || 3000);
const HOST = process.env.HOST || '0.0.0.0';

const app = express();

app.use(
  createRequestHandler({
    // The relative path to the build output
    build: await import(join(__dirname, "build/index.js")),
  }),
);

app.listen(PORT, HOST, () => {
  console.log(`Server is running on http://${HOST}:${PORT}`);
});

3. Update the OwnStak config

Update the default entrypoint for React Router in your ownstak.config.js file with your Express server by calling setAppEntrypoint("./server.mjs") option and tell the OwnStak to trace and copy all the dependencies by calling setCopyAppDependencies(true).

ownstak.config.js

import { Config } from 'ownstak';

export default new Config()
  .setAppEntrypoint("./server.mjs")
  .setCopyAppDependencies(true)

4. Build OwnStak

npx ownstak build

5. Test changes locally

npx ownstak start

6. Done

The project is ready to be deployed!