planet.donarmstrong.com

Now that Indium 2.0 is around the corner, it’s about time to write this post!

You can see this article as the third part of my series of articles describing how to make Emacs a JavaScript development environment. If you haven’t read it yet, you should jump to the first and second post first to get started.

About Indium 2.0

Indium 2.0 is not out yet, but if you’re installing Indium from MELPA, you’re already using it.

Indium is a JavaScript development environment for Emacs. It connects to a runtime (Browser or Node), and provides things like a REPL, inspector, live evaluation, and of course a stepping source debugger.

New project configuration

The upcoming release of Indium will feature much better project configuration with sourcemap support for most, if not all JavaScript projects, including React, VueJS, Meteor, Angular, and basically any project that uses Webpack or other bundlers that produce sourcemaps.

New client/server architecture

The new Indium will also be based on a client/server architecture, and will require the installation of the indium server like the following:

npm install -g indium

There are several reasons for this change, the most important one being the ability to reuse existing JavaScript libraries for handling WebSockets, source-maps and the Chrome Debug Protocol.

You can read the documentation of the new TCP protocol here.

As a result, Indium will be much more responsive.

Setting up Indium

Let’s start with the creation of a React project built with the CLI tool create-react-app.

sudo npm install -g create-react-app
create-react-app my-app
cd my-app
npm install
npm start

We need to tell Indium how to connect to our new project my-app. To do that, let’s create a .indium.json file at the root of the project:

{
  "configurations": [
    {
          "name": "Web Browser",
          "type": "chrome",
          "url": "http://localhost:3000"
    }
  ]
}

We only need one configuration, but Indium supports any number of configurations per project, including mixing NodeJS and Chrome.

Firing up Indium

To start Indium, you can either do M-x indium-connect to connect to a running JavaScript process (Chrome tab the example above), or do M-x indium-launch to start a new process and automatically connect to it.

For more information about setting up and starting Indium, read the Getting up and running section of the documentation.

Closing words

The new architecture of Indium is brand new, and I expect issues to be discovered. You can open issues on the GitHub issue tracker (please do!).

If you are unsure how to best report an issue for Indium, there’s a section in the manual for that!