Skip to content

Commit

Permalink
fix(plugins/basic-pipeline): ensure correct webpack config is loaded
Browse files Browse the repository at this point in the history 
When making `basic-pipeline` in 948956a we've introduced a regression
and with this fix, a behaviour change as well::

1. The `webpackConfigName` passed to `Engine` is completely ignored, caused it to be
  `undefined` down the line when the plugin tries to do its work (we essentially broke bundling)
2. With that configuration being ignored, we need a new way to make this configurable.
  Since `basic-pipeline` is now a true plugin, it makes sense for itself to have configuration
  options for that, while still providing decent defaults.
3. The trickly thing is that `webpackConfigName` used to have different values per command.
  For example `build` used to use `production` while `run` used `development` as config.
4. This commit introduces new configuration options for `basic-pipeline` that lets users configure
the `webpackConfigName` per environment:

```json
// embark.json
{
  ...
  "plugins": {
    "embark-basic-pipeline": {
      "development": {
        webpackConfigName: "development"
      },
      "production": {
        webpackConfigName: "production"
      }
    }
  }
}
```
^ These are also the defaults. So not providing this configuration will make
Embark imply it.

Notice that this does not account for the "different config per command" case.
This means `embark build` will also use `development` by default.

Prior to this commit and the one mentioned above, the `webpackConfigName` was configurable
through the CMD `--pipeline` option. Since this a) no longer a built-in feature
and b) ignored at the moment anyways, I've removed the `--pipeline` options
from all commands as well.

BREAKING CHANGES

The commands `embark eject-webpack` and `embark eject-build-config` are no longer available.
The `--pipeline` option has been removed from all commands that used to support it.
  • Loading branch information
