Skip to content

💡 Looking for the Legacy Package Setup Guide?

Setup

Before we start working with our data we need to configure WarpDrive's build plugin and a Store to manage our data.

interchangable components talk with each otherinterchangable components talk with each other

Configure the Build Plugin

WarpDrive uses a babel plugin to inject app-specific configuration allowing us to provide advanced dev-mode debugging features, deprecation management, and canary feature toggles.

For most projects, the configuration is done inside of the project's babel configuration file. For ember apps that still have an ember-cli-build file, this plugin comes built-in to the toolchain and all you need to do is provide it the desired configuration in ember-cli-build.

babel.config.mjs
ts
import { babelPlugin } from '@warp-drive/core/build-config';

const macros = babelPlugin({
  // for universal apps this MUST be at least 5.6
  compatWith: '5.6',
});

export default {
  plugins: [
    ...macros.js
  ]
}

Configure The Store

The Store is the central piece of the WarpDrive experience, linking together how we handle requests, the schemas for what our data looks like, how to cache it, and what sort of reactive objects to create for that data.

WarpDrive provides a utility to quickly setup a store configured with recommended defaults.

WARNING

PolarisMode Isn't quite ready!

ts
import { useRecommendedStore } from '@warp-drive/core';
import { JSONAPICache } from '@warp-drive/json-api';

export default useRecommendedStore({
  cache: JSONAPICache,
  schemas: [
     // -- your schemas here
  ],
});

That's it! It's time to start working with your data.

Alternatively, to understand more about what the above setup does, you can read about manually configuring the store in the Advanced Guide

Released under the MIT License.