How to differentiate between Svelte dev mode and build mode?

Question

The dev mode using npm run dev, the release mode using npm build

How could i know that it's currently built on dev mode or not in the code, for example:

<script>
    import {onMount} from 'svelte';

    onMount(function(){
        if(DEVMODE) { // --> what's the correct one?
            console.log('this is x.svelte');
        }
    })
</script>
 

Heliotherapy

Answer 1

Not sure about the correct method. I share what I did on my project.

1. in rollup.config.js

   import replace from "@rollup/plugin-replace";
   const production = !process.env.ROLLUP_WATCH;
   

2. inside plugins:[ ] block add this

   replace({
       isProduction: production,
    }),
   

   rollup.config.js will look like this:

   plugins: [
     replace({
       isProduction: production,
     }),
     svelte({
       // options
     }),
   ]
   

3. Then use isProduction inside components.

   if (!isProduction){ console.log('Developement Mode'); }
   

Onstad

What do i have to import in order to access "isProduction" in a svelte component? Because when i do it the way you described, i get a ReferenceError: isProduction is not defined.. – Percussive

{isProduction ? "Production Mode" : "Development Mode"} works fine for me. – Onstad

IN 2022. To access isProduction, you should use JSON.parse(isProduction). – Vina

no need to use rollup only for accessing build mode, it's a separate plugin. Just use process.env.NODE_ENV anywhere in the app. it should return development or production as string. – Threatt

Answer 2

If you are using sveltekit:

import { dev } from '$app/environment';

if (dev) {
    //do in dev mode
}

Peepul

Question is about Svelte, nor Sveltekit – Hormuz

Useful answer nonetheless as Sveltekit becomes increasingly popular and Google leads here. – Creature

@EricDelaCruz there is no "dev mode" in vanilla svelte, svelte is just a compiler – Sexagesima

@Sexagesima What OP means is when you started your app in dev or production mode. – Hormuz

@EricDelaCruz there is no "start"ing of an app, as I said, Svelte is just a compiler. We could assume the poster is using Svelte with Vite, or assume they're using SvelteKit, but we have no way to tell as the commands are the same for each. And SvelteKit is much more common. – Sexagesima

Just use process.env.NODE_ENV anywhere in the app. it should return development or production as string. – Threatt

Answer 3

If you are using Svelte with Vite, you may use:

import.meta.env.DEV - true in development environment.

import.meta.env.PROD - true in production environment.

import.meta.env.MODE - name of the mode, if you need more control.

See Vite docs on Env variables

Romain

Answer 4

I solved this problem by checking the hostname the application is running on. You can also use other forms like, port or even msm a localStore browser variable.

Note that I check if the application is running on the client side before using the 'window'

const isProduction = (): boolean => {
  // Check if is client side
  if (typeof window !== 'undefined' && window.document !== undefined) {
    // check production hostname
    if (window?.location.hostname !== undefined && 
        window.location.hostname === 'YOUR_PRODUCTION_HOSTNAME') {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

Yenyenisei

Answer 5

When using Svelte (not svelte-kit), this worked for me inside svelte components:

<script>
    let isProduction = import.meta.env.MODE === 'production';

    if (!isProduction) {
       console.log("Developement Mode");
    } else {
       console.log("Production Mode");
    }
</script>

Thanks timdeschryver for the reference

Plan

Doesn't work (anymore) – Hormuz

Eric it still works for me, can you explain what are you using exactly that it doesn't work for you? – Plan

Just tried this solution and it works fine – Purpleness