Vite + React with Caddy
brennenrocks
HOBBYOP

a year ago

I'm not entirely sure how to get my Vite + React app live with Caddy. When I attempt to deploy it doesn't have Caddy in the executable versions like it does when I use the Template https://github.com/brody192/vite-react-template

This template removed its Caddyfile and just has the railway.json yet it still deploys with Caddy and that's where I'm lost. I have the same railway.json file in my repo but it does not deploy with Caddy

Solved

39 Replies

brennenrocks
HOBBYOP

a year ago

51eb1214-db44-4d9e-9273-d24302255ae9


a year ago

The last commit shows that the Caddyfile has been removed in favor of using Railpack. Presumably because Railpack will use Caddy to serve static assets anyway https://railpack.com/languages/staticfile.

Edit: I have just realized that I have linked the wrong documentation, https://railpack.com/languages/node/#static-sites is what I should have linked.


brennenrocks
HOBBYOP

a year ago

That's what I expected as well but that's not what happened for me when I just had the railway.json specifying Railpack. I'll try again


a year ago

Feel free to share your repo so that the community can better help you


brennenrocks
HOBBYOP

a year ago

I can't make the repo public but I'll share what I can

Its in an isolated project monorepo. I have a service for my backend in Railway (running smoothly) and a service for my front end. I have the Root Directory pointing to my front end folder. There is a public folder and an index.html file but Railway is still not detecting it as a static file site. This is my railway.json file. I'm also using bun

{
  "$schema": "https://railway.com/railway.schema.json",
  "build": {
    "builder": "RAILPACK"
  }
}

1386795100591362088


brennenrocks
HOBBYOP

a year ago

My deploy is working but its not being served by Caddy. First image is the template and 2nd image is mine

1386795967642337431

1386795967893737544


brennenrocks
HOBBYOP

a year ago

I have it properly detecting bun now but it still doesn't show "Deploying as vite static site"


a year ago

Vite should technically be detected since you do have a vite.config.ts file. Does your build script contain vite build? Here are some extra documentation regarding it.


brennenrocks
HOBBYOP

a year ago

"scripts": {
    "dev": "vite --port=3001",
    "build": "vite build",
    "serve": "vite preview",
    "start": "vite",
    "check-types": "tsc --noEmit"
},

The package.json build script does have vite build. I don't have a "Custom Start Command" in the Settings though if that's what it could potentially be looking for

1386801915148501083


a year ago

I assume that since you are using an isolated monorepo that it is configured correctly with a custom root directory, so this shouldn't technically be the issue. While it is not ideal, can you try to enforce Caddy by using a custom Caddyfile or the default Caddyfile that Railpack would have used if it detected your static application.

The default Caddyfile in question: https://github.com/railwayapp/railpack/blob/main/core/providers/node/Caddyfile.template


brennenrocks
HOBBYOP

a year ago

I was hopeful but it didn't work. I put the Caddyfile at the Root Directory for the web app. There was no change in the build logs


brennenrocks
HOBBYOP

a year ago

What I might do is abolish my monorepo structure since I'm not sharing any packages anyway and then serve the static files from my server


brennenrocks
HOBBYOP

a year ago

Very strange that it's not detecting vite


brennenrocks
HOBBYOP

a year ago

Even though it properly finds the bun.lock file to use bun


a year ago

I too find this a bit strange, do you mind creating another repo or branch with just your frontend (vite application) at the root (abolishing the monorepo structure)?


brennenrocks
HOBBYOP

a year ago

I'll have to try this later tonight. I am sharing types between the backend and front end so I won't be able to have it be a standalone repo unfortunately. But I can attempt to have it be at the root level and not specify a Root Directory in Railway and see what it does


swiftdev12
HOBBY

a year ago

I thought you need a Procfile for doing the custom routes like a static file within a folder


brennenrocks
HOBBYOP

a year ago

I'm not sure what that is


swiftdev12
HOBBY

a year ago

its like a railway.json, but Procfile is better for using a backend server


swiftdev12
HOBBY

a year ago


brennenrocks
HOBBYOP

a year ago

Looks like I'm supposed to use "Nixpacks" with this? Railpack has it deprecated

1386814209085538395


swiftdev12
HOBBY

a year ago

oh my bad.


swiftdev12
HOBBY

a year ago

I guess railpack.json


brennenrocks
HOBBYOP

a year ago

Is there a setting inside the railway.json to force Railpack to see the project as a vite project?


a year ago

