ChooseMyCompany's Micron Frontend base application

Overview

This project is a base application written in Vue 3 to create micro frontends for the ChooseMyCompany software.

Project Structure

• src/components: Vue components
• src/entities: TypeScript entities
• src/stores: Pinia stores
• src/main.ts: Local application entry point
• src/main.ce.ts: Application entry point for building web component

Installation

Go in the root cmc-front directory and run the following commands:

docker compose build scopes
make reset-dist-files

You also need to migrate the legacy data in order to use the application. To do so, run the following command in the ChooseMyCompany folder:

./scopes/scripts/startup-init.sh

Usage

To run the application in development mode, run the following command:

docker compose up scopes

The application will be available at http://cmc.local:5004.

The auth will not work locally, you'll have to set the .env SKIP_API to true, then the services will use the mock data stored in the scopes/services/fake-datas folder.

Testing production build locally

To test the production build locally, first change the docker-compose.yml file to use the production build:

  scopes:
    container_name: choosemycompany_scopes
    build:
      context: .
      dockerfile: scopes/Dockerfile
      target: production-stage
      args:
        - ENV_NAME=preprod
    platform: linux/arm64
    working_dir: /srv/app/scopes
    volumes:
      - ./scopes:/srv/app/scopes
      - ./scopes/node_modules:/srv/app/scopes/node_modules:delegated
    env_file:
      - ./scopes/.env.preprod
    ports:
      - "5004:5004"

Then build and serv the production image (be careful with docker cache):

docker compose build scopes
docker compose up scopes
docker compose exec scopes yarn preview

Then open test.html with a browser.

Checking CORS

To check the CORS configuration in the Scaleway S3, run the following command:

make web-components-get-cors-<env-name>

Updating CORS

CORS can be updated in the Scaleway S3 with these commands: First, edit the configuration file in ./web-components/cors-<env-name>.json. Then, run the following command:

make web-components-put-cors-<env-name>

Contributing

Before commit, dont forget to run the following command:

docker compose exec scopes yarn lint-fix  # eslint
docker compose exec scopes yarn format    # prettier
docker compose exec scopes yarn test      # unit tests

Deployment

To build the web component, run the following command:

docker compose exec scopes yarn build