diff --git a/.env.example b/.env.example index ca91cef2b..3004daa76 100644 --- a/.env.example +++ b/.env.example @@ -1,3 +1,4 @@ +NODE_ENV=development # BACKEND_URL="https://example.com" # PATRON_URL="https://patron.example.com" # PROXY_HTTPS_INSECURE=false diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index e90677dff..f7083fe6d 100644 --- a/.gitlab-ci.yml +++ b/.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 diff --git a/README.md b/README.md index a86801eb7..ccb2f0c5c 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 2c3718d66..321478621 100644 --- a/package.json +++ b/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": [ diff --git a/webpack/development.js b/webpack/development.js index 41bc7596a..c732dbb52 100644 --- a/webpack/development.js +++ b/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'); diff --git a/webpack/index.js b/webpack/index.js new file mode 100644 index 000000000..46febcaaf --- /dev/null +++ b/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); +} diff --git a/webpack/production.js b/webpack/production.js index 861278a04..71d714cb7 100644 --- a/webpack/production.js +++ b/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'); diff --git a/webpack/test.js b/webpack/test.js index 8b56eb92f..e4dedac44 100644 --- a/webpack/test.js +++ b/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');