@0x-r4bbit
0x-r4bbit committed Mar 23, 2020
1 parent 469504f commit 42c644f
Show file tree
Hide file tree
Showing 6 changed files with 10 additions and 122 deletions.
27 changes: 2 additions & 25 deletions packages/embark/src/cmd/cmd.js
View file
Expand Up @@ -22,7 +22,6 @@ class Cmd {
this.simulator();
this.test();
this.reset();
this.ejectWebpack();
this.graph();
this.scaffold();
this.upload();
Expand Down Expand Up @@ -137,15 +136,13 @@ class Cmd {
.option('-c, --client [client]', __('Use a specific ethereum client [%s] (default: %s)', 'geth, parity', 'geth'))
.option('--loglevel [loglevel]', __('level of logging to display') + ' ["error", "warn", "info", "debug", "trace"]', /^(error|warn|info|debug|trace)$/i, 'info')
.option('--locale [locale]', __('language to use (default: en)'))
.option('--pipeline [pipeline]', __('webpack config to use (default: production)'))
.description(__('deploy and build dapp at ') + 'dist/ (default: development)')
.action((env, _options) => {
setOrDetectLocale(_options.locale);
_options.env = env || 'development';
_options.logFile = _options.logfile; // fix casing
_options.logLevel = _options.loglevel; // fix casing
_options.onlyCompile = _options.contracts;
_options.webpackConfigName = _options.pipeline || 'production';
this.embark.build(_options);
});
}
Expand All @@ -163,7 +160,6 @@ class Cmd {
.option('--logfile [logfile]', __('filename to output logs (default: %s)', 'none'))
.option('--loglevel [loglevel]', __('level of logging to display') + ' ["error", "warn", "info", "debug", "trace"]', /^(error|warn|info|debug|trace)$/i, 'info')
.option('--locale [locale]', __('language to use (default: en)'))
.option('--pipeline [pipeline]', __('webpack config to use (default: development)'))
.option('--no-single-use-auth-token', __('disable the single use of token in cockpit'))
.description(__('run dapp (default: %s)', 'development'))
.action((env, options) => {
Expand All @@ -178,7 +174,6 @@ class Cmd {
useDashboard: !options.nodashboard,
logFile: options.logfile,
logLevel: options.loglevel,
webpackConfigName: options.pipeline || 'development',
openBrowser: !options.nobrowser ? null : false,
singleUseAuthToken: options.singleUseAuthToken
});
Expand Down Expand Up @@ -216,7 +211,6 @@ class Cmd {
.option('--logfile [logfile]', __('filename to output logs (default: %s)', 'none'))
.option('--loglevel [loglevel]', __('level of logging to display') + ' ["error", "warn", "info", "debug", "trace"]', /^(error|warn|info|debug|trace)$/i, 'info')
.option('--locale [locale]', __('language to use (default: en)'))
.option('--pipeline [pipeline]', __('webpack config to use (default: development)'))
.option('--no-single-use-auth-token', __('disable the single use of token in cockpit'))
.description(__('Start the Embark console'))
.action((env, options) => {
Expand All @@ -227,8 +221,7 @@ class Cmd {
locale: options.locale,
logFile: options.logfile,
logLevel: options.loglevel,
singleUseAuthToken: options.singleUseAuthToken,
webpackConfigName: options.pipeline || 'development'
singleUseAuthToken: options.singleUseAuthToken
});
});
}
Expand All @@ -246,7 +239,6 @@ class Cmd {
.option('--logfile [logfile]', __('filename to output logs (default: %s)', 'none'))
.option('--loglevel [loglevel]', __('level of logging to display') + ' ["error", "warn", "info", "debug", "trace"]', /^(error|warn|info|debug|trace)$/i, 'info')
.option('--locale [locale]', __('language to use (default: en)'))
.option('--pipeline [pipeline]', __('webpack config to use (default: development)'))
.option('--no-single-use-auth-token', __('disable the single use of token in cockpit'))
.description(__('run dapp (default: %s)', 'development'))
.action((env, options) => {
Expand All @@ -261,7 +253,6 @@ class Cmd {
useDashboard: !options.nodashboard,
logFile: options.logfile,
logLevel: options.loglevel,
webpackConfigName: options.pipeline || 'development',
openBrowser: !options.nobrowser ? null : false,
singleUseAuthToken: options.singleUseAuthToken
});
Expand Down Expand Up @@ -346,7 +337,6 @@ class Cmd {
.option('--loglevel [loglevel]', __('level of logging to display') + ' ["error", "warn", "info", "debug", "trace"]', /^(error|warn|info|debug|trace)$/i, 'info')
.option('--locale [locale]', __('language to use (default: en)'))
.option('-c, --client [client]', __('Use a specific ethereum client [%s] (default: %s)', 'geth, parity', 'geth'))
.option('--pipeline [pipeline]', __('webpack config to use (default: production)'))
.description(__('Upload your dapp to a decentralized storage') + '.')
.action((env, _options) => {
setOrDetectLocale(_options.locale);
Expand All @@ -358,7 +348,6 @@ class Cmd {
_options.ensDomain = _options.ens;
_options.logFile = _options.logfile; // fix casing
_options.logLevel = _options.loglevel; // fix casing
_options.webpackConfigName = _options.pipeline || 'production';
this.embark.upload(_options);
});
}
Expand Down Expand Up @@ -399,7 +388,6 @@ class Cmd {
options.logLevel = options.loglevel; // fix casing
options.onlyCompile = options.contracts;
options.client = options.client || 'geth';
options.webpackConfigName = options.pipeline || 'development';
options.contractOrFile = contractOrFile;
options.fields = fields;

Expand All @@ -419,17 +407,6 @@ class Cmd {
});
}

ejectWebpack() {
program
.command('eject-build-config')
.alias('eject-webpack')
.description(__('copy the default build config into your dapp for customization'))
.action(() => {
this.embark.initConfig('development', {interceptLogs: false});
this.embark.ejectWebpack();
});
}

versionCmd() {
program
.command('version')
Expand Down Expand Up @@ -467,7 +444,7 @@ class Cmd {
suggestion = 'build --contracts';
} else {
const { proposeAlternative } = require('embark-utils');
let dictionary = ['new', 'demo', 'build', 'run', 'blockchain', 'simulator', 'test', 'upload', 'version', 'console', 'eject-webpack', 'graph', 'help', 'reset'];
let dictionary = ['new', 'demo', 'build', 'run', 'blockchain', 'simulator', 'test', 'upload', 'version', 'console', 'graph', 'help', 'reset'];
suggestion = proposeAlternative(cmd, dictionary);
}
if (suggestion) {
Expand Down
24 changes: 2 additions & 22 deletions packages/embark/src/cmd/cmd_controller.js
View file
@@ -1,13 +1,12 @@
import { Config, Events, fs, TemplateGenerator } from 'embark-core';
import { Config, Events, TemplateGenerator } from 'embark-core';
import { Engine } from 'embark-engine';
import { __ } from 'embark-i18n';
import { dappPath, joinPath, setUpEnv } from 'embark-utils';
import { joinPath, setUpEnv } from 'embark-utils';
import { Logger, LogLevels } from 'embark-logger';
let async = require('async');
const constants = require('embark-core/constants');
const { reset: embarkReset, paths: defaultResetPaths } = require('embark-reset');
const cloneDeep = require('clone-deep');
import findUp from 'find-up';
import { readJsonSync } from 'fs-extra';
import { join } from 'path';

Expand Down Expand Up @@ -601,25 +600,6 @@ class EmbarkController {
await embarkReset({ removePaths });
}

ejectWebpack() {
const embarkConfig = findUp.sync(
'node_modules/embark-basic-pipeline/dist/webpack.config.js',
{cwd: __dirname}
);
const dappConfig = dappPath('webpack.config.js');
fs.copyPreserve(embarkConfig, dappConfig);
console.log(__('webpack config ejected to:').dim.yellow);
console.log(`${dappConfig}`.green);
const embarkOverrides = findUp.sync(
'node_modules/embark-basic-pipeline/dist/babel-loader-overrides.js',
{cwd: __dirname}
);
const dappOverrides = dappPath('babel-loader-overrides.js');
fs.copyPreserve(embarkOverrides, dappOverrides);
console.log(__('webpack overrides ejected to:').dim.yellow);
console.log(`${dappOverrides}`.green);
}

scaffold(options) {
this.context = options.context || [constants.contexts.scaffold];

Expand Down
5 changes: 4 additions & 1 deletion packages/plugins/basic-pipeline/src/index.js
View file
Expand Up @@ -17,7 +17,6 @@ class BasicPipeline {
// this.useDashboard = options.useDashboard;
this.useDashboard = true;
this.fs = embark.fs;
this.webpackConfigName = embark.config.webpackConfigName;
this.env = embark.config.env;
this.buildDir = embark.config.buildDir;
this.contractsFiles = embark.config.contractsFiles;
Expand All @@ -28,6 +27,10 @@ class BasicPipeline {
this.plugins = embark.pluginsAPI;
this.pipelinePlugins = this.plugins.getPluginsFor('pipeline');
this.pipelineConfig = embark.config.pipelineConfig;

const env = embark.config.env;
this.webpackConfigName = embark.pluginConfig[env]?.webpackConfigName ?? 'development';

let plugin = this.plugins.createPlugin('basic-pipeline', {});

plugin.registerActionForEvent("pipeline:generateAll:after", this.webpackAssets.bind(this));
Expand Down
8 changes: 0 additions & 8 deletions site/source/docs/embark_commands.md
View file
Expand Up @@ -85,14 +85,6 @@ Option | Description
`--no-color` | no colors in case it's needed for compatbility purposes
`--logfile` | `filename` to output logs (default: none)

## eject-build-config

```
$ embark eject-build-config
```

Copies Embark's default `webpack.config.js` file into your DApp so that you can customize it. If a file named `webpack.config.js` is present in your top-level DApp directory, Embark will use your webpack config file instead of its own.

## blockchain

```
Expand Down
56 changes: 1 addition & 55 deletions site/source/docs/pipeline_and_webpack.md
View file
@@ -1,4 +1,4 @@
title: Building & Asset Pipeline
title: Building with Embark
layout: docs
---

Expand All @@ -13,19 +13,6 @@ By default, `embark build` will use the `production` mode to build our applicati
```
$ embark build
```
### Specifying a mode using `--pipeline`


Embark comes with two modes for building our application:

* **development** - This mode is for development purposes and produces sourcemaps as well as unoptimized client-side code. Whenever we use `embark run` or `embark console`, this mode is used by default. Since this mode skips code optimizations, it's also the faster mode.
* **production** - Unsurprisingly, this mode is used to create production artifacts of our application. It produces optimized code and therefore, takes longer to build. However, client-side code will be highly optimized, thus smaller in file size. This mode is the default for `embark build` and `embark upload` commands.

We can specify a mode using the `--pipeline` option. This is available for both, `embark run` and `embark build` commands:

```
$ embark build --pipeline development
```

## Compiling Smart Contracts only

Expand All @@ -35,44 +22,3 @@ If we're building a [Smart Contract only application](http://localhost:4000/docs
$ embark build --contracts
```

## Understanding the build pipeline

Embark uses [webpack](https://webpack.js.org/) to bundle and postprocess all kinds of assets of our decentralized application. This also includes things like:

* ES2015+ syntax using Babel
* Importing of CSS, SCSS, PNG, SVG & Fonts in JavaScript
* Support for React & JSX
* Automatic support for older browsers via Babel's preset-env (by default, Embark uses a browser list setting of `['last 1 version', 'not dead', '> 0.2%']`
* Sourcemaps generation (when in development mode)
* Minification and tree shaking (when in production mode)

{% notification danger 'Deprecation warning:' %}
Since Embark version 4.0.0 it's possible (and recommended) to use Embark in combination with other front-end tooling, such as Angular CLI, Vue CLI or Create React App, making Embark's own build pipeline obsolete.

When using Embark with any other existing front-end tooling, please turn off Embark's internal build pipeline by setting the following configuration option in `config/pipeline.js`:

<pre class="highlight">
enabled: false
</pre>
{% endnotification %}



### Customizing the build process

Sometimes we run into scenarios where our setup is so specific that the build process for our application needs further customization. For those cases, where Embark's built-in build pipeline isn't enough, it enables us to "eject" the internally used `webpack.config.js` file, so we can change it to our needs and fully bypass Embark's internal build process.

Ejecting the internally used config file is as simple as using Embark's `eject-build-config` command like this:

```
$ embark eject-build-config
```

{% notification info 'On --eject-webpack option' %}
In older versions of Embark, the same could be achieved using the `--eject-webpack` option. This option still works, but is now considered deprecated and will be removed in future versions of Embark.
{% endnotification %}

{% notification danger 'Deprecation warning:' %}
As mentioned earlier in this guide, we recommend using existing front-end tooling for building and optimizing your application's front-end code. This command will be deprecated in future versions of Embark.
{% endnotification %}

12 changes: 1 addition & 11 deletions site/source/docs/running_apps.md
View file
Expand Up @@ -54,19 +54,9 @@ If we aren't interested in Embark starting a web server in the first place, we c
$ embark run --noserver
```

## Running apps in different modes

Embark comes with different "modes" when building applications. `embark run` uses the `development` mode by default. However, this can be overwritten using the `--pipeline` option. The following command run our application in `production` mode.

```
$ embark run --pipeline production
```

For more information about modes, head over to our guide on [building apps](pipeline_and_webpack.html).

## Switching environments

Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file.
Embark allows for configuring different environments to run our app against. This can be useful if we want to deploy our app to test networks or even private networks. In order to run our application in a specified environment, we first have to add a dedicated configuration to our project's `blockchain.js` file.

Depending on how you initialized your application, it may have already multiple environments configured. Here's what a sample test network environment could look like:

Expand Down

0 comments on commit 42c644f

Please sign in to comment.