fly.io deployment problems with Vite React

JavaScript
1

I have a client app built with Vite React. This is a frontend app, which makes calls to an api/backend app.

The general problem is: When I navigate to my deployed app with fly (eg: app.fly.dev), it’s an empty page. I have verified that the CSS and JS are being loaded. I have even ssh-ed into the instance to verify that everything from dist is there.

I have also verified locally that pnpm build and pnpm preview both work and are displaying the app.

I have also verified locally that the Dockerfile can be built and run and the container is displaying the app.

At this point, I really feel like fly.io is the issue here. Maybe I’m not setting up my fly.toml properly, although this is the one I got autogenerated from fly.io.

I would appreciate any tips for this.

Here is my fly.toml file:

# fly.toml app configuration file generated for client-*** on 2025-01-22T19:52:49+01:00
#
# See https://fly.io/docs/reference/configuration/ for information about how to use this file.
#

app = 'client-***'
primary_region = 'fra'

[build]

[http_service]
  internal_port = 80
  force_https = true
  auto_stop_machines = 'stop'
  auto_start_machines = true
  min_machines_running = 0
  processes = ['app']

[[vm]]
  memory = '1gb'
  cpu_kind = 'shared'
  cpus = 1

Here is my Dockerfile:

# syntax = docker/dockerfile:1

# Adjust NODE_VERSION as desired
ARG NODE_VERSION=22.11.0
FROM node:${NODE_VERSION}-slim AS base

LABEL fly_launch_runtime="Vite"

# Vite app lives here
WORKDIR /app

# Set production environment
ENV NODE_ENV="production"

# Install pnpm
ARG PNPM_VERSION=9.15.1
RUN npm install -g pnpm@$PNPM_VERSION


# Throw-away build stage to reduce size of final image
FROM base AS build

# Install packages needed to build node modules
RUN apt-get update -qq && \
  apt-get install --no-install-recommends -y build-essential node-gyp pkg-config python-is-python3

# Install node modules
COPY package.json pnpm-lock.yaml ./
RUN pnpm install --frozen-lockfile --prod=false

# Copy application code
COPY . .

# Build application
RUN pnpm run build

# Remove development dependencies
RUN pnpm prune --prod


# Final stage for app image
FROM nginx

# Copy built application
COPY --from=build /app/dist /usr/share/nginx/html

# Start the server by default, this can be overwritten at runtime
EXPOSE 80
CMD [ "/usr/sbin/nginx", "-g", "daemon off;" ]
2

Any errors in the browser dev tools console?

3

None at all. It’s completely empty.

4

Are you sure the container works when you run it on your local machine? If it does, I don’t see why it won’t work on fly from your code.

Since you’re hosting an SPA, maybe try GitHub - pmbanugo/bun-tastic: S3 static site hosting software. made with JavaScript + Bun + Tigris and upload the built files to Tigris. It’s one of the reasons I built it. You can manage multiple SPA from one fly app. I’m working on a CLI to make it easier to publish the built files to Tigris (or any S3 storage). I have the necessary code ready but need to write the docs before I push the changes.

6

If I was certain that the container wasn’t running locally, I wouldn’t be posting here for help.

In case it wasn’t clear, I am 99.9999999999% certain that it works on local. I even tested it in incognito and different browsers. Your guess for why it doesn’t work on fly.io and why it works on local is as good as mine.

I’ll have a look into your little app. Thanks for the tip.

7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.