react-app-rewire-blockstack

Allows you to rewire your dev server and build process to support blockstack.js in a create-react-app project.

Blockstack offers simple, yet powerful APIs for building decentralized apps. While the APIs abstract away a lot of the difficulty of communicating with the Bitcoin blockchain (including authentication and file storage), there's still some difficulty in configuring a Blockstack app's development server and build processes––particularly with a CRA (create-react-app) setup. CRA is arguably the most popular tool for bootstrapping React apps. "CRA apps" come pre-configured with an incredible, zero-config, developer experience. The repository has over 53K stars on GitHub, and is actively maintained by Facebook. You can "eject" in a CRA app to extend the configuration (with custom webpack and babel plugins, for example). A little extra configuration is necessary to get blockstack.js working with CRA apps. However, the CRA documentation cautions against ejecting, as it results in less seamless React updates. A better route (in my opinion), is the react-app-rewired library, which allows for CRA apps to be configured via a custom fork of CRA's react-scripts. The react-app-rewire-blockstack package works with the latter method. To implement Blockstack in your CRA app, follow the instructions below:

Installation

# with yarn 
$ yarn add -D react-app-rewire-blockstack react-app-rewired
# with npm 
$ npm install -D react-app-rewire-blockstack react-app-rewired

Usage

1) Go into your `package.json` and make the following changes:

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom"
  }

2) In the root directory of your project, create a `config-overrides.js`

3) Copy and paste:

const {
  rewireBlockstackBuild,
  rewireBlockstackDevServer 
} = require('react-app-rewire-blockstack')
 
module.exports = {
 
  webpack: (config, env) => {
    if(env === 'production') {
      config = rewireBlockstackBuild(config)
    }
    return config
  },
 
  devServer: (configFunction) => {
    return (proxy, allowedHost) => {
      let config = configFunction(proxy, allowedHost)
      config = rewireBlockstackDevServer(config)
      return config
    }
  }
 
}