Getting Started

Create RADFish App is the officially supported tool for creating single-page React applications. It offers a modern build setup with no configuration.

Prerequisites

Before you start, make sure you have the following installed:

• Node.js (v20.17.0 or later)
• npm (v10.8.2 or later)
• git (v2.0 or later)

GitHub

The GitHub Package Registry requires additional setup:

1. Authentication is always required. Even if the package is public, you need a valid personal access token (PAT). PATs have an expiration date, so remember to rotate your tokens. To create one:

   1. Go to GitHub and click your avatar in the top-right corner
   2. Select Settings
   3. In the left sidebar, click Developer settings
   4. Click Personal access tokens → Tokens (classic)
   5. Click Generate new token → Generate new token (classic)
   6. Give it a descriptive name and select the write:packages scope (this automatically includes read:packages)
   7. Click Generate token and copy the token immediately — you won't be able to see it again

   For more details, see the GitHub documentation on creating a personal access token.

2. Configure .npmrc for authentication. Run the following commands, replacing YOUR_PERSONAL_ACCESS_TOKEN with the token you copied:

   npm config set @nmfs-ocio:registry https://npm.pkg.github.com
   npm config set //npm.pkg.github.com/:_authToken YOUR_PERSONAL_ACCESS_TOKEN

   Alternatively, you can manually edit ~/.npmrc and add:

   @nmfs-ocio:registry=https://npm.pkg.github.com
   //npm.pkg.github.com/:_authToken=YOUR_PERSONAL_ACCESS_TOKEN

3. Verifying your auth token. To verify your setup, run:

   npm view @nmfs-ocio/radfish --registry https://npm.pkg.github.com

   A E401 error indicates your PAT is missing or invalid.

npm

Deprecation Notice

The @nmfs-radfish packages on the public npm registry have been deprecated and are no longer receiving updates. All future releases will be published exclusively to GitHub Packages under the @nmfs-ocio scope.

Please migrate to the GitHub Package Registry by following the GitHub tab instructions above. For existing projects, refer to the migration guide.

No additional setup is needed. RADFish packages are publicly available on the npm.

Quick Start

Scaffold a new app from a template

Start your app with a barebones and pre-configured template.

GitHub

npx @nmfs-ocio/create-radfish-app my-app
cd my-app
npm start

Once the development server starts, visit http://localhost:3000/ in your browser to see your app.

npm

npx @nmfs-radfish/create-radfish-app@latest my-app
cd my-app
npm start

Once the development server starts, visit http://localhost:3000/ in your browser to see your app.

Using the help flag

The --help flag is a common option that displays helpful information about a command or script, including available options and usage instructions.

GitHub

npx @nmfs-ocio/create-radfish-app --help

npm

npx @nmfs-radfish/create-radfish-app --help

Upgrading package versions in your app

1. In the root of your project run:

   npm update

2. Check for Changes:

   npm test

For more information, see upgrading packages. If you are migrating from @nmfs-radfish to @nmfs-ocio, see the migration guide.

Scripts

npm start

This script starts the Vite development server. It runs the app locally with hot module reloading, allowing for fast development and instant updates as you make changes. Open http://localhost:3000 to view it in the browser.

See Available Scripts for full list of commands.

Next steps

Now that you are up and running, see the Components & Usage section to start building out your first pages!