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.
Updated 2 months ago