This guide shows how to deploy a React Router app (formerly Remix).

To do so, follow these steps:

1. Install the CLI. Use the unikraft CLI or the legacy kraft CLI. You need a BuildKit builder. The easiest way to get one is via Docker. Alternatively, you can also directly set up and use BuildKit, see the quick start.

   Note: The unikraft CLI is the current standard, while kraft is the legacy version. Choose one of the CLIs below and only run the commands associated with it for the rest of this guide.

2. Clone the examples repository and cd into the examples/httpserver-node22-react-router/ directory:

   git clone https://github.com/unikraft-cloud/examples
   cd examples/httpserver-node22-react-router/

Make sure to log into Unikraft Cloud and pick a metro close to you. This guide uses fra (Frankfurt, 🇩🇪):

Using the unikraft CLI (Recommended)

unikraft login

or

Using the legacy kraft CLI

# Set Unikraft Cloud access token
export UKC_TOKEN=token
# Set metro to Frankfurt, DE
export UKC_METRO=fra

When done, invoke the following command to deploy this app on Unikraft Cloud:

Using the unikraft CLI (Recommended)

unikraft build . --output <my-org>/httpserver-node22-react-router:latest
unikraft run --metro fra \
  -m 768M \
  -p 443:3000/tls+http \
  --scale-to-zero policy=on,cooldown-time=1000 \
  --image <my-org>/httpserver-node22-react-router:latest

or

Using the legacy kraft CLI

kraft cloud deploy \
  -M 768Mi \
  -p 443:3000/tls+http \
  --scale-to-zero on \
  --scale-to-zero-cooldown 1s \
  .

The output shows the instance address and other details:

Using the unikraft CLI (Recommended)

metro:        fra
name:         httpserver-node22-react-router-jvj6b
uuid:         4e6ccb1f-0533-4dc1-be67-eca8dfc1f8c6
state:        starting
image:        <my-org>/httpserver-node22-react-router
resources:
  memory:     768MiB
  vcpus:      1
service:
  uuid:       46865b94-fd59-7d38-485d-c110a41b0949
  name:       long-star-1tms9h1z
  domains:
  - fqdn:     long-star-1tms9h1z.fra.unikraft.app
networks:
- uuid:       270bdb2f-42a2-f26d-4a8c-43de55608490
  private-ip: 10.0.6.8
  mac:        12:b0:00:61:6e:70
timestamps:
  created:    just now

or

Using the legacy kraft CLI

[●] Deployed successfully!
 │
 ├───────── name: httpserver-node22-react-router-jvj6b
 ├───────── uuid: 4e6ccb1f-0533-4dc1-be67-eca8dfc1f8c6
 ├──────── metro: https://api.fra.unikraft.cloud/v1
 ├──────── state: starting
 ├─────── domain: https://long-star-1tms9h1z.fra.unikraft.app
 ├──────── image: oci://unikraft.io/<my-org>/httpserver-node22-react-router@sha256:300eefce3de136ad9c782f010b69da01100ae5f0ca17f038f92321d735d6675f
 ├─────── memory: 768 MiB
 ├────── service: long-star-1tms9h1z
 ├─ private fqdn: httpserver-node22-react-router-jvj6b.internal
 └─── private ip: 10.0.6.8

In this case, the instance name is httpserver-node22-react-router-jvj6b and the address is https://long-star-1tms9h1z.fra.unikraft.app. They're different for each run. You can now point your browser at the address to see your deployed instance.

You can list information about the instance by running:

Using the unikraft CLI (Recommended)

unikraft instances list

METRO  NAME                           STATE    IMAGE                             ARGS  MEMORY  VCPUS  FQDN                                 CREATED
fra    httpserver-node22-react-router-jvj6b  running  <my-org>/httpserver-node22-react-router        768MiB  1      long-star-1tms9h1z.fra.unikraft.app  2 minutes ago

or

Using the legacy kraft CLI

kraft cloud instance list

NAME                           FQDN                                 STATE    STATUS         IMAGE                                                         MEMORY   VCPUS  ARGS  BOOT TIME
httpserver-node22-react-router-jvj6b  long-star-1tms9h1z.fra.unikraft.app  running  1 minutes ago  oci://unikraft.io/<my-org>/httpserver-node22-react-router@sha256...  768 MiB  1            67.65 ms

When done, you can remove the instance:

Using the unikraft CLI (Recommended)

unikraft instances delete httpserver-node22-react-router-jvj6b

or

Using the legacy kraft CLI

kraft cloud instance remove httpserver-node22-react-router-jvj6b

To customize the app, update the files in the repository, listed below:

• Kraftfile: the Unikraft Cloud specification
• Dockerfile: the Docker-specified app filesystem
• server.js: the server itself

Use the --help option for detailed information on using Unikraft Cloud:

Using the unikraft CLI (Recommended)

unikraft --help

or

Using the legacy kraft CLI

kraft cloud --help

Or visit the CLI Reference or the legacy CLI Reference.