Explore the Easy Spaces App Packaging Architecture

In this step, you review how the project metadata is organized into multiple unlocked packages.

Explore the Unlocked Packages

The Easy Spaces app adopts a package-based development model.

Packages provide a repeatable, scriptable, and trackable way for managing change as you develop functionality. Packaging your metadata also makes deployment easier.

As an app admin, you can explore the various unlocked packages that are involved in composing the completed Easy Spaces app.

Log in to your Trailhead org where you have installed the easy-spaces app.
Navigate to Setup, and enter Installed Packages in the Quick Find box.
Select Installed Packages.

Click the package’s name that you want to view and browse through the list of metadata components that belong to the package.

List of unlocked packages used to compose the Easy Spaces app.

List of unlocked packages used to compose the Easy Spaces app.

The Easy Spaces app is composed of four different packages that work together to form the app.

Package Name	Description	Dependencies
ESObjects	This package holds all the custom objects, custom fields, layouts, and permission set for the objects.	This package is independent of other packages.
ESBaseStylesLWC	This package holds all the styling related to Lightning Web Components, logos, themes, and the custom Lightning app page template.	This package is independent of other packages.
ESBaseCodeLWC	This package contains code components that are reusable. The package has custom metadata definitions and records along with the Lightning Messaging Service (LMS) metadata.	The package depends on ESObjects and ESBaseStylesLWC packages.
ESSpaceMgmtLWC	This package has most of the metadata, including the Lightning Console app, Lightning web components, flows, Lightning pages, and other components required for the Easy Spaces app.	This package depends on ESObjects, ESBaseStylesLWC and ESBaseCodeLWC.

Open the project workspace in VS Code editor to observe the metadata in different directories. The metadata components for each package are placed into their own directories in the project workspace.

Defining Dependencies Between Packages

The dependency between the packages is defined in the packageDirectories section of sfdx-project.json.

Using your browser, navigate to trailhead.salesforce.com/sample-gallery.
Scroll down to select the Easy Spaces tile and click View on GitHub.
Click the sfdx-project.json link to view the file contents.
Note the dependencies config where the package dependencies on other packages are defined.

For example, in the ESSpaceMgmtLWC unlocked package, there are defined dependencies on ESObjects, ESBaseCodeLWC, and ESBaseStylesLWC.

{
    "path": "./es-space-mgmt",
    "package": "ESSpaceMgmtLWC",
    "versionName": "Space Management App - Summer '20",
    "versionNumber": "4.0.0.NEXT",
    "default": true,
    "dependencies": [
      {
       "package": "ESObjects",
       "versionNumber": "4.0.0.LATEST"
      },
      {
       "package": "ESBaseCodeLWC",
       "versionNumber": "4.0.0.LATEST"
      },
     {
     "package": "ESBaseStylesLWC",
     "versionNumber": "4.0.0.LATEST"
     }
   ]
}

Creating Unlocked Packages

Salesforce CLI provides commands to create packages and package versions.

As an exercise, modify the customerList Lightning web component to return six tiles instead of five. Then use the Dev Hub of your Trailhead Playground to create a new package and package versions for all directories that have metadata.

In VS Code, open the project workspace you cloned from GitHub.
Authorize your Trailhead Playground by running the following command in the project workspace terminal of VS Code (mydevorg in this command is an alias): sf org web login --set-default --alias mydevorg
Edit the es-space-mgmt/main/default/classes/ReservationManagerController.cls file.
Change the dynamic SOQL query LIMIT in the getCustomerList method (line number 39) to 6.
Save the file.
Deploy your changes to your org with this command: sf project deploy start --metadata ApexClass:ReservationManagerController

Refresh the Reservation Manager page. Notice the updated size of the items on the customerList component is now six.

Create Unlocked Package Versions

In this section we create package versions for each of the package directories in the project workspace.

Enable DevHub in your Trailhead playground.
1. Log in to your Trailhead Playground.
2. From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.
3. To enable Dev Hub, click the Enable toggle for the Enable Dev Hub.
4. Scroll down to find Enable Unlocked Packages and Second-Generation Managed Packages and click the Enable toggle.
Set your Trailhead Playground as the default Dev Hub using the following command. sf config set target-dev-hub <orgalias/username> You need the org alias or username of your Trailhead Playground org from when you authenticated through the VS Code.

Replace the contents in the sfdx-project.json with the following JSON to use the DevHub of the Trailhead Playground to create package versions.

{
"packageDirectories": [
 {
   "path": "./es-base-objects",
   "package" : "ESObjects",
   "versionName": "Base Objects v1",
   "versionNumber": "1.0.0.NEXT",
   "default": false
 },
 {
  "path": "./es-base-styles",
  "package" : "ESBaseStyles",
  "versionName": "Base Styles v1",
  "versionNumber": "1.0.0.NEXT",
  "default": false
 },
 {
   "path": "./es-base-code",
   "package" : "ESBaseCode",
   "versionName": "Base Code v1",
   "versionNumber": "1.0.0.NEXT",
   "default": false,
   "dependencies": [
     {
     "package": "ESObjects",
     "versionNumber": "1.0.0.LATEST"
     }
   ]
 },
 {
   "path": "./es-space-mgmt",
   "default": true,
   "package": "ESSpaceMgmt",
   "versionName": "ESSpaceMgmt v1",
   "versionNumber": "1.0.0.NEXT",
    "dependencies": [
      {
      "package": "ESObjects",
      "versionNumber": "1.0.0.LATEST"
      },
      {
      "package": "ESBaseCode",
       "versionNumber": "1.0.0.LATEST"
     },
     {
     "package": "ESBaseStyles",
     "versionNumber": "1.0.0.LATEST"
    }
   ]
 }
],
"namespace": "",
"sfdcLoginUrl": "https://login.salesforce.com",
"sourceApiVersion": "50.0"
}

The original sfdx-project.json file has package IDs from the DevHub maintained by Salesforce. You are removing the previous unlocked package IDs to use your Trailhead playground DevHub for package creation.

Open the Integrated terminal of VS Code for the project workspace and execute the command to create a package for the ESBaseObjects. To open the VS Code terminal, press the ⌃` (CTRL + backtick character) on your keyboard. sf package create --name ESObjects --package-type Unlocked --path ./es-base-objects

To create a package version, execute the command in the VS Code terminal. sf package version create --package ESObjects --installation-key-bypass --wait 20
Repeat the previous steps to create ESBaseStyles, ESBaseCode, and ESSpaceMgmt packages, and package versions from the es-base-styles, es-base-code, es-space-mgmt local directories, respectively. This step is optional, and we do not check this as part of the challenge validation. If you decide to install the final packages created in this quick start project, make sure to create another new Trailhead playground for the installation.
What’s Next? While this is the end of your guided tour of the Easy Spaces sample app, there’s more to explore.
If you want to view multiple package directories, explore the documentation. If you want to practice using Lightning Web Components and Lightning Message Service, check out Quick Start: Explore the E-Bikes Sample App.
Take a look at the other sample apps on https://trailhead.salesforce.com/sample-gallery. Explore other sample apps’ source code and complete other sample app Quick Start projects.