I introduced Rekit Studio in the last article, and since then many people have been interested in using it in an existing React project. This article will introduce how to do that. To learn how to migrate is really just to learn how Rekit works. So this is not only a guide for the migration, but also an introduction to how Rekit works.

It’s actually better to think about adding Rekit Studio to existing projects rather than migrating it, because you don’t need to refactor all of your existing code to Rekit at one time. You can write new code with Rekit and leave old code as it is — your project will not be broken. Then you can refactor old code at anytime later when necessary. Maybe you want to see full-featured dependency diagraming or edit an old component with Rekit Studio.

We will take Redux’s TodoMVC implementation as our example, so you may need to check its source code first. It is created by create-react-app, which is an official and very popular React boilerplate. If your project is also created by this boilerplate, then this article will be more useful.

Prerequisite

There are only three prerequisites for your project to use Rekit:

React v0.14+ Redux ES6 modules

To be able to migrate, the project should be based on React, Redux. It doesn’t matter if your project doesn’t use React Router. But you may need an adapter to consume React Router’s JSON API, because Rekit uses it as the routing config. This enables Rekit to know how to create/update/delete and display routing rules.

Rekit uses Babylon, the parser used by Babel, to parse ES6 modules for refactoring and dependency diagraming. So it doesn’t support TypeScript or Flow projects for now.

1. Install rekit-core and rekit-studio

Both Rekit Studio and Rekit CLI use rekit-core to manage project elements. Install them to your project first:

yarn add rekit-core rekit-studio --dev

Or with npm:

npm install rekit-core rekit-studio --save-dev

2. Copy Rekit folder structure/files to your project

Rekit projects have a special folder structure. To create it for your project quickly, create a clean Rekit app and copy the folders/files to your project.

npm install rekit --global

rekit create my-app --clean

Then copy these two folders to your project:

src/

tools/

Keep in mind that there will be conflict with yours: for the folders, just merge them. For files, don’t replace any of your files and remember which ones have conflicts — then merge or rename them manually (I’ll introduce this later).

3. Start Rekit Studio

Rekit uses the script under tools/server.js to start dev servers and Rekit Studio. For an existing project, you should already have your own script for dev server and building. So we need to merge them.

There are 4 functions inside Rekit’s server.js:

startDevServer : read webpack config and start webpack dev server.

: read webpack config and start webpack dev server. buildDevDll : build third party libraries into Dll to improve Webpack’s performance for development using the Webpack dll plugin.

: build third party libraries into Dll to improve Webpack’s performance for development using the Webpack dll plugin. startStudioServer : start an Express server with Rekit Studio middleware

: start an Express server with Rekit Studio middleware startBuildServer: start an Express server for verifying the built bundle.

You can either edit server.js to start your dev server or edit your own npm start script by copying startStudioServer function to start Rekit Studio.

For Redux’s TodoMVC example, the script starts dev server is scripts/start.js , we edit it by appending the following code at the bottom to start Rekit Studio:

Alternatively, you can also just save above script as a separate file like start_rekit_studio.js then execute it with node, rather then insert it to your existing script.

Then we need to add necessary deps if not installed yet:

yarn add express express-history-api-fallback --dev

Or with npm:

npm install express express-history-api-fallback --save-dev

And config the Rekit Studio port in package.json:

{

...

"rekit": { "studioPort": 6090 },

...

}

Note that the “rekit” property in package.json is necessary because Rekit uses it to detect a Rekit project.

That’s all. Then you can start Rekit Studio with npm start (assuming you start Studio in your npm start script)! Access http://localhost:6090 for it. And the TodoMVC app itself runs as well. Still access http://localhost:3000 for the app:

We didn’t change anything, but Rekit Studio is now running behind.

Start using Rekit Studio to write code!