[fix] expose Vite.js `mode` from `$app/env` #1789

jthegedus · 2021-07-01T06:51:07Z

Before submitting the PR, please make sure you do the following

It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
This message body should clearly illustrate what problems it solves.
Ideally, include a test that fails without this PR but passes with it.

Tests

Run the tests with pnpm test and lint the project with pnpm lint and pnpm check

Changesets

If your PR makes a change that should be noted in one or more packages' changelogs, generate a changeset by running pnpx changeset and following the prompts

Summary

dev utility is great, but projects often have more than two environments (dev, prod). Exposing the Vite.js Mode value would simplify the code for these multi-envs projects.

mode can be set in config.kit.vite.mode
svelte-kit dev defaults this val to development
svelte-kit build defaults this val to production

Related

This is related to #1258 which asks for the CLI flag --mode to be exposed.

Other

Not sure how to write a test for this, maybe:

import { dev, mode } from '$app/env';

if (dev && mode !== 'development') {
	throw Error('mode should equal development when dev is true');
}

I am unclear on how the test suite operates.

changeset-bot · 2021-07-01T06:51:09Z

🦋 Changeset detected

Latest commit: 168ea2b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@sveltejs/kit	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

benmccann · 2021-07-01T17:21:37Z

packages/kit/types/ambient-modules.d.ts

