Railway•10mo 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•10mo ago

Project ID: N/A

gabrielhk97•10mo ago

saintcore•10mo 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?

gabrielhk97•10mo ago

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

saintcore•10mo ago

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

gabrielhk97•10mo ago

yeah not the best but ok

saintcore•10mo 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

gabrielhk97•10mo ago

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

saintcore•10mo ago

We can try to get it work if you want 😉

gabrielhk97•10mo ago

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

saintcore•10mo ago

I assume you use vite right?

gabrielhk97•10mo ago

yes

saintcore•10mo 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

gabrielhk97•10mo ago

already tried that i get undefined

saintcore•10mo ago

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

gabrielhk97•10mo 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•10mo ago

this looks ok

saintcore•10mo 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•10mo 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 🙂

gabrielhk97•10mo ago

let me try

gabrielhk97•10mo ago

how do I solve this?

gabrielhk97•10mo ago

I tried to put any before mode but it didnt work

Brody•10mo ago

are you building with a dockerfile?

gabrielhk97•10mo ago

yes

Brody•10mo ago

send it please

gabrielhk97•10mo 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•10mo ago

whats your start command set to in the service settings

gabrielhk97•10mo ago

i dont get it

saintcore•10mo 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"

gabrielhk97•10mo ago

i dont have a start command

Brody•10mo ago

okay lol delete the dockerfile please

gabrielhk97•10mo ago

delete and commit?

Brody•10mo ago

delete the file locally and from the repo

gabrielhk97•10mo ago

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

Brody•10mo ago

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

gabrielhk97•10mo ago

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

Brody•10mo ago

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

gabrielhk97•10mo ago

sure then. Deleted it

Brody•10mo ago

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

gabrielhk97•10mo ago

sveltekit

Brody•10mo ago

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

saintcore•10mo ago

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

Brody•10mo ago

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

gabrielhk97•10mo ago

done

Brody•10mo ago

push the changes and lets see what happens

gabrielhk97•10mo ago

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

Brody•10mo ago

okay but does that mean the frontend is working?

gabrielhk97•10mo 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•10mo ago

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

gabrielhk97•10mo ago

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

Brody•10mo ago

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

gabrielhk97•10mo 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•10mo 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•10mo ago

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

gabrielhk97•10mo ago

wdym

Brody•10mo ago

a screenshot of your railway project

gabrielhk97•10mo ago