Standalone build/development pipeline for Electron with a React front-end.
electron-react-builder
is a CLI tool that comes packaged with everything you need to build and develop an Electron app with a React front-end. Why? So you can unbloat your project from extraneous build scripts and dev dependencies and focus on making your product awesome.
Notable features:
- React + Redux + React Router 4
- Styled Components
- ESLint + StyleLint config
- Hot module reloading with Webpack dev server
- Multilingual setup
- Continuous integration setup with CircleCI
- Auto-publishing via GitHub releases
- Auto-updating for distributed apps
Follow these steps to quickly set up a project built with electron-react-builder
and create your first release:
- Install
electron-react-builder
globally:$ npm install -g https://github.com/andrewscwei/electron-react-builder
- Generate the project with [
electron-react-builder
], then follow the on-screen instructions to install dependencies and run the dev server:$ electron-react-builder init
- Set up CircleCI:
- Push your project to GitHub.
- Log in to CircleCI dashboard.
- Projects > Add Project > Find the GitHub repo for your project > Setup project > Start building.
- In your project settings > Checkout SSH keys > Add user key.
- In your project settings > Environment Variables > Create the following variables:
GH_TOKEN
: GitHub access token (for permission to create releases in a private repo).WIN_CSC_LINK
: Windows code sign certificatebase64
string.WIN_CSC_KEY_PASSWORD
: Password to unlockWIN_CSC_LINK
.
- Trigger rebuild on CircleCI (your first build probably failed). Once complete, your app create a drafted release in its repo. Note that it is still a draft. Edit it to make it an official release.
- Set up Nuts release server:
- Check the
README.md
of the generated project. - Under Publishing to Remote Client, you'll find a Deploy to Heroku button, follow the instructions:
- Provide an app name, best to use
<repo_name>-nuts
. - Select your region, leave it in the US.
- Provide the GitHub repo of your project in the format
<user>/<repo_name>
. - Provide GitHub access token, either look for an existing one or create your own.
- Provide API username and password—these can be anything as long as you remember them, they are only used if you need to access the API of the Nuts server, which is almost never.
- Select Deploy app and that's that, take note of your Nuts server's URL, which should be
https://<repo_name>-nuts.herokuapp.com
.
- Provide an app name, best to use
- Check the
- Set up a GitHub webhook for your repo so that whenever a release is published, your Nuts server is notified and will pull the latest release:
- Go to your project settings in GitHub > Webhooks > Add webhook.
- Set Payload URL to
<nuts_server_url>/refresh
. - Select
application/json
for Content type. - Set Secret to
secret
. - Select Let me select individual events. and only check Release.
- In your app's
package.json
file, edit the fieldbuild.publish[0].url
. It should be<nuts_server_url>/download/latest
. This tells the published app where to look for updates.