Devtools

Standalone app

You can start the devtools by using the NPM executor:

npx overmind-devtools@latest

Adding @latest just ensures that you break any caching, meaning you will always run the latest version

You can also install the devtools with your project, allowing you to lock a specific version of the devtools to your project:

npm install overmind-devtools

With the package CONCURRENTLY you can start the devtools as you start your build process:

npm install overmind-devtools concurrently

package.json

{
  ...
  "scripts": {
    "start": "concurrently \"overmind-devtools\" \"someBuildTool\""
  },
  ...
}

VS Code

You can also install the OVERMIND DEVTOOLS extension. This will allow you to work on your application without leaving the IDE at all.

If you are using the Insiders version of VSCode the extension will not work. It seems to be some extra security setting.

Connecting from the application

When you create your application it will automatically connect through localhost:3031, meaning that everything should just work out of the box. If you need to change the port, connect the application over a network (mobile development) or similar, you can configure how the application connects:

import { createOvermind } from 'overmind'
import { config } from './overmind'

const overmind = createOvermind(config, {
  devtools: '10.0.0.1:3031'
})

Connecting on Chromebook

ChromeOS does not expose localhost as normal. That means you need to connect with penguin.termina.linux.test:3031, or you can use the following plugin to forward localhost:

Connection Forwarder

Hot Module Replacement

A popular concept introduced by Webpack is HMR. It allows you to make changes to your code without having to refresh. Overmind automatically supports HMR. That means when HMR is activated Overmind will make sure it updates and manages its state, actions and effects. Even the devtools will be updated as you make changes.

Typically you add this, here showing with React:

import React from 'react'
import { render } from 'react-dom'
import { createOvermind } from 'overmind'
import { Provider } from 'overmind-react'
import { config } from './overmind'
import { App } from './components/App'


const overmind = createOvermind(config)

render(<Provider value={overmind}><App /></Provider>, document.querySelector('#app'))

// Allows this module to run again without refresh,
// meaning "createOvermind" runs again and automatically
// reconfigures
if (module.hot) {
  module.hot.accept()
}

Though you can also manually only update Overmind by:

index.js

import React from 'react'
import { render } from 'react-dom'
import { overmind } from './overmindInstance'
import { Provider } from 'overmind-react'
import { App } from './components/App'

render(<Provider value={overmind}><App /></Provider>, document.querySelector('#app'))

overmindInstance.js

import { createOvermind } from 'overmind'
import { config } from './overmind'

export const overmind = createOvermind(config)

// When this module runs again "createOvermind" is run
// and it automatically reconfigures
if (module.hot) {
  module.hot.accept()
}