mfe-account-banners

MFE for Account Portal Banners

Built using cfp-mfe-template

A template project for a CFP compatible microfrontend.

Welcome

Welcome! If you're looking to develop a new microfrontend and would like a quick way to get started, you're in the right place!

This GitHub template will give you everything you need to create a production ready microfrontend in 15 minutes. This includes build tools, testing tools, linting tools, a local environment, a pipeline and CDN infrastructure.

To get started, simply create a new microfrontend repository in the DPE GitHub organization using this template. Then, follow the instructions in the Setup section. If you do not have access to the DPE GitHub org, visit the #tech-git Slack channel and ask @github-dpe-org-owners to add you to the DPE organization.

Disclaimer: Production System

Usage of the CFP Production System is currently limited to the DPE GitHub organization only. If your team has no ties with this organization, then follow the steps below.

1. Create your MFE repository utilizing this template and designate a location outside of DPE organization.
2. Follow the CLI setup instructions below, and select (No) for "Use the CFP pipeline & infrastructure" prompt.
3. Skip the numbered CFP pipeline setup steps below.

Installation

To install all of the project's dependencies, run the following command.

yarn install

Setup

The following series of steps only need to be done once upon creating your repository with this template. To setup the project, run the following command and follow the steps listed below.

yarn setup

Also, you must configure your GitHub repository to support the CFP pipeline.

1. Visit Settings > Hooks > Webhooks and click the Add webhook button.
2. Add the following URL to the Payload URL field: https://master-5.jenkins.autodesk.com/github-webhook/.
3. In the Content type field, select application/json.
4. Lower down, select Let me select individual events. and check the following options: Pull requests, Pushes and Repositories.
5. Save these changes.
6. Now visit Collaborators & teams > Collaborators and add the following collaborators with Admin privileges: svc-p-ors and svc-p-dhauto.

Build

To build the project, run the following command.

yarn build

For a development build with no minification, run the following command.

yarn build:dev

Test

To run the tests, run the following command.

yarn test

To have the tests re-run on changed files, run the following command.

yarn test:watch

Start

To host a page locally run the following command.

yarn start

This will host the page under https://app.autodesk.com:3000/. You must add the following entry to your /etc/hosts file for this hostname to resolve to your locally hosted server.

127.0.0.1 app.autodesk.com

Analyze

To visualize the size of your bundle and its content, run the following command after having run the build command.

yarn analyze

To learn more about the Webpack Bundle Analyzer, visit its documentation.

Versioning

All CFP compatible microfrontends must use semantic versioning. The CFP MFE pipeline expects microfrontend developers to use Angular's commit message convention so that the pipeline can automatically determine the next version of the microfrontend based off of the developers' commit messages. Commit messages are automatically formatted by commitizen and git hooks. Simply run the git commit command and follow the cli prompts to successfully commit your changes.

FAQ

Can I use npm instead of yarn?

No, currently CFP does not support the use of npm in its pipeline. If you want to use npm, you will have to use your own Jenkins pipeline and your own CDN infrastructure.

How do I change the list of supported browsers?

To change the list of browsers that your project supports, modify the .browserslistrc file. This will automatically change the polyfilling and transpiling that Babel does to your code. For more information on this configuration file, visit the Browserslist documentation.

To see the complete list of your project's currently supported browsers, run the following command.

npx browserslist

You should also make sure that Browserslist is using the latest browser information and browser usage statistics by updating its caniuse-lite database regularly. It is likely you will see some immediate improvements to your build size. To update this database, run the following command.

npx browserslist@latest --update-db

Contact

If you have questions or would like to reach our team, please do so via this slack channel:

• #cfp-mfe-support
• Use @cfp-mfe-engineers in that channel to notify us.
• Use the lightning bolt workflow and select MFE support to raise a request or issue.