React + Storybook deployment: unable to locate nixpacks.toml in subdirectory

kaiwerther
HOBBY

5 days ago

Hey Team!

Thanks for this awesome environment. This is the first real struggle after many projects here:

We have a monorepo with a frontend folder. The frontend folder houses our react frontend + our storybook.

For our storybook we have a Nixpacks.toml and a Caddyfile in the .storybook folder (/frontend/.storybook/Nixpacks.toml)

# https://nixpacks.com/docs/configuration/file

# set up some variables to minimize annoyance

[variables]

NPM_CONFIG_UPDATE_NOTIFIER = 'false' # the update notification is relatively useless in a production environment

NPM_CONFIG_FUND = 'false' # the fund notification is also pretty useless in a production environment

# download caddy from nix

[phases.caddy]

dependsOn = ['setup'] # make sure this phase runs after the default 'setup' phase

nixpkgsArchive = 'ba913eda2df8eb72147259189d55932012df6301' # Caddy v2.8.4 - https://github.com/NixOS/nixpkgs/commit/ba913eda2df8eb72147259189d55932012df6301

nixPkgs = ['caddy'] # install caddy as a nix package

# format the Caddyfile with fmt

[phases.fmt]

dependsOn = ['caddy'] # make sure this phase runs after the 'caddy' phase so that we know we have caddy downloaded

cmds = ['caddy fmt --overwrite /.storybook/Caddyfile'] # format the Caddyfile to fix any formatting inconsistencies

[phases.build]

cmds = ['npm run storybook:build']

# start the caddy web server

[start]

cmd = 'exec caddy run --config /.storybook/Caddyfile --adapter caddyfile 2>&1' # start caddy using the Caddyfile config and caddyfile adapter

And Caddyfile:
# global options

{

admin off # theres no need for the admin api in railway's environment

persist_config off # storage isn't persistent anyway

auto_https off # railway handles https for us, this would cause issues if left enabled

# runtime logs

log {

format json # set runtime log format to json mode

}

# server options

servers {

trusted_proxies static private_ranges 100.0.0.0/8 # trust railway's proxy

}

}

# site block, listens on the $PORT environment variable, automatically assigned by railway

:{$PORT:3000} {

# access logs

log {

format json # set access log format to json mode

}

# health check for railway

rewrite /health /*

# serve from the 'dist' folder (Vite builds into the 'dist' folder)

root * /app/storybook-static

# enable gzipping responses

encode gzip

# serve files from 'dist'

file_server

# if path doesn't exist, redirect it to 'index.html' for client side routing

try_files {path} /index.html

}

When specifying /frontend as root we are unable to reference the Nixpacks.toml.
I tried:
./.storybook/Nixpacks.toml

/.storybook/Nixpacks.toml

.storybook/Nixpacks.toml
All of this show this error while building:
config file ./.storybook/Nixpacks.toml does not exist

However when specifying the full path /frontend/.storybook/Nixpacks.toml the build is starting, but the Nixpacks.toml was not used as the default Nixpacks is run:

I'm at a loss here. The plan was to have the storybook nixpacks + caddyfile in the .storybook folder and the react nixpacks + caddyfile in the root folder.

1 Replies

kaiwerther
HOBBY

5 days ago

Anyone having a similiar problem: nixpacks.toml <> railway.toml

The solution is to add a railway.toml in .storybook pointing to nixpacks.toml


React + Storybook deployment: unable to locate nixpacks.toml in subdirectory - Railway Help Station