Railway•15mo ago

frontend web app making requests to wrong endpoint

On my frontend web app I have a env variable configured to be the endpoint of my application but when I inspect the network, it is making a request to itself, project id: 2203d68c-a5c8-4058-b60a-2ecd1a124ad4

64 Replies

Percy•15mo ago

Project ID: N/A

gabrielhk97OP•15mo ago

saintcore•15mo ago

Could you share your vite.config.js and package.json perhaps ? Also wondering: What's the output of a 'console.log(import.meta.env.VITE_API_URL)' for testing purposes? Any differences between localhost/dev and prod hosted on railway?

gabrielhk97OP•15mo ago

got it. For furhter documentation you have to create a .env.local and use VITE_ prefix to expose the variable

saintcore•15mo ago

so you now have a .env.local file within your github-repo ?

gabrielhk97OP•15mo ago

yeah not the best but ok

saintcore•15mo ago

Well it's up to you of course, but imho you really shouldn't do that. .env-files don't belong into any version-control (like git with github) as they contain almost in all cases sensitive values. You also don't need to do this for using vars in railway

gabrielhk97OP•15mo ago

I tried to use env vars in railway but with no success

saintcore•15mo ago

We can try to get it work if you want 😉

gabrielhk97OP•15mo ago

how should I do it then? Ik .env in production is bad but this is just for a test

saintcore•15mo ago

I assume you use vite right?

gabrielhk97OP•15mo ago

yes

saintcore•15mo ago

So vite uses dotenv under the hood, you can read more about it here https://vitejs.dev/guide/env-and-mode.html#env-files What imho should always work: 1. For local Deployment create an .env in your projects root-folder (don't forget to add it to your .gitignore file if you haven't yet) and add your vars prefixed with, as you already mentioned, 'VITE' 2. On railway create the same vars within the variable Tab (also prefixed with VITE) 3. Access them within your javascript-code with: 'import.meta.env.VITE_API_URL'

Vite

Next Generation Frontend Tooling

gabrielhk97OP•15mo ago

already tried that i get undefined

saintcore•15mo ago

can you show me your package.json and vite.config.js ?

gabrielhk97OP•15mo ago

i had to create .env.local and add to gitignore sure ill paste the code

{
    "name": "todolist-frontend",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-node": "^1.3.1",
        "@sveltejs/kit": "^1.20.4",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "autoprefixer": "^10.4.15",
        "axios": "^1.4.0",
        "daisyui": "^3.6.1",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.28",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tailwind-scrollbar": "^3.0.5",
        "tailwindcss": "^3.3.3",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2",
        "vitest": "^0.32.2"
    },
    "type": "module",
    "dependencies": {
        "@fortawesome/free-solid-svg-icons": "^6.4.2",
        "svelte-fa": "^3.0.4"
    }
}

{
    "name": "todolist-frontend",
    "version": "0.0.1",
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "npm run test:integration && npm run test:unit",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write .",
        "test:integration": "playwright test",
        "test:unit": "vitest"
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-node": "^1.3.1",
        "@sveltejs/kit": "^1.20.4",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "autoprefixer": "^10.4.15",
        "axios": "^1.4.0",
        "daisyui": "^3.6.1",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.30.0",
        "postcss": "^8.4.28",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.10.1",
        "svelte": "^4.0.5",
        "svelte-check": "^3.4.3",
        "tailwind-scrollbar": "^3.0.5",
        "tailwindcss": "^3.3.3",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.4.2",
        "vitest": "^0.32.2"
    },
    "type": "module",
    "dependencies": {
        "@fortawesome/free-solid-svg-icons": "^6.4.2",
        "svelte-fa": "^3.0.4"
    }
}

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vitest/config';

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}']
    }
});

package and vite respectively

saintcore•15mo ago

this looks ok

saintcore•15mo ago

I do not know sveltekit but seems there is an extra step with sveltekit, see this https://stackoverflow.com/a/70711383

Stack Overflow

How to load environment variables from .env file using Vite

I want to load environment variables from the .env file using Vite I used the import.meta.env object as mentioned in Docs .env file: TEST_VAR=123F when trying to access this variable via the impor...

saintcore•15mo ago

