From 503d7984d5f22329fdf3dc84fc36c21da3c2626c Mon Sep 17 00:00:00 2001 From: Erick Zhao Date: Tue, 7 Nov 2023 16:54:10 -0800 Subject: [PATCH] chore: unify code samples under `npm` --- README.md | 56 +----------- advanced/debugging.md | 10 -- cli.md | 91 ------------------- config/plugins/auto-unpack-natives.md | 10 -- config/plugins/electronegativity.md | 10 -- config/plugins/local-electron.md | 10 -- config/plugins/webpack.md | 11 +-- guides/developing-with-wsl.md | 26 ------ .../react-with-typescript.md | 11 --- guides/framework-integration/react.md | 20 ---- import-existing-project.md | 53 ----------- templates/typescript-+-webpack-template.md | 10 -- templates/vite-+-typescript.md | 10 -- templates/vite.md | 10 -- templates/webpack-template.md | 10 -- 15 files changed, 2 insertions(+), 346 deletions(-) diff --git a/README.md b/README.md index 5f85478..7767ee7 100644 --- a/README.md +++ b/README.md @@ -13,29 +13,16 @@ Electron Forge is an all-in-one tool for packaging and distributing Electron app To get started with Electron Forge, we first need to initialize a new project with `create-electron-app`. This script is a convenient wrapper around Forge's [Init](cli.md#Init) command. {% hint style="warning" %} -Electron Forge 6 works best with Yarn Classic (v1.x) and npm. If you are using a newer version of Yarn, you can downgrade to Classic using the [`yarn set version`](https://yarnpkg.com/cli/set/version) command. +Electron Forge 6 currently only supports Yarn Classic (v1.x) and npm. If you are using a newer version of Yarn, you can downgrade to Classic using the [`yarn set version`](https://yarnpkg.com/cli/set/version) command. {% endhint %} -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn create electron-app my-app -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-app ``` -{% endtab %} -{% endtabs %} - {% hint style="warning" %} If you used the `create-electron-app` script before during Forge `6.0.0-beta`, we recommend you uninstall the package globally before running the command again. ```bash -yarn global remove create-electron-app -# or npm uninstall -g create-electron-app ``` {% endhint %} @@ -44,19 +31,9 @@ npm uninstall -g create-electron-app Forge's initialization scripts can add additional template code with the `--template=[template-name]` flag. -{% tabs %} -{% tab title="yarn" %} -```bash -yarn create electron-app my-app --template=webpack -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-app -- --template=webpack ``` -{% endtab %} -{% endtabs %} There are currently two first-party templates: @@ -75,57 +52,26 @@ To learn more about authoring your own templates for Electron Forge, check out t You should now have a directory called `my-app` with all the files you need for a basic Electron app. -{% tabs %} -{% tab title="Yarn" %} -```bash -cd my-app -yarn start -``` -{% endtab %} - -{% tab title="npm" %} ```bash cd my-app npm start ``` -{% endtab %} -{% endtabs %} ## Building distributables So you've got an **amazing** application there, and you want to package it all up and share it with the world. If you run the `make` script, Electron Forge will generate you platform specific distributables for you to share with everyone. For more information on what kind of distributables you can make, check out the [Makers](config/makers/) documentation. -{% tabs %} -{% tab title="yarn" %} -```bash -yarn make -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm run make ``` -{% endtab %} -{% endtabs %} ## Publishing your app Now you have distributables that you can share with your users. If you run the `publish` script, Electron Forge will then publish the platform-specific distributables for you, using the publishing method of your choice. For more information on what publishers we currently support, check out the [Publishers](config/publishers/) documentation. -{% tabs %} -{% tab title="yarn" %} -```bash -yarn run publish -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm run publish ``` -{% endtab %} -{% endtabs %} ## Advanced Usage diff --git a/advanced/debugging.md b/advanced/debugging.md index 7ffe8c3..67fe12a 100644 --- a/advanced/debugging.md +++ b/advanced/debugging.md @@ -17,19 +17,9 @@ For more general information on debugging Electron apps, see the [main Electron You can specify the `--inspect-electron` flag when running `electron-forge start`. Internally, this will activate the [Electron `--inspect`flag](http://electronjs.org/docs/tutorial/debugging-main-process#--inspectport), and the main process will listen for a debugging client on port 5858. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn start --inspect-electron -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm run start -- --inspect-electron ``` -{% endtab %} -{% endtabs %} Once your app is active, open [`chrome://inspect`](chrome://inspect) in any Chromium-based browser to attach a debugger to the main process of your app. diff --git a/cli.md b/cli.md index 04e4c75..6be5562 100644 --- a/cli.md +++ b/cli.md @@ -19,19 +19,9 @@ Forge's CLI uses comma-separated value strings to pass multiple arguments into a To use the Forge CLI, install the `@electron-forge/cli` module into your project as a devDependency. If you're using the `create-electron-app` script, this module will already be installed for you. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn add --dev @electron-forge/cli -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm install --save-dev @electron-forge/cli ``` -{% endtab %} -{% endtabs %} ## Bootstrap commands @@ -58,19 +48,9 @@ All flags are optional. #### Usage -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn electron-forge init --template=webpack -``` -{% endtab %} - -{% tab title="npm" %} ```bash npx electron-forge init --template=webpack ``` -{% endtab %} -{% endtabs %} ### Import @@ -82,19 +62,9 @@ There are no options for the Import command. #### Usage -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn electron-forge import -``` -{% endtab %} - -{% tab title="npm" %} ```bash npx electron-forge import ``` -{% endtab %} -{% endtabs %} ## Build commands @@ -119,25 +89,12 @@ All flags are optional. #### Usage -{% tabs %} -{% tab title="Yarn" %} -```bash -# By default, the package command corresponds to a package npm script: -yarn package --arch="ia32" -# If there is no package script: -yarn electron-forge package --arch="ia32" -``` -{% endtab %} - -{% tab title="npm" %} ```bash # By default, the package command corresponds to a package npm script: npm run package -- --arch="ia32" # If there is no package script: npx electron-forge package --arch="ia32" ``` -{% endtab %} -{% endtabs %} ### Make @@ -160,41 +117,18 @@ All flags are optional. Basic usage: -{% tabs %} -{% tab title="Yarn" %} -```bash -# By default, the make command corresponds to a make npm script: -yarn make --arch="ia32" -# If there is no make script: -yarn electron-forge make --arch="ia32" -``` -{% endtab %} - -{% tab title="npm" %} ```bash # By default, the make command corresponds to a make npm script: npm run make -- --arch="ia32" # If there is no make script: npx electron-forge make --arch="ia32" ``` -{% endtab %} -{% endtabs %} Building for ia32 and x64 architectures: -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn make --arch="ia32,x64" -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm run make -- --arch="ia32,x64" ``` -{% endtab %} -{% endtabs %} ### Publish @@ -214,23 +148,11 @@ All flags are optional. #### Usage -{% tabs %} -{% tab title="Yarn" %} -
# By default, the publish command corresponds to a publish npm script:
-yarn run publish --from-dry-run
-# If there is no publish script:
-yarn electron-forge publish --from-dry-run
-
-{% endtab %} - -{% tab title="npm" %} 
# By default, the publish command corresponds to a publish npm script:
 npm run publish -- --from-dry-run
 # If there is no publish script:
 npx electron-forge publish -- --from-dry-run
