Generating a Frontend Application

info

Before continuing, ensure your workstation has been set up with the Core Components, as well as components specific to the language ecosystem you're working in: [JavaScript] [Java] [.Net] [Python] [Rust]

Using the Archectect command below, generate the base web application

archetect render git@github.com:p6m-archetypes/javascript-front-end.archetype.git

Archetect Prompts

When rendering the archetype, you'll be prompted for the following values:

Prompt	Description	Example	Required
Org Name	Organization this project belongs to	afi,a1p,...	Yes
Solution Name	Project name	apps, booking-app,...	Yes
Root directory	Root directory which could contain different applications	front-end-apps	No
Should we run 'pnpm install' for you?	Install dependencies post code generation	Yes, No	No
Should we initialize a Git repository and stage the changes?	Create Git initialization	Yes, No	No
What type of application would you like to start with?	ReactJS or NextJS code generation	React, NextJS	No
Enter application name	Name for this project's web application	booking-supplier,booking-supplier,...	Yes

For this tutorial, please use the below prompt values:

Prompt	Value
Org Name	a1p
Solution Name	apps
Root directory	{your_name}-fed (e.g. john-doe-fed)
Should we run 'pnpm install' for you?	Yes
Should we initialize a Git repository and stage the changes?	Yes
What type of application would you like to start with?	React
Enter application name	example-webapp

note

If you are using the above code generation for the first time on your machine, it could take upto 10 mins for the process to finish. This is mainly due to the pnpm install downloading the necessary packages.

Understanding what happened behind the scenes

• Code Generation

  Using the prompts, archetect used the code template and generated the boilerplate source code - based on the example prompts above, you should have john-doe-fed directory in the working directory - Inside the john-doe-fed root directory, you should have the below structure: - -- apps : main source code for the frontend - -- example-webapp : the example webapp monorepo - -- example-webapp-e2e : the automated testing modules - -- docs : Docusaurus documentation for the libraries - -- libs : Component libraries and ReactJS based libraries

• Dependencies installed

  • pnpm install command run in the root directory to retrieve and register the packages in node_modules
    • Please see the package.json for details on the dependencies

• Run the web application

  • The web application is started using the command pnpm nx serve example-webapp
    • Note the example-webapp mono repo you used as the application name
    • Above brings up the application on your machine at http://localhost:4200/

What's Inside

This archetype is based on the NX Monorepo template and uses PNPM as its package manager.

The homepage should provide you additional documentation on the architecture, component libraries, design system tokens and more.