README.md
# Gatsby Kontent.ai Packages
[](https://lerna.js.org/)
[](https://stackoverflow.com/tags/kontent-ai)
[](https://discord.gg/SKCxwPtevJ)
Monorepo with Gatsby Kontent.ai packages.
The repository contains the development site (`/site`) that could automatically load packages (`packages`) thanks to [npm workspaces](https://docs.npmjs.com/cli/using-npm/workspaces).
## Content
### Packages
| Package | Summary | Version |
| :---------------------------------------------------------------------: | :------------------------------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------------------------------: |
| [Gatsby Source Kontent.ai Plugin](/packages/gatsby-source#readme) | plugin providing data from Kontent.ai REST API to Gatsby GraphQL model | [](https://badge.fury.io/js/@kontent-ai%2Fgatsby-source) |
| [Gatsby Kontent.ai Components](/packages/gatsby-components#readme) | package containing React components useful when processing Kontent.ai data to site | [](https://badge.fury.io/js/@kontent-ai%2Fgatsby-components) |
### Site
[](https://app.netlify.com/sites/kontent-ai-gatsby-packages/deploys)
- [Development Site](/site#readme) - Site using for development purposes and code examples showcasing packages possibilities
### Examples
#### Navigation showcase
[](https://app.netlify.com/sites/kontent-ai-gatsby-example-navigation/deploys)
- [Navigation showcase](/examples/navigation#readme) - Showcase including the navigation best practices. Description, how to do the content modeling with all benefits of the modular content as well as have tree-based menu structure.
#### Resolution showcase
[](https://app.netlify.com/sites/kontent-ai-gatsby-example-resolution/deploys)
- [Resolution showcase](/examples/resolution#readme) - Demonstration how to resolve the Rich Text element and it's inline images, inline content items, and content components.
#### Relationships showcase
[](https://app.netlify.com/sites/kontent-ai-gatsby-example-relationships/deploys)
- [Relationships showcase](/examples/relationships#readme) - Schema customization examples demonstrating relationship possibilities among Kontent.ai GraphQL nodes.
#### DSG and SSR showcase
[](https://app.netlify.com/sites/kontent-ai-gatsby-example-dsg-ssr/deploys)
- [DSG and SSR showcase](/examples/dsg-ssr#readme) - Example showcasing Deferred Static Generation and Server side Rendering features with Kontent.ai.
## Development
### Prerequisites
- [Nodejs](https://nodejs.org/en/)
### Install
1. Install packages
```sh
npm install # install all npm dependencies in the repository
```
2. Start watch mode packages
```sh
npm run watch # run watch mode through all packages source code
```
3. Run development site
```sh
npm run develop:site # run `gatsby develop` command in the development site
```
Now you are good to go. You could start browsing <http://localhost:8000> for development site and <http://localhost:8000/___graphql> for [GraphiQL explorer](https://github.com/graphql/graphiql/blob/master/packages/graphiql/README.md).
### Tests
To run all tests, there is npm script prepared.
```sh
npm run test # run test script in all packages as well as in the development site
```
- Packages are using [Jest](http://jest.org/) framework for testing.
### Build
To build all of the packages as well as a development site, you could use one command.
```sh
npm run build # run build script in all packages as well as in the development site
```
### Lint
To lint all of the packages as well as a development site, you could use one command.
```sh
npm run lint # run lint script in all packages as well as in the development site
```
- Packages are using [ESLint](https://eslint.org/) with Typescript plugins for linting.
## Publishing
As a publishing framework, there is a [Lerna](https://github.com/lerna/lerna) framework set up. This package is using [Fixed/Locked mode](https://github.com/lerna/lerna#fixedlocked-mode-default). All minor and major changes should publish all packages, in case of patch version, it is up to developer decision.
### How to publish new version
If you have the rights to publish packages, just use [`lerna`](https://github.com/lerna/lerna/tree/master/commands/publish#readme) and specify the version when prompted. All the changes made by lerna are automatically committed.
A typical scenario is when everything is ready and you want to publish the version, just use command.
```sh
npx lerna publish --tag-version-prefix=''
```
That should summarize the publish information and prompt you to define the version number and acknowledge the publish. Once everything is OK and you acknowledge the publish:
- the new version is published to npm
- `<YOUR VERSION>` is set to [`lerna.json`'s `version`](lerna.json)
- commit with this change (and package.json files version changes) is pushed to the repository
- commit also contains tag `<YOUR VERSION>` that could be used for creating GitHub release if you want
:bulb: If you want to test out the beta version first (which is recommended) use following command and if everything is OK, release another patch version as the final version.
```sh
npx lerna publish --tag-version-prefix='' --dist-tag=beta
```