-{% endtab %} -{% endtabs %} ## Dev commands @@ -256,25 +178,12 @@ All flags are optional. #### Usage -{% tabs %} -{% tab title="Yarn" %} -```bash -# By default, the start command corresponds to a start npm script: -yarn start --enable-logging -# if there is no start script -yarn electron-forge start --enable-logging -``` -{% endtab %} - -{% tab title="npm" %} ```bash # By default, the start command corresponds to a start npm script: npm start --enable-logging # if there is no start script npx electron-forge start --enable-logging ``` -{% endtab %} -{% endtabs %} ## Programmatic usage diff --git a/config/plugins/auto-unpack-natives.md b/config/plugins/auto-unpack-natives.md index 922a3db..fcd657d 100644 --- a/config/plugins/auto-unpack-natives.md +++ b/config/plugins/auto-unpack-natives.md @@ -10,19 +10,9 @@ This plugin will automatically add all native Node modules in your `node_modules ## Installation -{% tabs %} -{% tab title="Yarn" %} -```shell -yarn add --dev @electron-forge/plugin-auto-unpack-natives -``` -{% endtab %} - -{% tab title="npm" %} ```shell npm install --save-dev @electron-forge/plugin-auto-unpack-natives ``` -{% endtab %} -{% endtabs %} ## Usage diff --git a/config/plugins/electronegativity.md b/config/plugins/electronegativity.md index 85238ad..4eef26d 100644 --- a/config/plugins/electronegativity.md +++ b/config/plugins/electronegativity.md @@ -10,19 +10,9 @@ The Electronegativity plugin integrates Doyensec's [Electronegativity tool](http ## Installation -{% tabs %} -{% tab title="Yarn" %} -```shell -yarn add --dev @electron-forge/plugin-electronegativity -``` -{% endtab %} - -{% tab title="npm" %} ```shell npm install --save-dev @electron-forge/plugin-electronegativity ``` -{% endtab %} -{% endtabs %} ## Usage diff --git a/config/plugins/local-electron.md b/config/plugins/local-electron.md index 28c25c6..ee6ae00 100644 --- a/config/plugins/local-electron.md +++ b/config/plugins/local-electron.md @@ -14,19 +14,9 @@ If you want to set up a local build of Electron, you should check out [Electron ### Installation -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn add --dev @electron-forge/plugin-local-electron -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm install --save-dev @electron-forge/plugin-local-electron ``` -{% endtab %} -{% endtabs %} ### Usage diff --git a/config/plugins/webpack.md b/config/plugins/webpack.md index f83c2b0..1fd3adc 100644 --- a/config/plugins/webpack.md +++ b/config/plugins/webpack.md @@ -237,19 +237,10 @@ If you used the [Webpack](../../templates/webpack-template.md) or [TypeScript + If you are setting up the plugin manually, you can make native modules work by adding the following two loaders to your `module.rules` configuration in your Webpack config. Ensure you install both [`node-loader`](https://www.npmjs.com/package/node-loader) and [`@vercel/webpack-asset-relocator-loader`](https://www.npmjs.com/package/@vercel/webpack-asset-relocator-loader) as development dependencies. -{% tabs %} -{% tab title="Yarn" %} -```shell -yarn add --dev node-loader @vercel/webpack-asset-relocator-loader@1.7.3 -``` -{% endtab %} -{% tab title="npm" %} -```shell +```bash npm install --save-dev node-loader @vercel/webpack-asset-relocator-loader@1.7.3 ``` -{% endtab %} -{% endtabs %} {% hint style="warning" %} Electron Forge monkeypatches the asset relocator loader in order for it to work with Electron properly, so the version has been pinned to ensure compatibility. If you upgrade that version, you do so at your own risk. diff --git a/guides/developing-with-wsl.md b/guides/developing-with-wsl.md index c3375fc..2f55822 100644 --- a/guides/developing-with-wsl.md +++ b/guides/developing-with-wsl.md @@ -8,8 +8,6 @@ If you're using [Windows Subsystem for Linux \(WSL\)](https://docs.microsoft.com Fortunately, one of the features of WSL is that you can run Windows executables from a WSL terminal seamlessly. The caveat is that you'll need to reinstall Electron in order to pick up the prebuilt binaries for Windows instead of Linux. Inside a WSL terminal, assuming that you've installed Node.js for Linux, you can run: -{% tabs %} -{% tab title="NPM" %} ```bash # If node_modules exists already that was installed in WSL: @@ -24,38 +22,14 @@ npm install --platform=win32 npm_config_platform=win32 npm install ``` -{% endtab %} - -{% tab title="Yarn" %} -```bash -# If node_modules exists already that was installed in WSL: - -rm -r node_modules - -# then: - -npm_config_platform=win32 yarn -``` -{% endtab %} -{% endtabs %} Then, start the Electron app in development mode as usual via `npm start` or `yarn start` _\(respectively\)_. For package/make/publish, you'll still need to specify the platform if you want to generate bundles/distributables for Windows. -{% tabs %} -{% tab title="NPM" %} ```bash npm run make -- --platform=win32 ``` -{% endtab %} - -{% tab title="Yarn" %} -```bash -yarn make --platform=win32 -``` -{% endtab %} -{% endtabs %} {% hint style="warning" %} Some of the dependencies of Electron Forge don't quite work with WSL, as they don't detect that they're running in WSL _\(instead of Linux\)_ and thus tries to run certain tooling provided as Windows executables in... Wine. We are actively working on making the dependent tooling WSL-aware. The workaround is to run package/make/publish outside of WSL. diff --git a/guides/framework-integration/react-with-typescript.md b/guides/framework-integration/react-with-typescript.md index c9f3dfb..71c994a 100644 --- a/guides/framework-integration/react-with-typescript.md +++ b/guides/framework-integration/react-with-typescript.md @@ -18,21 +18,10 @@ Create the app with the [TypeScript + Webpack template](../../templates/typescri Add the basic React packages to your `dependencies` and the corresponding types to your `devDependencies`: -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn add react react-dom -yarn add --dev @types/react @types/react-dom -``` -{% endtab %} - -{% tab title="NPM" %} ```bash npm install --save react react-dom npm install --save-dev @types/react @types/react-dom ``` -{% endtab %} -{% endtabs %} ### Integrate React code diff --git a/guides/framework-integration/react.md b/guides/framework-integration/react.md index abc5c5d..ba2ce57 100644 --- a/guides/framework-integration/react.md +++ b/guides/framework-integration/react.md @@ -14,19 +14,9 @@ The following guide has been tested with React 18, Babel 7, and Webpack 5. Create the app with the [Webpack template](../../templates/webpack-template.md). Add the following packages to your `devDependencies` so that JSX and other React features can be used properly: -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn add --dev @babel/core @babel/preset-react babel-loader -``` -{% endtab %} - -{% tab title="NPM" %} ```bash npm install --save-dev @babel/core @babel/preset-react babel-loader ``` -{% endtab %} -{% endtabs %} Set up the [`babel-loader`](https://www.npmjs.com/package/babel-loader)module with the [React preset](https://babeljs.io/docs/en/babel-preset-react) in `webpack.rules.js`: @@ -53,19 +43,9 @@ module.exports = [ Add the basic React packages to your `dependencies`: -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn add react react-dom -``` -{% endtab %} - -{% tab title="NPM" %} ```bash npm install --save react react-dom ``` -{% endtab %} -{% endtabs %} ### Integrate React code diff --git a/import-existing-project.md b/import-existing-project.md index 6d99548..d881295 100644 --- a/import-existing-project.md +++ b/import-existing-project.md @@ -23,31 +23,11 @@ These steps will get you set up with a basic build pipeline that can create [squ Importing an existing Electron app into the Electron Forge workflow can be done automatically using Forge's `import` command. -{% tabs %} -{% tab title="Yarn 1" %} -```shell -cd my-app -yarn add --dev @electron-forge/cli -yarn electron-forge import -``` -{% endtab %} - -{% tab title="npm 6" %} -```bash -cd my-app -npm install --save-dev @electron-forge/cli -npx electron-forge import -``` -{% endtab %} - -{% tab title="npm 7" %} ```shell cd my-app npm install --save-dev @electron-forge/cli npm exec --package=@electron-forge/cli -c "electron-forge import" ``` -{% endtab %} -{% endtabs %} This script will set up Forge to package your app and build installers for it. @@ -63,21 +43,10 @@ If the import script does not work for some reason, you can also install Forge m First, install Forge's CLI and the target Makers as devDependencies in your project. -{% tabs %} -{% tab title="Yarn 1" %} -```shell -cd my-app -yarn add --dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-deb @electron-forge/maker-zip -``` -{% endtab %} - -{% tab title="npm" %} ```bash cd my-app npm install --save-dev @electron-forge/cli @electron-forge/maker-squirrel @electron-forge/maker-deb @electron-forge/maker-zip ``` -{% endtab %} -{% endtabs %} ### Configuring package.json @@ -142,21 +111,10 @@ In the above object, we configure each Maker that we installed into the `makers` When distributing a [squirrel.windows.md](config/makers/squirrel.windows.md "mention") app, we recommend installing [`electron-squirrel-startup`](https://github.com/mongodb-js/electron-squirrel-startup) as a runtime dependency to handle Squirrel events. -{% tabs %} -{% tab title="Yarn" %} -```shell -cd my-app -yarn add electron-squirrel-startup -``` -{% endtab %} - -{% tab title="npm" %} ```bash cd my-app npm install electron-squirrel-startup ``` -{% endtab %} -{% endtabs %} Then, add the following snippet as early as possible in the main process execution (before the `app.ready` event). @@ -172,21 +130,10 @@ You can also configure Forge to upload your release artifacts to a self-hosted r For example, for the S3 Publisher: -{% tabs %} -{% tab title="Yarn" %} -```shell -cd my-app -yarn add --dev @electron-forge/publisher-s3 -``` -{% endtab %} - -{% tab title="npm" %} ```bash cd my-app npm install --save-dev @electron-forge/publisher-s3 ``` -{% endtab %} -{% endtabs %} {% code title="package.json" %} ```json diff --git a/templates/typescript-+-webpack-template.md b/templates/typescript-+-webpack-template.md index 5d7da9e..5757ebf 100644 --- a/templates/typescript-+-webpack-template.md +++ b/templates/typescript-+-webpack-template.md @@ -6,19 +6,9 @@ description: Create a new Electron app with webpack and TypeScript. To get you up and running as fast as possible with [TypeScript](https://www.typescriptlang.org/) and [webpack](https://webpack.js.org/), we provide a template that makes use of the [`@electron-forge/plugin-webpack` module](../config/plugins/webpack.md) with sane TypeScript configuration defaults. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn create electron-app my-new-app --template=webpack-typescript -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-new-app -- --template=webpack-typescript ``` -{% endtab %} -{% endtabs %} {% hint style="warning" %} There have been reports that using the Git Bash command line on Windows specifically with this template will prevent the Electron app from rendering (packaged apps are fine). We recommend that on Windows, you use CMD.exe, PowerShell, or [WSL2](../guides/developing-with-wsl.md). diff --git a/templates/vite-+-typescript.md b/templates/vite-+-typescript.md index f43da02..253b72b 100644 --- a/templates/vite-+-typescript.md +++ b/templates/vite-+-typescript.md @@ -2,19 +2,9 @@ To get you up and running as fast as possible with [TypeScript](https://www.typescriptlang.org/) and [Vite](https://vitejs.dev/), we provide a template that makes use of the [`@electron-forge/plugin-vite` module](../config/plugins/vite.md) with sane TypeScript configuration defaults. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn create electron-app my-new-app --template=vite-typescript -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-new-app -- --template=vite-typescript ``` -{% endtab %} -{% endtabs %} Once you've initialized the template, you'll need to run `npm start` in the generated directory. diff --git a/templates/vite.md b/templates/vite.md index 15b30cb..4aa3fdc 100644 --- a/templates/vite.md +++ b/templates/vite.md @@ -6,19 +6,9 @@ description: Create a new Electron app with Vite. To get you up and running as fast as possible with [Vite](https://vitejs.dev/), we provide a template that makes use of the [`@electron-forge/plugin-vite` module](../config/plugins/vite.md), plus some preset Vite configuration options. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn create electron-app my-new-app --template=vite -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-new-app -- --template=vite ``` -{% endtab %} -{% endtabs %} Once you've initialized the template, you'll need to run `npm start` in the generated directory. diff --git a/templates/webpack-template.md b/templates/webpack-template.md index e3990ad..c35693c 100644 --- a/templates/webpack-template.md +++ b/templates/webpack-template.md @@ -6,18 +6,8 @@ description: Create a new Electron app with Webpack To get you up and running as fast as possible with the [webpack](https://webpack.js.org) bundler, we provide a template that makes use of the [`@electron-forge/plugin-webpack` module](../config/plugins/webpack.md), plus some preset webpack configuration options. This is by far the quickest way to getting a working webpack setup with Electron. -{% tabs %} -{% tab title="Yarn" %} -```bash -yarn create electron-app my-new-app --template=webpack -``` -{% endtab %} - -{% tab title="npm" %} ```bash npm init electron-app@latest my-new-app -- --template=webpack ``` -{% endtab %} -{% endtabs %} Once you've initialized the template, you'll need to run `npm start` in the generated directory. See the [Webpack Plugin](../config/plugins/webpack.md) documentation for Electron Forge-specific configuration options.