Skip to content

Commit

Permalink
Merge pull request #545 from entando/ENDOC-533
Browse files Browse the repository at this point in the history 
ENDOC-533 Revamp Build and Publish a Simple Bundle
  • Loading branch information
@Lyd1aCla1r3
Lyd1aCla1r3 authored Aug 16, 2022
2 parents 12759e1 + 181ca10 commit 9eb8971
Show file tree
Hide file tree
Showing 2 changed files with 237 additions and 222 deletions.
230 changes: 119 additions & 111 deletions vuepress/docs/next/tutorials/create/pb/publish-simple-bundle.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,138 +4,146 @@ sidebarDepth: 2
# Build and Publish a Simple Bundle

## Overview
In this tutorial, you will learn how to create a simple Entando Bundle and deploy it into the [Entando Component Repository](../../../docs/getting-started/concepts-overview.md#entando-component-repository) (ECR). This involves manually defining a bundle with a single widget, checking the bundle artifacts into Git, applying the Entando Bundle custom resource to Kubernetes, and then installing the bundle into an application.

This tutorial describes how to create a simple Entando Bundle and deploy it into the [Entando Component Repository](../../../docs/getting-started/concepts-overview.md#entando-component-repository) (ECR). This process consists of 4 essential steps:

1. Define the bundle component(s)
2. Check the bundle artifacts into a Git repository
3. Apply the bundle custom resource to Kubernetes
4. Install the bundle into an application

## Prerequisites
* Use the [Entando CLI](../../../docs/getting-started/entando-cli.md#check-the-environment) to verify all dependencies are installed (e.g. Java, npm, Git).
``` sh
ent check-env develop
```
* Authenticated Git credentials, an empty Git repository and an available Entando instance are required for the commands below to execute without errors.

* Verify dependencies with the [Entando CLI](../../../docs/getting-started/entando-cli.md#check-the-environment): `ent check-env develop`
* Authenticated Git credentials
* An empty Git repository
* A running Entando instance

Publishing a bundle can be simplified by using the `ent prj` command and its publication system (pbs) convenience methods. Both the CLI and manual commands are provided.

## Create the Project Structure
First, create a parent project directory (e.g. `example-bundle`) along with a child bundle directory. In a project generated by the [Entando Component Generator](../../../docs/create/component-gen-overview.md), the microservice and micro frontend source files live under the parent directory.

``` sh
mkdir -p example-bundle/bundle; cd example-bundle/bundle
```
1. Create a parent project directory (e.g. `example-bundle`) and a child `bundle` directory:
``` sh
mkdir -p example-bundle/bundle; cd example-bundle/bundle
```

In a project generated by the [Entando Component Generator](../../../docs/create/component-gen-overview.md) (ECG), the microservice and micro frontend source files are stored in the parent directory.
## Add a Simple Widget

Create a widget directory
``` sh
mkdir widgets
```

Create a widget descriptor file within that directory
``` sh
touch widgets/example-widget.yaml
```

Populate the widget descriptor file `example-widget.yaml` with a simple definition. Make sure to retain the correct YAML indentation of 2 or 4 spaces.
``` yaml
code: example-widget
titles:
en: Example Widget
it: Widget d'esempio
group: free
customUi: <h2>Hi from Example Widget</h2>
```
1. Create a widget directory:
``` sh
mkdir widgets
```

2. Create a widget descriptor file within that directory:
``` sh
touch widgets/example-widget.yaml
```

3. Populate the widget descriptor file `example-widget.yaml` with a simple definition. Retain the correct YAML indentation of 2 or 4 spaces.
``` yaml
code: example-widget
titles:
en: Example Widget
it: Widget d'esempio
group: free
customUi: <h2>Hi from Example Widget</h2>
```
## Create the Bundle Descriptor
The main file processed by the Entando Component Repository is `descriptor.yaml`, which describes all of the components within the bundle. The name of the bundle descriptor file must be `descriptor.yaml` and it must be stored in the child bundle directory (e.g. `example-bundle/bundle`).
```sh
touch descriptor.yaml
```

Populate the bundle descriptor file with the following YAML definition
``` yaml
code: example-bundle
description: This is an example of an Entando bundle
components:
widgets:
- widgets/example-widget.yaml
```
Component descriptor file names and locations (e.g. `widgets/example-widget.yaml`) are arbitrary since the bundle descriptor explicitly points to those files. Convention is to group components by type with all widgets in one directory, all page templates in another, etc.
1. In the child bundle directory, create a bundle descriptor file named `descriptor.yaml`:
```sh
touch descriptor.yaml
```

All of a bundle's components are defined within `descriptor.yaml`, which is the main file processed by the ECR.

2. Add the following definition to `descriptor.yaml`:
``` yaml
code: example-bundle
description: This is an example of an Entando Bundle
components:
widgets:
- widgets/example-widget.yaml
```
Component descriptor file names and locations (e.g. `widgets/example-widget.yaml`) are arbitrary because the bundle descriptor explicitly points to those files. Convention is to group components by type with all widgets in one directory, all page templates in another, etc.

## Publish the Bundle

The bundle can be published using the CLI or the steps can be performed manually.
The steps to publish a bundle can be performed manually or automated with the CLI.

### CLI Steps
1. Change to the project directory if needed
```sh
cd example-bundle
```

2. Initialize the Entando project and accept the defaults
``` sh
ent prj init
```

3. Initialize the publication system. This step requires the empty Git repository URL (ending in .git) and your Git credentials.
``` sh
ent prj pbs-init
```

4. Publish the bundle to Git. By convention, the first version is assigned the tag `v0.0.1`, but the prefix "v" is optional.
``` sh
ent prj pbs-publish
```
Running just the command `ent prj pbs-publish` will quickly push subsequent iterations of the bundle to Git. You will be asked to input the bundle version each time. You must be consistent with versioning format and alphanumeric precedence to ensure that iterations are listed in the correct order.

5. The bundle can now be deployed into the Entando Component Repository with one command
``` sh
ent prj deploy
```
The `prj deploy` command uses the Git repository URL and project name (e.g. `example-bundle`) to create the custom resource.

Jump to [Install the Bundle into an Application](#install-the-bundle-into-an-application) to finish installing your bundle.
1. From the project directory, initialize an Entando project with default settings:
``` sh
ent prj init
```

2. Initialize the publication system. This requires the URL of an empty Git repository (ending in .git) and your Git credentials.
``` sh
ent prj pbs-init
```

3. Publish the bundle to Git. By convention, the first version is assigned the tag `v0.0.1`, but the prefix "v" is optional.
``` sh
ent prj pbs-publish
```
To quickly push subsequent iterations of the bundle to Git, execute the `ent prj pbs-publish` command. Each push will prompt you to input the corresponding bundle version. You must be consistent with versioning format and alphanumeric precedence to ensure that iterations are listed in the correct order.

4. Deploy the bundle into the ECR:
``` sh
ent prj deploy
```
The `prj deploy` command uses the Git repository URL and project name (e.g. `example-bundle`) to create the custom resource.

### Manual Steps
1. Change to the bundle directory if needed
``` sh
cd example-bundle/bundle
```

2. Run the following commands to initialize Git and commit the files
``` sh
git init
git add .
git commit -m "Init Git repository"
```
1. From the bundle directory, run the following commands to initialize Git and commit the files:
``` sh
git init
git add .
git commit -m "Init Git repository"
```

2. Add your remote repository as origin and push the bundle:
``` sh
git remote add origin https://your/remote/repository.git
git push -u origin master
```

3. Publish a Git tag:
``` sh
git tag -a "v0.0.1" -m "My first tag"
git push --tags
```

5. Create the Kubernetes custom resource for your bundle:
``` sh
ent bundler from-git --name=example-bundle --namespace=entando --repository=https://YOUR-REMOTE-REPOSITORY.git --dry-run > example-bundle.yaml
```
A bundle must be published to Git before you can create a custom resource for it. Provide the URL of the bundle's remote Git repository (ends with ".git"). To include a thumbnail for your bundle, use the option `--thumbnail-file` or `--thumbnail-url`.

6. Transfer the file to your VM, e.g:
```
multipass transfer example-bundle.yaml entando:
```

7. Apply the bundle definition to Kubernetes:
```
kubectl -n entando apply -f example-bundle.yaml
```

8. Confirm the presence of your custom resource:
```
kubectl get EntandoDeBundle -n entando
```

3. Add your remote repository as origin and push the bundle
``` sh
git remote add origin https://your/remote/repository.git
git push -u origin master
```

4. Publish a Git tag
``` sh
git tag -a "v0.0.1" -m "My first tag"
git push --tags
```

5. Now that you've published your bundle to Git, you can create the Kubernetes custom resource for it.

Run the `ent bundler from-git` command, providing your remote Git repository URL via the `--repository` option and the correct namespace via `--namespace`. You can also include a thumbnail for your bundle with `--thumbnail-file` or `--thumbnail-url`.

``` sh
ent bundler from-git --name=example-bundle --namespace=entando --repository=https://your/remote/repository.git --dry-run > example-bundle.yaml
```

6. Apply this definition to Kubernetes. You may need to first transfer the file to your VM, e.g with `multipass transfer`.
## Install the Bundle into an Application

```
kubectl -n entando apply -f example-bundle.yaml
```
1. In your Entando instance, go to `App Builder` → `Component Repository`

7. Confirm the presence of your custom resource with the command `kubectl get EntandoDeBundle -n entando`.
2. Click `Install`. A bundle with multiple iterations allows version selection.

## Install the Bundle into an Application
Your bundle should appear in `App Builder` → `Component Repository` in your Entando instance. Clicking `Install` should allow version selection if your bundle has multiple iterations.
3. Verify the `Install` button changes to `Uninstall` to indicate that the installation completed successfully

The Entando Platform will then download and install the components contained in the bundle. Once complete, you should see the `Install` button change to give you the option to `Uninstall` that specific version. If you navigate to `Components` → `Micro Frontends & Widgets`, you should find your custom widget within the `User` section.
4. Go to `App Builder` → `Components` → `Micro Frontends & Widgets` to confirm that your bundle appears in the "User" section
Loading

0 comments on commit 9eb8971

Please sign in to comment.