Try setting a RAILPACK_STATIC_FILE_ROOT variable


brennenrocks
HOBBYOP

a year ago

Because the Root Directory is already set so I just set RAILPACK_STATIC_FILE_ROOT to /? Or should that variable also point to the root directory


brennenrocks
HOBBYOP

a year ago

I set it to / and still no luck detecting caddy

1386818929888067726


a year ago

It should point to the location that vite builds it's static files into


brennenrocks
HOBBYOP

a year ago

Set it to ./dist and attempted dist as well with no luck


a year ago

Then you will need to share an MRE so that you aren't leaving the community guessing to provide support


brennenrocks
HOBBYOP

a year ago

Tonight I'll get a small repo made to replicate


brennenrocks
HOBBYOP

a year ago

Here is an example of a repo that doesn't work for the Vite React app. Its in apps/web

https://github.com/BrennenRocks/railway-testing

It used https://better-t-stack.dev/new?db=postgres&dbs=neon&add=biome to scaffold it all.

Here is the ID for the project this is deployed with 6f00e0d6-2406-4198-b96e-b24bb3c9e767


a year ago

Hey, I just played around with it and figured out that it is most likely related to Railpack, I will see if I can find the reason for why it doesn't use Caddy in your case.


~~`Nixpacks build logs`~~
```
╔══════════════════════════════ Nixpacks v1.38.0 ══════════════════════════════╗
║ setup      │ nodejs_18, npm-9_x                                              ║
║──────────────────────────────────────────────────────────────────────────────║
║ caddy      │ pkgs: caddy                                                     ║
║            │ cmds: caddy fmt --overwrite /assets/Caddyfile                   ║
║──────────────────────────────────────────────────────────────────────────────║
║ install    │ npm i                                                           ║
║──────────────────────────────────────────────────────────────────────────────║
║ build      │ npm run build                                                   ║
║──────────────────────────────────────────────────────────────────────────────║
║ start      │ exec caddy run --config /assets/Caddyfile --adapter caddyfile   ║
║            │ 2>&1                                                            ║
╚══════════════════════════════════════════════════════════════════════════════╝
```
~~`railway.json`~~
```json
{
  "$schema": "https://railway.com/railway.schema.json",
  "build": {
    "builder": "NIXPACKS"
  }
}
```


a year ago

This took a while but after reading Railpack's source code, I have finally found the reason. First I tried to enforce it using by setting a RAILPACK_SPA_OUTPUT_DIR service variable to dist, this works because the isSPA method will return true if OUTPUT_DIR_VAR (RAILPACK_SPA_OUTPUT_DIR) is not an empty string (default value).

The actual reason, after reading more parts of the source code, turns out to be the custom start command. In your case it's just vite, a custom start command will result in the isSPA method to return false, consequently not using Caddy to serve your application.

Railpack's isSPA method for reference

func (p *NodeProvider) isSPA(ctx *generate.GenerateContext) bool {
    if ctx.Env.IsConfigVariableTruthy("NO_SPA") {
        return false
    }

    // Setting the output dir directly will force an SPA build
    if value, _ := ctx.Env.GetConfigVariable(OUTPUT_DIR_VAR); value != "" {
        return true
    }

    // If there is a custom start command, we don't want to deploy with Caddy as an SPA
    if p.hasCustomStartCommand(ctx) {
        return false
    }

    isVite := p.isVite(ctx)
    isAstro := p.isAstroSPA(ctx)
    isCRA := p.isCRA(ctx)
    isAngular := p.isAngular(ctx)

    return (isVite || isAstro || isCRA || isAngular) && p.getOutputDirectory(ctx) != ""
}

a year ago

In short, removing your start script in your package.json will result in Railpack using Caddy.

Here is the one line of change required for your MRE: https://github.com/BrennenRocks/railway-testing/pull/1/commits/56eb7fc6d753469ce9681952ce4b32fae8e5cb19


brennenrocks
HOBBYOP

a year ago

And looking at the template from Brody there is no "start" script in the package.json

I will give this a try later tonight

Thanks a bunch for looking into this!


brennenrocks
HOBBYOP

a year ago

That worked perfectly. I'm all up and running at https://transmogged.com with my cron jobs, db, server, and react app all at Railway 🙏


a year ago

That's great to hear, I'll go ahead and mark this thread as solved.


a year ago

!s


Status changed to Solved uxuz 11 months ago


Welcome!

Sign in to your Railway account to join the conversation.

Loading...