Use NODE_ENV from environment instead of overriding it

.env.example

@@ -1,3 +1,4 @@
+NODE_ENV=development
 # BACKEND_URL="https://example.com"
 # PATRON_URL="https://patron.example.com"
 # PROXY_HTTPS_INSECURE=false

.gitlab-ci.yml

@@ -32,7 +32,7 @@ jest:
 
 build-development:
   stage: build
-  script: yarn build:development
+  script: yarn build
   variables:
     NODE_ENV: development
   artifacts:
@@ -41,7 +41,7 @@ build-development:
 
 build-production:
   stage: build
-  script: yarn build:production
+  script: yarn build
   variables:
     NODE_ENV: production
   artifacts:
@@ -51,6 +51,8 @@ build-production:
 i18n:
   stage: build
   script: yarn manage:translations
+  variables:
+    NODE_ENV: production
   before_script:
     - yarn
-    - yarn build:development
+    - yarn build

README.md

@@ -20,20 +20,20 @@ It incorporates much of the [Mastodon API](https://docs.joinmastodon.org/methods
 
 To get it running, just clone the repo:
 
-```
+```sh
 git clone https://gitlab.com/soapbox-pub/soapbox-fe.git
 cd soapbox-fe
 ```
 
 Ensure that Node.js and Yarn are installed, then install dependencies:
 
-```
+```sh
 yarn
 ```
 
 Finally, run the dev server:
 
-```
+```sh
 yarn start
 ```
 
@@ -44,6 +44,17 @@ It will serve at `http://localhost:3036` by default.
 It will proxy requests to the backend for you.
 For Pleroma running on `localhost:4000` (the default) no other changes are required, just start a local Pleroma server and it should begin working.
 
+### Troubleshooting: `ERROR: NODE_ENV must be set`
+
+Create a `.env` file if you haven't already.
+
+```sh
+cp .env.example .env
+```
+
+And ensure that it contains `NODE_ENV=development`.
+Try again.
+
 ## Developing against a live backend
 
 You can also run soapbox-fe locally with a live production server as the backend.
@@ -69,7 +80,7 @@ You will need to restart the local development server for the changes to take ef
 
 Local Mastodon runs on port 3000 by default, so you will need to edit the `.env` as described above and set it like this:
 
-```
+```sh
 BACKEND_URL="http://localhost:3000"
 ```
 
@@ -91,7 +102,16 @@ Finally, refresh the page, and you should be logged in.
 The following configuration variables are supported supported in local development.
 Edit `.env` to set them.
 
-All configuration is optional.
+All configuration is optional, except `NODE_ENV`.
+
+#### `NODE_ENV`
+
+The Node environment.
+soapbox-fe checks for the following options:
+
+- `development` - What you should use while developing soapbox-fe.
+- `production` - Use when compiling to deploy to a live server.
+- `test` - Use when running automated tests.
 
 #### `BACKEND_URL`
 
@@ -121,6 +141,12 @@ This is needed if `BACKEND_URL` or `PATRON_URL` are set to an `https://` value.
 # Yarn Commands
 
 The following commands are supported.
+You must set `NODE_ENV` to use these commands.
+To do so, you can add the following line to your `.env` file:
+
+```sh
+NODE_ENV=development
+```
 
 #### Local dev server
 - `yarn start` - Run the local dev server. It will proxy requests to the backend for you.
@@ -128,9 +154,7 @@ The following commands are supported.
 - `yarn dev` - Exact same as above, aliased to `yarn start` for convenience.
 
 #### Building
-- `yarn build:development` - Build for development.
-
-- `yarn build:production` - Build for production.
+- `yarn build` - Compile without a dev server, into `/public` directory.
 
 #### Translations
 - `yarn manage:translations` - Normalizes translation files. Should always be run after editing i18n strings.

package.json

@@ -2,16 +2,15 @@
   "name": "soapbox-fe",
   "version": "0.0.0",
   "scripts": {
-    "start": "NODE_ENV=development npx webpack-dev-server --config webpack/development.js",
+    "start": "npx webpack-dev-server --config webpack",
     "dev": "${npm_execpath} run start",
-    "build:development": "NODE_ENV=development npx webpack --config webpack/development.js",
-    "build:production": "NODE_ENV=production npx webpack --config webpack/production.js",
+    "build": "npx webpack --config webpack",
     "manage:translations": "node ./webpack/translationRunner.js",
     "test": "${npm_execpath} run test:lint && ${npm_execpath} run test:jest",
     "test:lint": "${npm_execpath} run test:lint:js && ${npm_execpath} run test:lint:sass",
     "test:lint:js": "npx eslint --ext=js . --cache",
     "test:lint:sass": "npx sass-lint -v",
-    "test:jest": "NODE_ENV=test npx jest --coverage"
+    "test:jest": "npx jest --coverage"
   },
   "license": "AGPL-3.0-or-later",
   "browserslist": [

webpack/development.js

@@ -1,5 +1,5 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
-require('dotenv').config();
+console.log('Running in development mode'); // eslint-disable-line no-console
 
 const { resolve } = require('path');
 const merge = require('webpack-merge');

webpack/index.js

@@ -0,0 +1,13 @@
+require('dotenv').config();
+
+const { NODE_ENV } = process.env;
+
+switch(NODE_ENV) {
+case 'development':
+case 'production':
+case 'test':
+  module.exports = require(`./${NODE_ENV}`); break;
+default:
+  console.error('ERROR: NODE_ENV must be set to either `development`, `test`, or `production`.');
+  process.exit(1);
+}

webpack/production.js

@@ -1,4 +1,5 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
+console.log('Running in production mode'); // eslint-disable-line no-console
 
 const { URL } = require('url');
 const merge = require('webpack-merge');

webpack/test.js

@@ -1,4 +1,5 @@
 // Note: You must restart bin/webpack-dev-server for changes to take effect
+console.log('Running in test mode'); // eslint-disable-line no-console
 
 const merge = require('webpack-merge');
 const sharedConfig = require('./shared.js');