@@ -15,6 +15,10 @@ declare module '$app/env' {
 	 * `true` when prerendering, `false` otherwise.
 	 */
 	export const prerendering: boolean;
+	/**
+	 * The Vite.js mode the app is running in. Configure in `config.kit.vite.mode`. By default, `svelte-kit dev` runs in `development` mode and `svelte-kit build` runs in `production` mode.


it's not quite clear from these docs and the docs above for dev how the two are different from each other

It is technically redundant, but only because we'd be reflecting Vite's behaviour and Vite's behaviour is redundant https://vitejs.dev/guide/env-and-mode.html#env-variables. In practice I think it's beneficial to have a boolean dev value, and if people have found that it's valuable to expose mode then it makes sense to have both i think

@benmccann Yes, I should expand on these docs. Mode is used to infer .env.[mode] dotenv files to load. As these values are statically replaced during a build, we can utilise mode to load the config for our target env.

While this is similar to dev I'd argue not redundant. As I raised in #1613 (comment) there are many instances for building and running a SvelteKit app and in each instance I may want to use different config and conditionally execute code when dev=false in prod builds.

This is also why #1258 is useful as currently setting the mode in svelte.config.js requires computing the env and is less ergonomic than a CLI flag. (I currently do export MODE="" && svelte-kit build just to then vite: {mode: process.env.MODE})

Example use cases for mode:

command purpose envs

run dev server against local resources svelte-kit dev NODE_ENV=development

mode=development (default)

env.development

dev=true

run production against prod resources svelte-kit build NODE_ENV=production

mode=production (default)

env.production

dev=false

run production build locally against local resources svelte-kit preview NODE_ENV=production

mode=production (default) ❌

We want to load env.development here but default VITE_MODE=production was used during build env.production ❌

not useful to resolve issue dev=false

build & deploy to staging against staging resources svelte-kit build mode=production

VITE_MODE=production (default) ❌

We want to load env.staging here but default VITE_MODE=production was used during build env.production ❌

not useful to resolve issue dev=false

build & deploy to production against production resources svelte-kit build NODE_ENV=production

mode=production (default) :check:

env.production :check:

dev=false

That's a very long answer I don't quite know how to digest 😄 Basically my question is are these representing different values. E.g. one is NODE_ENV and one is VITE_MODE? We should document what underlying flag these each represent

Yes. One is essentially NODE_ENV, one is mode and specific to Vite.js (I don't think it can be set via VITE_MODE env var). As far as I understand dev cannot represent all the states that mode can, and therefore is not redundant.

Rich-Harris · 2021-07-02T02:03:55Z

Thanks — could you add a changeset and update the docs please? https://github.com/sveltejs/kit/blob/master/documentation/docs/05-modules.md

documentation/docs/05-modules.md

* 'master' of github.com:sidharthv96/kit: (1114 commits) Version Packages (next) (sveltejs#1858) Bump vite-plugin-svelte to 1.0.0-next.12 (sveltejs#1869) [fix] preserve user defined config and files on `svelte-kit package` (sveltejs#1735) [fix] handle undefined body on endpoint output (sveltejs#1808) [fix] copy essentials files from root on packaging (sveltejs#1747) [docs] sort config alphabetically (sveltejs#1867) add config.kit.package.emitTypes option (sveltejs#1852) [fix] add $lib alias to js/tsconfig (sveltejs#1860) Pass along custom properties added to Error (sveltejs#1821) Version Packages (next) (sveltejs#1840) Improve grammar in packages FAQ Docs for writing an adapter (sveltejs#1846) Additional documentation around pnpx changeset usage [feat] expose Vite.js `mode` from `$app/env` (sveltejs#1789) Service worker files exclusion support (sveltejs#1645) chore: Enable `vite.server.fs.strict` internally by default (sveltejs#1842) Test with the latest version of Svelte (sveltejs#1848) [docs] don't need to run pnpm install twice Improve HN example docs [fix] correct `ReadOnlyFormData` generator implementation (sveltejs#1837) ...

jthegedus added 3 commits July 1, 2021 16:22

fix(kit): export Vitejs mode from $app/env

9fe622e

fix(kit): typo in type import

738b086

types(kit): type for $app/env mode

b541ffb

benmccann reviewed Jul 1, 2021

View reviewed changes

benmccann changed the title ~~fix(kit): expose Vite.js mode from $app/env~~ [fix] expose Vite.js mode from $app/env Jul 3, 2021

jthegedus added 3 commits July 4, 2021 11:55

docs: explain vite.js mode

ffcd660

chore: add changeset

6066ca5

fix: missing trailing smei

dfb1fcd

benmccann reviewed Jul 8, 2021

View reviewed changes

documentation/docs/05-modules.md Outdated Show resolved Hide resolved

Update documentation/docs/05-modules.md

168ea2b

benmccann merged commit 1ec368a into sveltejs:master Jul 8, 2021

jthegedus deleted the patch-1 branch July 9, 2021 00:40

Rich-Harris mentioned this pull request Jul 19, 2022

remove redundant env #5614

Merged

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[fix] expose Vite.js `mode` from `$app/env` #1789

[fix] expose Vite.js `mode` from `$app/env` #1789

jthegedus commented Jul 1, 2021 •

edited

Loading

changeset-bot bot commented Jul 1, 2021 •

edited

Loading

benmccann Jul 1, 2021

Rich-Harris Jul 2, 2021

jthegedus Jul 2, 2021 •

edited

Loading

benmccann Jul 3, 2021

jthegedus Jul 4, 2021 •

edited

Loading

Rich-Harris commented Jul 2, 2021

command	purpose	envs
run dev server against local resources	`svelte-kit dev`	`NODE_ENV=development`
		`mode=development` (default)
		`env.development`
		`dev=true`

run production against prod resources	`svelte-kit build`	`NODE_ENV=production`
		`mode=production` (default)
		`env.production`
		`dev=false`

run production build locally against local resources	`svelte-kit preview`	`NODE_ENV=production`
		`mode=production` (default) ❌
	We want to load `env.development` here but default `VITE_MODE=production` was used during `build`	`env.production` ❌
	not useful to resolve issue	`dev=false`

build & deploy to staging against staging resources	`svelte-kit build`	`mode=production`
		`VITE_MODE=production` (default) ❌
	We want to load `env.staging` here but default `VITE_MODE=production` was used during build	`env.production` ❌
	not useful to resolve issue	`dev=false`

build & deploy to production against production resources	`svelte-kit build`	`NODE_ENV=production`
		`mode=production` (default) :check:
		`env.production` :check:
		`dev=false`

[fix] expose Vite.js mode from $app/env #1789

[fix] expose Vite.js mode from $app/env #1789

Conversation

jthegedus commented Jul 1, 2021 • edited Loading

Before submitting the PR, please make sure you do the following

Tests

Changesets

changeset-bot bot commented Jul 1, 2021 • edited Loading

🦋 Changeset detected

benmccann Jul 1, 2021

Choose a reason for hiding this comment

Rich-Harris Jul 2, 2021

Choose a reason for hiding this comment

jthegedus Jul 2, 2021 • edited Loading

Choose a reason for hiding this comment

benmccann Jul 3, 2021

Choose a reason for hiding this comment

jthegedus Jul 4, 2021 • edited Loading

Choose a reason for hiding this comment

Rich-Harris commented Jul 2, 2021

[fix] expose Vite.js `mode` from `$app/env` #1789

[fix] expose Vite.js `mode` from `$app/env` #1789

jthegedus commented Jul 1, 2021 •

edited

Loading

changeset-bot bot commented Jul 1, 2021 •

edited

Loading

jthegedus Jul 2, 2021 •

edited

Loading

jthegedus Jul 4, 2021 •

edited

Loading