There is an example how you need to tweak your vite.config.js so .env file gets loaded: // Extends 'process.env.' with VITE_-variables from '.env.(mode=production|development)' process.env = {...process.env, ...loadEnv(mode, process.cwd())}; Once done that, vars from .env should be loaded 🙂

gabrielhk97OP•15mo ago

let me try

gabrielhk97OP•15mo ago

how do I solve this?

gabrielhk97OP•15mo ago

I tried to put any before mode but it didnt work

Brody•15mo ago

are you building with a dockerfile?

gabrielhk97OP•15mo ago

yes

Brody•15mo ago

send it please

gabrielhk97OP•15mo ago

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json .
RUN npm ci
COPY . .
RUN npm run build
RUN npm prune --production

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json .
RUN npm ci
COPY . .
RUN npm run build
RUN npm prune --production

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/build build/
COPY --from=builder /app/node_modules node_modules/
COPY package.json .
EXPOSE 3000
ENV NODE_ENV=production
CMD [ "node", "build" ]

Brody•15mo ago

whats your start command set to in the service settings

gabrielhk97OP•15mo ago

i dont get it

saintcore•15mo ago

Go into the settings of your service on railway, and scroll down to the section "deploy", there you will see a row called "Start Command"

gabrielhk97OP•15mo ago

i dont have a start command

Brody•15mo ago

okay lol delete the dockerfile please

gabrielhk97OP•15mo ago

delete and commit?

Brody•15mo ago

delete the file locally and from the repo

gabrielhk97OP•15mo ago

can i ask why? cuz from what i get it uses dockerfile to build the app right?

Brody•15mo ago

yes but its doing more harm then good, we will be using nixpacks going forward

gabrielhk97OP•15mo ago

i need to run it with docker i get bonus points it is for a test can we keep it?

Brody•15mo ago

it is doing more harm than good railway runs with docker regardless

gabrielhk97OP•15mo ago

sure then. Deleted it

Brody•15mo ago

now what kind of vite app is this? react, vue? what we talking? svelte, close enough

gabrielhk97OP•15mo ago

sveltekit

Brody•15mo ago

copy the nixpack.toml and caddyfiles fropm this repo into yours https://github.com/brody192/vue-3-template

saintcore•15mo ago

in the meantime: Brody is def. built different🏗️

Brody•15mo ago

i know thats vue and not sveltekit, but it should be universal to most vite csr spa apps

gabrielhk97OP•15mo ago

done

Brody•15mo ago

push the changes and lets see what happens

gabrielhk97OP•15mo ago

also im getting this while trying to connect to my backend on railway, it looks like cors

Brody•15mo ago

okay but does that mean the frontend is working?

gabrielhk97OP•15mo ago

it is working with the .env.load solution provided above not ideal but it is working im runninb now with caddy lets see if it works failed

Brody•15mo ago

remove the .env.local from the repo and locally sent the frontend domain and the backend domain please

gabrielhk97OP•15mo ago

https://gabrielhk97-todolist-frontend.up.railway.app/ https://gabrielhk97-todolist-backend.up.railway.app/ still failed after deleting .env.local

Brody•15mo ago

show me the frontend's service variable for the url backend thing please

gabrielhk97OP•15mo ago

it used to be on the .env.local now it is just on the variables in railway as VITE_API_URL = gabrielhk97-todolist-backend.up.railway.app

saintcore•15mo ago

isn't the protocol missing (https)? or do you add this in your code manually? but anyway it shouldn't output undefined if the vars would be loading, so that won't be the root cause here

Brody•15mo ago

i know the cause show me a screenshot of your entire project

gabrielhk97OP•15mo ago

wdym

Brody•15mo ago

a screenshot of your railway project

gabrielhk97OP•15mo ago

Brody•15mo ago

yep one sec in your frontend service variables set VITE_API_URL to https://${{ todolist-backend.RAILWAY_PUBLIC_DOMAIN }}

gabrielhk97OP•15mo ago

got it working thanks how do i close?

Brody•15mo ago

was that the variable that worked?

gabrielhk97OP•15mo ago

no, I had to rollback all the way to using .env.local ugly solution, but hey it works

Brody•15mo ago

what didn't work about the variable I gave you

gabrielhk97OP•15mo ago

the project was not deploying i was getting failure

Brody•15mo ago

please add the variable back and send me the error

Gaming

Programming

frontend web app making requests to wrong endpoint