Importing Modules.md

Importing Modules with Apollo Universal Starter Kit

In this guide, we explain how you can import modules with Apollo Universal Starter Kit.

Table of Contents

• Importing Files
• Importing Assets
• Installing and Importing Dependencies

Importing Custom Modules

Apollo Universal Starter Kit is a Yarn Workspaces project. You can read about workspaces in the Yarn documentation. For now, we focus on how to import modules in our starter kit.

We recommend using absolute imports rather than relative paths. For example, in styles.less (located in your custom module) you need to import the basic styles from another module the following way:

@import '~@gqlapp/look-client-react/ui-antd/styles/index.less';

Importing Assets

Apollo Universal Starter Kit is a webpack-based project, so it follows the general approach to importing assets — webpack dependency management. You can look up the module modules/favicon to see how assets are imported.

As you can see in the code sample below, the project imports all the assets from the modules/favicon/common/assets folder:

// modules/favicon/common/index.js
const exportedAssets = {};

if (!__TEST__) {
  // Favicon.ico should not be hashed, since some browsers expect it to be exactly on /favicon.ico URL
  require('!file-loader?name=[name].[ext]!./assets/favicon.ico'); // eslint-disable-line

  // Require all files from assets dir recursively addding them into assets.json
  let req = require.context('!file-loader?name=[hash].[ext]!./assets', true, /.*/);
  req.keys().map(key => {
    exportedAssets[`${key.replace('./', '')}`] = req(key);
  });
}

export default exportedAssets;

To use new assets in your client side react code, import from the favicon package as follows:

import assets from '@gqlapp/favicon-common';

export const Favicon = <img src={assets['favicon.ico']} />

Installing and Importing Dependencies

When installing dependencies for Apollo Universal Starter Kit, use Yarn. Once you have a dependency installed, you can use it by importing necessary classes or components with ES6 import.

Modules with custom namespaces

You may want to use your own NPM namespace for developing modules. The following will show you how to do this within the apollokit build system.

Within your module's package.json, you can change the namespace from @gqlapp to something like:

{
  "name": "@my-namespace/my-module-server-ts",
  "version": "0.1.0",
  "private": true
}

Then, to use a custom npm namespace

1. Change the namespace in the package.json file
2. Run ApolloKit like: MODULENAME_EXTRA="@my-namespace" yarn watch
3. You can add multiple, extra namespaces by: MODULENAME_EXTRA="@my-namespace|@my-other-ns"

Notes:

• You may have to rerun yarn to pickup new modules
• This is implemented in each packages' webpack.config.js