Railway•6mo ago

Vue js vite app taking long time

I'm building an Exam AI app using Vue.js, Django DRF API, and OpenAI API. The app involves heavy operations like uploading files, sending them to my API, and then to the OpenAI API. The backend functionality works perfectly, but the frontend, specifically the dashboard, takes at least 1 minute to load. In the dashboard, there are multiple checks (e.g., verifying if the user is logged in or if they are an admin), which involve direct API calls instead of using local storage. Despite this, the backend handles these checks efficiently. However, I deployed my Vue.js app on Railway.app without building the app (I didn't run npm run build). Could this be the reason for the slow loading times on the dashboard? How can I solve this issue?

10 Replies

Percy•6mo ago

Project ID: 96da8bcc-24d9-4d45-882e-cb719989ea8d

DevmohaOP•6mo ago

96da8bcc-24d9-4d45-882e-cb719989ea8d

Joshie•6mo ago

It will help if your app bundles and servers the build files. However, I am not sure that it is your actual issue. For an example on how to use Vite https://github.com/brody192/vite-react-template. This is Vite + react. But you can extract the Vite stuff for your use. The important things, are that you are building the files (they end up in dist) and then you serve them using Caddy as a file server. You can even stack Caddy's btw So, you should do the above. But regardless of that, I am not sure if it will actually fix your issue. I would also make sure that all of your services are in the same region. If serving the dist files doesn't help; someone else can help you debug further

DevmohaOP•6mo ago

let me try this option first , i am thinking it might fix my issue can you guide me how can i do this steps this is what i am thinking , run :1- npm run build , done , is that the only step i need to serve my files

Joshie•6mo ago

So running build for vite, will crate a directory called dist. These are all static files but you need a way to serve said files to the user / client. To do that, you use Caddy, as seen in the example I sent. You will just need to add a PORT variable in railway. You can set it PORT=3000. I don't know what your build looks like. If you are letting railway handle it for you (not using docker or anything), you can just copy the nixpacks.toml. If you are using something like docker for your build; here is what I did

# official Bun image
# see all versions at https://hub.docker.com/r/oven/bun/tags
FROM oven/bun:latest as build
WORKDIR /app

COPY package.json bun.lockb .
RUN bun install --frozen-lockfile
COPY . .

RUN bun run build

FROM caddy:latest

copy --from=build /app/dist /dist/

COPY Caddyfile /etc/caddy/Caddyfile

RUN caddy fmt --overwrite /etc/caddy/Caddyfile

CMD exec caddy run --config /etc/caddy/Caddyfile --adapter caddyfile 2>&1

# official Bun image
# see all versions at https://hub.docker.com/r/oven/bun/tags
FROM oven/bun:latest as build
WORKDIR /app

COPY package.json bun.lockb .
RUN bun install --frozen-lockfile
COPY . .

RUN bun run build

FROM caddy:latest

copy --from=build /app/dist /dist/

COPY Caddyfile /etc/caddy/Caddyfile

RUN caddy fmt --overwrite /etc/caddy/Caddyfile

CMD exec caddy run --config /etc/caddy/Caddyfile --adapter caddyfile 2>&1

Actually, if you do it the way I show, you will also have to make 1 additional change.

- root * dist
---------
+ root * /dist

- root * dist
---------
+ root * /dist

DevmohaOP•6mo ago

i am using nixpack so it seems the only step i need to do is run npm run build right ? also i am getting error now from my backend 502 bad gateway

Joshie•6mo ago

Can you show me your build logs? The top mainly. So we can see what it was already doing

DevmohaOP•6mo ago

nixpack toml file txt : # 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 CADDY_VERSION = '2.7.4' # specify the caddy version to use here, without a 'v' prefix. https://github.com/caddyserver/caddy/releases download and untar caddy [phases.caddy] dependsOn = ['setup'] # make sure this phase runs after the default 'setup' phase cmds = [ 'curl -fsSLo caddy.tar.gz "https://github.com/caddyserver/caddy/releases/download/v${CADDY_VERSION}/caddy_${CADDY_VERSION}_linux_amd64.tar.gz"', # download the caddy release specified by 'CADDY_VERSION' from GitHub 'tar -zxvf caddy.tar.gz caddy', # only extract 'caddy' from the tarball 'chmod +x caddy' # enable file execution for caddy, needed to execute downloaded files ] 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 Caddyfile'] # format the Caddyfile to fix any formatting inconsistencies copy caddy and build artifacts to a new image and start the caddy web server [start] runImage = 'ubuntu:20.04' # use a new ubuntu image to run the caddy server in onlyIncludeFiles = ['caddy', 'Caddyfile', 'dist'] # copy only the needed files and folders into the new image (Vite builds to a 'dist' folder) cmd = './caddy run --config Caddyfile --adapter caddyfile 2>&1' # start caddy using the Caddyfile config and caddyfile adapter

Configuration File Reference | Nixpacks

App source + Nix packages + Docker = Image

GitHub

Releases · caddyserver/caddy

Fast and extensible multi-platform HTTP/1-2-3 web server with automatic HTTPS - caddyserver/caddy

DevmohaOP•6mo ago

sorry for being late

Joshie•6mo ago

And the result?

Gaming

Programming

Vue js vite app taking long time