* initialized next.js project * finished markdown sections * added operation schema component * change page metadata * eslint fixes * fixes related to deployment * added response schema * resolve max stack issue * support for different property types * added support for property types * added loading for components * added more loading * type fixes * added oneOf type * removed console * fix replace with push * refactored everything * use static content for description * fixes and improvements * added code examples section * fix path name * optimizations * fixed tag navigation * add support for admin and store references * general enhancements * optimizations and fixes * fixes and enhancements * added search bar * loading enhancements * added loading * added code blocks * added margin top * add empty response text * fixed oneOf parameters * added path and query parameters * general fixes * added base path env variable * small fix for arrays * enhancements * design enhancements * general enhancements * fix isRequired * added enum values * enhancements * general fixes * general fixes * changed oas generation script * additions to the introduction section * added copy button for code + other enhancements * fix response code block * fix metadata * formatted store introduction * move sidebar logic to Tags component * added test env variables * fix code block bug * added loading animation * added expand param + loading * enhance operation loading * made responsive + improvements * added loading provider * fixed loading * adjustments for small devices * added sidebar label for endpoints * added feedback component * fixed analytics * general fixes * listen to scroll for other headings * added sample env file * update api ref files + support new fields * fix for external docs link * added new sections * fix last item in sidebar not showing * move docs content to www/docs * change redirect url * revert change * resolve build errors * configure rewrites * changed to environment variable url * revert changing environment variable name * add environment variable for API path * fix links * fix tailwind settings * remove vercel file * reconfigured api route * move api page under api * fix page metadata * fix external link in navigation bar * update api spec * updated api specs * fixed google lint error * add max-height on request samples * add padding before loading * fix for one of name * fix undefined types * general fixes * remove response schema example * redesigned navigation bar * redesigned sidebar * fixed up paddings * added feedback component + report issue * fixed up typography, padding, and general styling * redesigned code blocks * optimization * added error timeout * fixes * added indexing with algolia + fixes * fix errors with algolia script * redesign operation sections * fix heading scroll * design fixes * fix padding * fix padding + scroll issues * fix scroll issues * improve scroll performance * fixes for safari * optimization and fixes * fixes to docs + details animation * padding fixes for code block * added tab animation * fixed incorrect link * added selection styling * fix lint errors * redesigned details component * added detailed feedback form * api reference fixes * fix tabs * upgrade + fixes * updated documentation links * optimizations to sidebar items * fix spacing in sidebar item * optimizations and fixes * fix endpoint path styling * remove margin * final fixes * change margin on small devices * generated OAS * fixes for mobile * added feedback modal * optimize dark mode button * fixed color mode useeffect * minimize dom size * use new style system * radius and spacing design system * design fixes * fix eslint errors * added meta files * change cron schedule * fix docusaurus configurations * added operating system to feedback data * change content directory name * fixes to contribution guidelines * revert renaming content * added api-reference to documentation workflow * fixes for search * added dark mode + fixes * oas fixes * handle bugs * added code examples for clients * changed tooltip text * change authentication to card * change page title based on selected section * redesigned mobile navbar * fix icon colors * fix key colors * fix medusa-js installation command * change external regex in algolia * change changeset * fix padding on mobile * fix hydration error * update depedencies
199 lines
5.0 KiB
Markdown
199 lines
5.0 KiB
Markdown
---
|
||
description: 'Learn how to prepare and publish your custom module to NPM, then how to install it in the Medusa backend.'
|
||
---
|
||
|
||
# How to Publish a Module
|
||
|
||
In this document, you'll learn how to prepare and publish your custom module to NPM, then how to install it in the Medusa backend.
|
||
|
||
## Prerequisites
|
||
|
||
This guide assumes you've already created a custom module. If not, follow [this guide](./create.mdx) first to create a module.
|
||
|
||
You also need an [NPM account](https://www.npmjs.com/signup) to publish the module with.
|
||
|
||
---
|
||
|
||
## Step 1: Create an NPM Project
|
||
|
||
If your module isn't located in an NPM project already, you must create one first that will hold your module.
|
||
|
||
To do that, run the following commands to create a directory and initialize an NPM project in it:
|
||
|
||
```bash npm2yarn
|
||
mkdir my-module
|
||
npm init
|
||
```
|
||
|
||
You’ll be asked a couple of questions related to your package, such as its name or license. You can keep the default for now or set them right away.
|
||
|
||
Once you’re done, you should have a `package.json` created in the directory.
|
||
|
||
---
|
||
|
||
## Step 2: Changes to package.json
|
||
|
||
In your `package.json` file, add or update the following fields:
|
||
|
||
```json title=package.json
|
||
{
|
||
// other fields
|
||
"main": "dist/index.js",
|
||
"publishConfig": {
|
||
"access": "public"
|
||
},
|
||
"files": [
|
||
"dist"
|
||
],
|
||
"devDependencies": {
|
||
"@medusajs/types": "^0.0.2",
|
||
"cross-env": "^5.2.1",
|
||
"typescript": "^4.4.4"
|
||
},
|
||
"scripts": {
|
||
"watch": "tsc --build --watch",
|
||
"prepare": "cross-env NODE_ENV=production npm run build",
|
||
"build": "tsc --build",
|
||
},
|
||
"dependencies": {
|
||
"@medusajs/modules-sdk": "^0.1.0",
|
||
}
|
||
}
|
||
```
|
||
|
||
This adds the necessary dependencies for development and publishing, including the `@medusajs/modules-sdk` package. It also adds the following scripts:
|
||
|
||
- `build`: can be used to manually build your module.
|
||
- `prepare`: can be used to prepare your module for publishing on NPM
|
||
- `watch`: (optional, for development) can be used to re-build your module whenever any changes occur without having to manually trigger the `build`.
|
||
|
||
---
|
||
|
||
## Step 3: Configure tsconfig.json
|
||
|
||
If you don't already have a `tsconfig.json` file, create one in the root of your NPM project with the following content:
|
||
|
||
```json title=tsconfig.json
|
||
{
|
||
"compilerOptions": {
|
||
"lib": [
|
||
"es2020"
|
||
],
|
||
"target": "2020",
|
||
"outDir": "./dist",
|
||
"esModuleInterop": true,
|
||
"declaration": true,
|
||
"module": "commonjs",
|
||
"moduleResolution": "node",
|
||
"emitDecoratorMetadata": true,
|
||
"experimentalDecorators": true,
|
||
"sourceMap": true,
|
||
"noImplicitReturns": true,
|
||
"strictNullChecks": true,
|
||
"strictFunctionTypes": true,
|
||
"noImplicitThis": true,
|
||
"allowJs": true,
|
||
"skipLibCheck": true,
|
||
},
|
||
"include": ["src"],
|
||
"exclude": [
|
||
"dist",
|
||
"./src/**/__tests__",
|
||
"./src/**/__mocks__",
|
||
"./src/**/__fixtures__",
|
||
"node_modules"
|
||
]
|
||
}
|
||
```
|
||
|
||
This allows you to use the recommended TypeScript configurations and sets the output directory to `dist`. This is essential for preparing your module for publishing.
|
||
|
||
---
|
||
|
||
## Step 4: Change Module Structure
|
||
|
||
To ensure that the files are built from the `src` directory to the `dist` directory, make sure to move the module content to a `src` directory inside the new NPM project.
|
||
|
||
---
|
||
|
||
## Step 5: Publish and Use Module
|
||
|
||
This section explains how to publish your module to NPM.
|
||
|
||
### Run Prepare Command
|
||
|
||
Before you publish or update your module, make sure to run the `prepare` command defined earlier:
|
||
|
||
```bash npm2yarn
|
||
npm run prepare
|
||
```
|
||
|
||
### Login
|
||
|
||
In your terminal, log in with your NPM account:
|
||
|
||
```bash
|
||
npm login
|
||
```
|
||
|
||
You’ll be asked to enter your NPM email and password.
|
||
|
||
### Publish Module Package
|
||
|
||
Once you’re logged in, you can publish your package with the following command:
|
||
|
||
```bash
|
||
npm publish
|
||
```
|
||
|
||
Your package is then published on NPM and everyone can use it and install it.
|
||
|
||
### Install Module
|
||
|
||
To install your published module, you can run the following command on any Medusa backend project:
|
||
|
||
```bash
|
||
npm install module-name
|
||
```
|
||
|
||
Where `module-name` is the name of your module.
|
||
|
||
### Add Module to medusa-config.js
|
||
|
||
In `medusa-config.js` on your Medusa backend, add your module to the exported configurations:
|
||
|
||
```js title=medusa-config.js
|
||
module.exports = {
|
||
// ...
|
||
modules: {
|
||
// ...
|
||
moduleType: {
|
||
resolve: "<module-name>",
|
||
options: {
|
||
// options if necessary
|
||
},
|
||
},
|
||
},
|
||
}
|
||
```
|
||
|
||
Where `<module-name>` is the name of your NPM package.
|
||
|
||
You can learn more about the available options in the [Create Module documentation](./create.mdx#step-3-reference-module).
|
||
|
||
### Update Module
|
||
|
||
To update your module at a later point, you can run the following command to change the NPM version:
|
||
|
||
```bash
|
||
npm version <type>
|
||
```
|
||
|
||
Where `<type>` indicates the type of version update you’re publishing. For example, it can be `major` or `minor`. You can see the [full list of types in NPM’s documentation](https://docs.npmjs.com/cli/v8/commands/npm-version).
|
||
|
||
Then, publish the new update:
|
||
|
||
```bash
|
||
npm publish
|
||
```
|