How to setup React for NPM publishing

Part 1: Setting up webpack

First, create webpack.config.npm.js by copying the current webpack config of the project for production deployment.

Modify webpack.config.npm.js in the following keys:

1. isEnvProduction: true (only if it exists)

2. isEnvDevelopment: false (only if it exists)

3. mode: "production" (only if it exists and it's not conditionally assigned)

4. Modify entry either to the following depending on the current configuration.

   If the project is generated by the latest Create React App as of 2019, it might have an array as the value. Modify it so it looks similar to the one below.

   entry: [
       isEnvDevelopment && require.resolve("react-dev-utils/webpackHotDevClient"),
       // Put the relative path to your App component
       "./path/to/your/AppComponent" // for example, "./src/App.js" 
   ].filter(Boolean)
   

   If the project is not generated by Create React App and the entry field contains a string, modify it so it contains the path to the App component.

   entry: {
       main: './src/js/components/App.jsx',
   }, 
   

5. Modify the output field to the following:

   If the project is generated by the latest Create React App as of 2019, it might have an array as the value. Modify it so it looks similar to the one below.

   output: {
       path: path.resolve('build'), // can be a dist as well if build is used for other purposes
       // Add /* filename */ comments to generated require()s in the output. pathinfo: true,
       // There will be one main bundle, and one file per asynchronous chunk.
       // In development, it does not produce real files.
       filename: "static/js/bundle.js",
       libraryTarget: "commonjs2",
       // We inferred the "public path" (such as / or /my-project) from homepage. // We use "/" in development.
       publicPath: '/',
   
       // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: (info) =>
       path.resolve(info.absoluteResourcePath).replace(/\\/g, "/") },
   }
   

   If the project is not generated by Create React App and it's a custom webpack configuration, modify the output so it contains the following fields:

   output: {
      path: path.resolve('build'), // can be a dist as well if build is used for other purposes filename: './bundle.js',
      libraryTarget: "commonjs2"
      }, 
   

6. Add Dotenv under the plugins field so we can provide different env fields for each environment.

   But before that, make sure that you installed dotenv-webpack as a devDependency.

   And require it in the webpack configuration. const Dotenv = require("dotenv-webpack");

   plugins: [
       new Dotenv({
       path: process.env.ENV_FILE // Path to .env file (this is the default) }),
       // other plugins 
   ]
   

7. Add the externals field

   First, require the package.json in the webpack file.

   const pkg = require("./package.json");

   Then add the externals field below in the plugins field.

       "plugins": [],
       "externals": [...Object.keys(pkg.peerDependencies)]
   

---

Part 2: Setting up package.json

1. Add react and react-dom as peerDependencies

   Modify your package.json by adding react and react-dom as peerDependencies aside from being dependencies.

   Your package.json should look like this below:

   {
   "dependencies": { 
       "react": "^16.7.0", 
       "react-dom": "^16.7.0"
   },
   "peerDependencies": {
       "react": "^16.7.0",
       "react-dom": "^16.7.0" }
   }
   

2. In your package.json scripts, add the following:

"prepublishOnly": "cross-env NODE_ENV=development ENV_FILE=./.env.dev webpack --config webpack.config.npm.js"

To run this script, make sure you have installed cross-env as a devDependency.

npm install cross-env --save-dev or yarn add cross-env --dev

---

Part 3: How to publish to NPM

First, make sure that the package name is scoped in the package.json, for example @team/app-name.

To publish to NPM, run the following commands depending on the environment:

npm publish --access restricted --tag environment-name For example,
npm publish --tag dev
npm publish --tag staging
npm publish --tag production

Wohoo, you've on your way to publishing your project in NPM as a private package.

---

Last part: How to install depending on the environment:

Install the package by specifying the environment name:

npm install @team/package-name@dev
npm install @team/package-name@staging
npm install @team/package-name@production

During deployment, all packages will be updated to get the appropriate package for that environment.

See install-integrations.sh.

#!/usr/bin/env bash
env=$1
npm install @temea/calendar@${env} @team/settings@${env} @team/feedback-analytics@${env} ....