getting-started.md

SCION Microfrontend Platform	Projects Overview	Changelog	Contributing	Sponsoring

SCION Microfrontend Platform > Getting Started

This Getting Started Guide introduces you to the basics of the SCION Microfrontend Platform by developing a simple web application, allowing us to view our products, our customers and the products a customer has purchased.

In the course of this tutorial, we will create two independent applications, also referred to as micro apps, the Products App and the Customers App, each providing two microfrontends. We will also create a host app to integrate the two micro apps.

• Host App
  Provides the top-level integration container for microfrontends. It is the web app which the user loads into the browser that provides the main application shell, defining areas to embed microfrontends.

• Products App
  Provides the ProductList Microfrontend and Product Microfrontend, so that we can view our products.

• Customers Apps
  Provides the CustomerList Microfrontend and Customer Microfrontend, so that we can view our customers. The Customer Microfrontend further embeds the ProductList Microfrontend to show the products purchased by a customer.

When you have finished this guide, the app should look as follows: https://microfrontend-platform-getting-started.scion.vercel.app.

---

How to complete this guide

We recommend cloning the source code repository for this guide. It contains minimal application skeletons to get started straight away.

Follow these step-by-step instructions to get you ready

1. Clone the Git repository for this guide:

   git clone https://github.com/SchweizerischeBundesbahnen/scion-microfrontend-platform-getting-started

   or

   git clone [email protected]:SchweizerischeBundesbahnen/scion-microfrontend-platform-getting-started.git

2. Navigate to the new cloned project directory:

   cd scion-microfrontend-platform-getting-started

3. Checkout the skeleton branch:

   git checkout skeleton

   The directory structure should look like this.

   scion-microfrontend-platform-getting-started
   ├── host-app
   │   ├── src
   │   │   ├── index.html // HTML template
   │   │   ├── host.ts // TypeScript file
   │   │   └── host.scss // SASS stylesheet
   │   ├── package.json
   │   └── tsconfig.json
   │
   ├── products-app
   │   ├── src
   │   │   ├── product // Product Microfrontend
   │   │   │    ├── product.html
   │   │   │    ├── product.ts
   │   │   │    └── product.scss
   │   │   ├── product-list  // ProductList Microfrontend
   │   │   │    ├── product-list.html
   │   │   │    ├── product-list.ts
   │   │   │    └── product-list.scss
   │   │   ├── index.html
   │   │   ├── product.data.json
   │   │   ├── product.service.ts
   │   │   └── query-params.ts
   │   ├── package.json
   │   └── tsconfig.json
   │
   ├── customers-app
   │   ├── src
   │   │   ├── customer  // Customer Microfrontend
   │   │   │    ├── customer.html
   │   │   │    ├── customer.ts
   │   │   │    └── customer.scss
   │   │   ├── customer-list  // CustomerList Microfrontend
   │   │   │    ├── customer-list.html
   │   │   │    ├── customer-list.ts
   │   │   │    └── customer-list.scss
   │   │   ├── index.html
   │   │   ├── customer.data.json
   │   │   ├── customer.service.ts
   │   │   └── query-params.ts
   │   ├── package.json
   │   └── tsconfig.json
   │
   └── package.json
   

4. Install required modules using the npm install command. This can take some time as the modules have to be installed for all three applications.

   npm install

5. Start all applications using the following npm run command:

   npm run start

6. Open your browser and enter the URL http://localhost:4200. You should see a blank page.

Good to know

• The source code of the final app you find on Github on the master branch.
• You can start the app using the npm run start command.
• We use Parcel as web application bundler to build and serve the apps.
• When you have finished this guide, the app should look as follows: https://microfrontend-platform-getting-started.scion.vercel.app.
• The applications are served at the following URLs:
  • Host App: http://localhost:4200
  • Products App: http://localhost:4201
  • Customers App: http://localhost:4202

---

We can now move on to the development of the host and micro apps. The applications we are developing are pure TypeScript applications, i.e., they do not depend on a web framework like Angular, React, Vue.js, or similar. If you have started with the skeleton as described above, the CSS files are already prepared and provide basic styling. In the following, we will not go any further into the CSS content.

1. Create the Host Application

2. Create the Products Application

3. Create the Customers Application

4. Learn how to navigate to a microfrontend

5. Learn how to embed a microfrontend

6. Learn how to navigate via intent

7. Learn how to integrate the SCION DevTools

8. Learn how to browse the catalog of capabilities

9. Summary