🍬 SWEET HUB ⚙

Wat?

So, you want to build an OpsHub panel...

What doesn't kill you, only makes you stronger

— Friedrich Nietzsche

Right now the simplest form of a devloop for building a panel is bittersweet – bitter in that you need to push changes to your Bitbucket repo and then hit the "Reload Panel" button to refresh it, but sweet in that those two steps are a heck of a lot faster than redeploying a service to Micros.

— OpsHub documentation

Such dev process makes me really, really angry after few iterations. (╯°□°）╯︵ ┻━┻

If you OK with that, or with another solution by OpsHub team - this lib is not for you.

Otherwise, I have a good news...

YES, with this thing you can develop your panels locally, with react, webpack, hot-reload and whatever you want, like regular web app in 2017.

How?

Set-up webpack, webpack-dev-server, install your modules, etc.

Then, install and import this lib:

import sweethub from '@atlassian-partner-engineering/sweethub'

const OpsHub = await sweethub.opsHub()
const destUrl = OpsHub.selectedService().proxyUrl('/api/admin/users')

So, this OpsHub object will contain dummy mock with few methods if you run it locally, or just reference to window.OpsHub if you deploy it to OpsHub.

By the way, you don't need OpsHub object if you only want to perform requests to your admin api, it will require some code to deal with CSRF tokens, so here is ready to use request-like wrapper:

import sweethub from '@atlassian-partner-engineering/sweethub'

const request = sweethub.request()
await request.post('/api/admin/users', {name: 'John'}) // POST JSON body
await request.get('/api/admin/users', {sort: '-name'}) // GET with query-string params

Setup webpack-dev-server to proxy your API requests:

  devServer: {
    contentBase: './',
    port: 8000,

    proxy: {
      '/api/*': { target: 'http://localhost:8080/' }
    },

    staticOptions: {
      index: 'panel.html'
    },

    inline: true
  },

Setup webpack to use your favorite large libs as externals in production:

  externals: process.env['NODE_ENV'] === 'production' ? {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'graphiql': 'GraphiQL'
  } : {},

That way you will have development build of react and other libs while develop locally.

Include libs from CDN in your panel.html

<!--
  That's hack required for <script> tags, since they did not work when you have active requirejs.
  See https://github.com/requirejs/requirejs/issues/947
  Another option is to use requirejs instead or with webpack, but I think it will be much more painful
  (requirejs in 2017? Srsly?).
-->
<script src="https://unpkg.com/requirejs-toggle"></script>

<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/graphiql/0.9.3/graphiql.min.js"></script>

<script src="https://unpkg.com/requirejs-toggle"></script>

<script src="public/bundle.js"></script>

Run server-side of your panel locally, turn off ASAP for dev environment:

return function checkASAP(req, res, next) {
  if (process.env.NODE_ENV === 'development') {
    return next()
  }
  // perform ASAP check
  // ...
}

I think that's it. Checkout this repo for complete example https://bitbucket.org/atlassian/opshub-crm-admin-panel