Netlify Dev - Static files serving behaving differently than production

Support
, ,
#1

Hi folks, it’s my first post here, but I’ve been following this forum for a while now.

I’m facing some discrepancies on Static File serving between the netlify-cli dev command and the production version, the site is https://trygracias.netlify.app/.
I have an index.html file in the folder public/single-button with the following header:

    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
    <script src="https://js.stripe.com/v3/"></script>
    <script src="main.js"></script>

This code works perfectly on production,but when I run netlify dev --live and open the live site, eg. https://trygracias-xxxxxx.netlify.live/single-button, it shows this error: Loading failed for the with source “https://trygracias-xxxxxx.netlify.live/main.js”. single-button:11:1
To make it work on netlify dev --live I need to change the html code to:

    <link rel="stylesheet" href="single-button/normalize.css">
    <link rel="stylesheet" href="single-button/style.css">
    <script src="https://js.stripe.com/v3/"></script>
    <script src="single-button/main.js"></script>

My netlify.toml is configured this way:

[build]
  command = "# no build command"
  functions = "netlify/functions"
  publish = "public"

Is there any extra configuration that I need to do to make the netlify dev --live command works the same way as production?

Thanks in advance,
Vitaliano

#2

Hey @vitaliano.neto,

Is there a specific reason why you need the --live flag? Just trying to make sure it’s not some configuration mistake. If you’re using CLI for local testing, you should not need that flag.

#3

I’m using the --live flag because I need it to test payments from stripe API.

But even running netlify dev without the --live flag the code is still not working as it does in production.

#4

@hrishikesh is there any configuration that can be done to force the static file hosting to always use the public folder as the root?
So in this way I’ll always use:

<link rel="stylesheet" href="single-button/style.css">

Even on production.

Best,
Vitaliano

#5

I was able to make both, netlify dev and netlify dev --live, have the same behavior as the production serving by setting up my own static server and configuring the dev section on the netlify.toml.

Step by step:

  • First: install live-server from npm: npm i -g @compodoc/live-server
  • Second: configure the netlify.toml by adding the following [dev] section, you may need to adapt it depending on your folder structure:
[dev]
  command = "live-server --port=3000 --no-browser --watch=public ./public/"
  port = 8888
  targetPort = 3000
  publish = "public"
  • Third: run netlify dev or netlify dev --live from your project folder
  • Fourth: profit? :rofl:

I’ve decided to give this a try after reading an article here that showed how to add hot reload functionality into netlify dev command.

Bye

#6

Hey there, @vitaliano.neto :wave:

Thanks so much for coming back and sharing this with us. This will definitely be beneficial for future Forums members who encounter something similar.

Happy building :rocket: