Sharing code between projects

You can use any standard means of the JavaScript community (like publishing npm packages or similar) to share code between different projects. However, we prepared your Frontastic code structure for easy sharing between different Frontastic projects for you. If you want to use this mechanism, follow the steps below.

Create the code folder

We recommend putting any shared code into the special package directory _shared. In there, you can structure your code as you like, but keeping the Frontastic base structure for projects isn't the worst idea. If you want to share frontend code, backend code, and types, the structure to create in your repository will look like this:

packages/
├── …
└── _shared
    ├── backend
    ├── frontend
    └── types

You can then put any shared code into the corresponding directory or sub-directories. Each sub-folder works the same, so the backend folder is used in the following examples.

📘

The Frontastic CLI will automatically ignore the special _shared project and won't offer you to run Frontastic on it.

Register package and workspace

📘

This is a suggestive guide and not an exclusive solution. You can choose any solution that fits your cause and we don't offer technical support for setting up workspaces.

To share code in a package style way, you need to create a package.json in the corresponding directory (in this example, packages/_shared/backend):

{
  "name": "@example/_shared-backend",
  "version": "0.0.1",
  "description": "TODO",
  "license": "UNLICENSED",
  "private": true
  …
}

📘

Instead of example, you should use a meaningful vendor prefix for your package. We usually recommend using your customer ID.

To make your shared code packages to other code in your repository, you can register a Yarn workspace for them in the global package.json in your code repository:

{
    "private": true,
    "workspaces": {
        "packages": [
            …
            "packages/_shared/backend"
        ],
        …
    }
}

This will make the newly-created package available for requiring it in any of the other packages in your repository.

Requiring shared code

You can now add the created package as a dependency to your other packages by simply requiring it in the corresponding package.json (for example, in packages/<project>/backend):

{
  …
  "dependencies": {
    …
    "@example/_shared-backend": "*"
  }
}

And import from that package anywhere in your code like this:

import { loadMovieData } from '@example/_shared-backend';

Recipe: Pickup changes in shared code

If you maintain shared code independent from your Frontastic project packages (for example, using test-driven development), you should be fine with the solution until the last step.

But if you develop shared code in the scope of your normal Frontastic project packages, you might get frustrated fast: webpack won't pick up changes in packages/_shared/backend and trigger an automatic re-compile while you're working in packages/<project>/backend. The changes will be compiled when you restart the Frontastic CLI, but there's no hot re-compile.

The webpack extension webpack-watch-files-plugin can help you ship around this issue. To do so, follow these steps:

Add webpack-watch-files-plugin as a dependency to your Frontastic project package as a development dependency in the package.json in packages/<project>/backend:

{
  …
  "devDependencies": {
    …
    "webpack-watch-files-plugin": "^1"
  }
}

Run yarn install to get the dependency. Now you can adjust your webpack config in packages/<project>/backend/webpack/webpack.common.js by adding:

const WebpackWatchPlugin = require('webpack-watch-files-plugin').default;

module.exports = {
  …
  plugins: [
    …
    new WebpackWatchPlugin({
      files: [path.resolve(__dirname, '../../../_shared/backend')]
    })
  ],
};

Now restart the Frontastic CLI, and you should get a re-build of your project package every time you change something in the shared package.