a year ago
Cheers,
It seems my VITE_ environment variables are not being set on my frontend Service during deployment.
I've confirmed they are properly set in the Service's Settings.
Here is the source code snippet:
useEffect(() => {
const url = import.meta.env.VITE_API_URL;
console.log("VITE_API_URL: ", url); // -> undefined on Railway deployed app
if (!url) {
console.error(
"useProducts.js: Environment Variable missing: VITE_API_URL"
);
return;
}
...Here is the snippet in my local Vite-built bundle, which properly includes the VITEAPIURL variable:
By={VITE_API_URL:"REDACTED_FOR_SUPPORT_THREAD",BASE_URL:"/",MODE:"production",DEV:!1,PROD:!0,SSR:!1}And for good measure, here is the frontend bundle from the browser. It seems that var vv is the same import.meta.env object declared as By above, but Railway's is missing my VITEAPIURL variable.
var vv = {
BASE_URL: "/",
MODE: "production",
DEV: !1,
PROD: !0,
SSR: !1
};
const xv = ()=>{
const [e,t] = Ee.useState([]);
return Ee.useEffect(()=>{
const n = vv.VITE_API_URL;
if (console.log("VITE_API_URL: ", n),
!n) {
console.error("useProducts.js: Environment Variable missing: VITE_API_URL");
return
}
(async()=>{
try {
const s = await fetch(`${n}/products/all`, {
method: "GET",
headers: {
"Content-Type": "application/json"
}
});
if (s.ok) {
const r = await s.json();
t(r)
} else
console.error("Failed to create order:", s.statusText)
} catch (s) {
console.error("Error creating order:", s)
}
}
)()
}
, []),
{
products: e
}
}17 Replies
a year ago
That'll be Dockerfile. Wow, fast reply, thank you
a year ago
FROM node:18-slim
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
ENV NODE_ENV=production
EXPOSE 3000
CMD ["npm", "run", "start"]
a year ago
FROM node:18-slim AS build
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false
ENV NODE_ENV=production
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
// Specify any needed environment variables here
ARG VITE_API_URL
RUN npm run build
FROM caddy
WORKDIR /app
COPY Caddyfile ./
COPY --from=build /app/dist /app/dist
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]Seems like you where trying to run a development server too, so I updated the Dockerfile to use Caddy.
You will also need to copy the Caddyfile from this repo into yours -
a year ago
Ok, groovy. I'll deploy this now, will reply with results
a year ago
I keep hitting an issue where vite is not available to perform vite build.
I've tried installing Vite as a global dependency in the Dockerfile, in case that would help the cause, but that did not work; it should be snaggin' Vite from the dev depenency. Didn't work either way.
It doesn't seem that your changes to the Dockerfile should cause an issue like this; my Dockerfile before was not causing any issues. Any thoughts?
I'll give the ol' machine a restart, for good measure.
The error:
=> [build 6/7] RUN npm install -g vite 1.5s
=> ERROR [build 7/7] RUN npm run build 0.4s
------
> [build 7/7] RUN npm run build:
0.297
0.297 > conduit-coffee-terminal@0.0.0 build
0.297 > vite build
0.297
0.393 failed to load config from /app/vite.config.js
0.393 error during build:
0.393 Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'vite' imported from /app/vite.config.js.timestamp-1714445720879-aeb8003f138be.mjs
0.393 at new NodeError (node:internal/errors:405:5)
0.393 at packageResolve (node:internal/modules/esm/resolve:916:9)
0.393 at moduleResolve (node:internal/modules/esm/resolve:973:20)
0.393 at defaultResolve (node:internal/modules/esm/resolve:1193:11)
0.393 at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:404:12)
0.393 at ModuleLoader.resolve (node:internal/modules/esm/loader:373:25)
0.393 at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:250:38)
0.393 at ModuleWrap. (node:internal/modules/esm/module_job:76:39)
0.393 at link (node:internal/modules/esm/module_job:75:36)
------
Dockerfile:20
--------------------
18 | RUN npm install -g vite
19 |
20 | >>> RUN npm run build
21 |
22 | FROM caddy
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1I've tried a couple different things; here's the file as-is currently (had to make a few changes):
Dockerfile
FROM node:18-slim AS build
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false
ENV NODE_ENV=production
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . ./
# Specify any needed environment variables here
ARG VITE_API_URL
RUN npm install -g vite
RUN npm run build
FROM caddy
WORKDIR /app
COPY Caddyfile ./
COPY --from=build ./dist/ ./dist/
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]package.json
{
"name": "conduit-coffee-terminal",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite && tailwindcss -i ./src/input.css -o ./src/output.css --watch",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"start": "caddy run --config Caddyfile --adapter caddyfile"
},
"dependencies": {
"@fontsource/fira-code": "^5.0.17",
"@fontsource/fira-sans": "^5.0.19",
"chart.js": "^4.4.2",
"chartjs-adapter-dayjs-4": "^1.0.4",
"dayjs": "^1.11.10",
"jsdoc": "^4.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"zustand": "^4.5.2"
},
"devDependencies": {
"@flydotio/dockerfile": "^0.5.4",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.18",
"eslint": "^8.56.0",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"postcss": "^8.4.35",
"tailwindcss": "^3.4.1",
"vite": "^5.1.4"
}
}vite.config.js (in case it's helpful)
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
});a year ago
Likely because of the NODE_ENV=production with that set, I don't think dev deps are installed, try removing it.
Side note, if you have a package-lock.json file you should run npm ci instead of npm install
a year ago
Got it. Still though, in that scenario it would seem the global install would do the trick. Maybe some other witchery within Vite on the production environment, I'll remove that line and see.
a year ago
Didn't fix the issue.
=> ERROR [build 6/6] RUN npm run build 0.9s
------
> [build 6/6] RUN npm run build:
0.240
0.240 > conduit-coffee-terminal@0.0.0 build
0.240 > vite build
0.240
0.333 /app/node_modules/rollup/dist/native.js:89
0.333 throw new Error(
0.333 ^
0.333
0.333 Error: Cannot find module @rollup/rollup-linux-arm64-gnu. npm has a bug related to optional dependencies (https://github.com/npm/cli/issues/4828). Please try `npm i` again after removing both package-lock.json and node_modules directory.
0.333 at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:89:9)
0.333 at Object. (/app/node_modules/rollup/dist/native.js:98:76)
0.333 ... 3 lines matching cause stack trace ...
0.333 at Module._load (node:internal/modules/cjs/loader:1019:12)
0.333 at ModuleWrap. (node:internal/modules/esm/translators:203:29)
0.333 at ModuleJob.run (node:internal/modules/esm/module_job:195:25)
0.333 at async ModuleLoader.import (node:internal/modules/esm/loader:337:24) {
0.333 [cause]: Error: Cannot find module '@rollup/rollup-linux-arm64-gnu'
0.333 Require stack:
0.333 - /app/node_modules/rollup/dist/native.js
0.333 at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
0.333 at Module._load (node:internal/modules/cjs/loader:981:27)
0.333 at Module.require (node:internal/modules/cjs/loader:1231:19)
0.333 at require (node:internal/modules/helpers:177:18)
0.333 at requireWithFriendlyError (/app/node_modules/rollup/dist/native.js:71:10)
0.333 at Object. (/app/node_modules/rollup/dist/native.js:98:76)
0.333 at Module._compile (node:internal/modules/cjs/loader:1364:14)
0.333 at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
0.333 at Module.load (node:internal/modules/cjs/loader:1203:32)
0.333 at Module._load (node:internal/modules/cjs/loader:1019:12) {
0.333 code: 'MODULE_NOT_FOUND',
0.333 requireStack: [ '/app/node_modules/rollup/dist/native.js' ]
0.333 }
0.333 }
0.333
0.333 Node.js v18.20.2
------
Dockerfile:18
--------------------
16 | ARG VITE_API_URL
17 |
18 | >>> RUN npm run build
19 |
20 | FROM caddy
--------------------
ERROR: failed to solve: process "/bin/sh -c npm run build" did not complete successfully: exit code: 1Dockerfile:
FROM node:18-slim AS build
ENV NPM_CONFIG_UPDATE_NOTIFIER=false
ENV NPM_CONFIG_FUND=false
# ENV NODE_ENV=production
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
# Specify any needed environment variables here
ARG VITE_API_URL
RUN npm run build
FROM caddy
WORKDIR /app
COPY Caddyfile ./
COPY --from=build ./dist/ ./dist/
CMD ["caddy", "run", "--config", "Caddyfile", "--adapter", "caddyfile"]a year ago
Found some chat on Vite's GH Issues board; deleting package-lock.json, using npm install, let's see
a year ago
Yipyip, that did the trick! I also miffed on the line COPY --from=build ./dist/ ./dist/; updated back to COPY --from=build /app/dist /app/dist and lookin' groovy.
Thanks for all the help @brody! Prolific collection of templates, by the way; really inspiring to see what you've done with Railway.
a year ago
Haha, I was gonna comment about the COPY --from=build line, so glad you rectified that!
And thank you for the kind words!
a year ago
Heh, I almost forgot to check the actual issue the thread started with. But that's been resolved as well :-D Awesome, keep on rockin' in the free world!