NPM watcher that helps to access data in the linked directory

intro.md

Linking directory in ReactJS project

I found that users of Create-React-App script have issues with building few projects that are based on the same "core" library. Let's imagine that you have a ui directory where you keep all UI React components. And you have two projects - blog and shop.

Now you wish to use the shared UI components in both these projects. But if you will create a symlink to a "raw" source code (where you use ES2015) - you will see that your code can't be imported, because it expects that they should be already compiled.

To solve this problem we need to do few simple steps:

1. go to the shared ui directory and run here a compiler. It will watch for changes and will recompile files when you will make changes in them.
2. go to your project directory blog or shop and create a symlink to a directory build that contains the compiled source code.
3. work with your projcts shop and blog as you do normally. You can import components from your ui library and your changes in this library will be visible in both your projects.

Before you start, let's update your package.json file in both your projects (blog and shop) as shown below (or take some parts from it to adjust your file). And run npm install inside your shared directory to install all required libraries to properly compile your source code.

cd ~/projects/ui
npm run build:watch

cd ~/project/blog/src
ln ~/projects/ui/build ui

cd ~/project/blog
npm start

NOTE: Use a normal import like you do for other components in your ReactJS app. For exmaple you can import a button like this:

import Button from './ui/Button';

Pros

• You can use a shared library between multiple projects.
• You can publish your shared library as open source, because it will be compiled and anybody can install it via npm install (if you wish)

Cons

• You always need to run at least two tabs in a terminal and run one process for compiling your shared library, and second one for compiling your exact project.

Thank you

If you find this information helpful - please share it to your friends.

Also I will be happy if you will add your star to this gist.

package.json

{
  "name": "my-project",
  "version": "1.0.0",
  "main": "src/index.js",
  "scripts": {
    "prepublish": "npm run build",
    "build": "npm run build:babel && npm run build:index",
    "build:index": "babel ./src/index.js --out-file ./build/index.es.js",
    "build:babel": "babel ./src --out-dir ./build --source-maps --ignore spec.js",
    "build:watch": "babel src --out-dir build --source-maps --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "babel": {
    "presets": [
      "es2015",
      "node5",
      "react"
    ],
    "plugins": [
      "add-module-exports",
      "transform-runtime"
    ]
  },
  "dependencies": {
    "babel-runtime": "^6.18.0",
    "css-loader": "^0.28.11"
  },
  "devDependencies": {
    "babel-cli": "^6.18.0",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-node5": "^12.0.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.4.1",
    "webpack": "^1.14.0"
  }
}

Looks that this issue will be fixed soon here: facebook/create-react-app#7993