Railway•9mo ago

Railway SvelteKit deploy doesn't match local configuration

I have a SvelteKit app that hosts a client project--a dashboard. The client sent me a static landing page to host on the same domain and project as the dashboard. The carousel--the main issue with the production deploy--works fine locally, as seen in the first image. However, in the production deploy, it looks different, as seen in the second image. The landing page uses slick to provide the carousel, which has a dependance on jQuery. Here's the start of the +page.svelte file that serves the static page:

<svelte:head>
  <!-- Include Bootstrap -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous"
  />
  <link rel="stylesheet" href="landing/css/slick.min.css" />
  <link rel="stylesheet" href="landing/css/slick-theme.css" />
  <link rel="stylesheet" href="landing/css/animate.css" />
  <!-- Main StyleSheet -->
  <link rel="stylesheet" href="landing/landing.css" />
  <!-- Responsive CSS -->
  <link rel="stylesheet" href="landing/css/responsive.css" />
</svelte:head>

<body>
  <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"
  ></script>
  <script src="landing/js/slick.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
    integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script src="landing/js/main.js"></script>

<svelte:head>
  <!-- Include Bootstrap -->
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
    crossorigin="anonymous"
  />
  <link rel="stylesheet" href="landing/css/slick.min.css" />
  <link rel="stylesheet" href="landing/css/slick-theme.css" />
  <link rel="stylesheet" href="landing/css/animate.css" />
  <!-- Main StyleSheet -->
  <link rel="stylesheet" href="landing/landing.css" />
  <!-- Responsive CSS -->
  <link rel="stylesheet" href="landing/css/responsive.css" />
</svelte:head>

<body>
  <script
    src="https://code.jquery.com/jquery-3.7.1.min.js"
    integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
    crossorigin="anonymous"
  ></script>
  <script src="landing/js/slick.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
    integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
    crossorigin="anonymous"
  ></script>
  <script
    src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"
    integrity="sha512-Eak/29OTpb36LLo2r47IpVzPBLXnAMPAVypbSZiZ4Qkf8p/7S/XRG5xp7OKWPPYfJT6metI+IORkR5G8F900+g=="
    crossorigin="anonymous"
    referrerpolicy="no-referrer"
  ></script>
  <script src="landing/js/main.js"></script>

I've also verified that the network tab on both localhost & the production deploy match up, and they do. Additionally, I've also cleared my cache numerous times. I'm not sure where to head next

29 Replies

Percy•9mo ago

Project ID: 508c7ca5-c96e-45d5-b72b-e1a3ffa14809

ferretOP•9mo ago

508c7ca5-c96e-45d5-b72b-e1a3ffa14809

Brody•9mo ago

send me link so I could check it?

ferretOP•9mo ago

https://rapidtrack.xyz/ <- production deploy

Brody•9mo ago

what node version are you using locally

ferretOP•9mo ago

v20.10.0

Brody•9mo ago

what version is railway building and running your app with

ferretOP•9mo ago

it uses the nixpacks default; so 18 i believe

Brody•9mo ago

welp get it using 20 engines.node set to 20

ferretOP•9mo ago

ye 1m tried through both package.json & the nixpacks env variable but no luck

Brody•9mo ago

what is the build on railway using now?

ferretOP•9mo ago

"engines": {
    "node": "20"
  },

"engines": {
    "node": "20"
  },

it's set to 20

Brody•9mo ago

right but what is the build using

ferretOP•9mo ago

╔════════════ Nixpacks v1.21.2 ════════════╗

║ setup      │ nodejs_20, npm-9_x          ║

║──────────────────────────────────────────║

║ install    │ npm ci                      ║

║──────────────────────────────────────────║

║ build      │ npm run build               ║

║──────────────────────────────────────────║

║ start      │ node -r dotenv/config build ║

╚══════════════════════════════════════════╝

╔════════════ Nixpacks v1.21.2 ════════════╗

║ setup      │ nodejs_20, npm-9_x          ║

║──────────────────────────────────────────║

║ install    │ npm ci                      ║

║──────────────────────────────────────────║

║ build      │ npm run build               ║

║──────────────────────────────────────────║

║ start      │ node -r dotenv/config build ║

╚══════════════════════════════════════════╝

Brody•9mo ago

node -r dotenv/config build seems odd?

ferretOP•9mo ago

it's for the sveltekit node adapter

Brody•9mo ago

but the dotenv/config part?

ferretOP•9mo ago

Brody•9mo ago

not that its the issue, but you dont use dotenv on railway. so set your start command back to the default of node build have you ran npm run build && node build locally?

ferretOP•9mo ago

yeah i swapped the build command back using node build locally opens the server just fine but the carousel is still broken

Brody•9mo ago

broken locally?

ferretOP•9mo ago

yes

Brody•9mo ago

didnt you say it worked locally?

ferretOP•9mo ago

works using docker & vite locally it might be the adapter then

Brody•9mo ago

so it wouldnt be broken anymore if you ran vite dev locally?

ferretOP•9mo ago

let me see yeah looks fine

Brody•9mo ago

not a railway issue, you know what that means 🙂

ferretOP•9mo ago

yeah at least it was narrowed down

Brody•9mo ago

progress!

Gaming

Programming

Railway SvelteKit deploy doesn't match local configuration