Setting up your development environment

1. Install the prerequisites.
   For more information, see Initializing a project.
2. In the terminal of choice, run the following commands:
   Caution: The challenges in the Constellation DX Components mission were tested only against the stated node and npm versions. Before proceeding, you are strongly advised to get your development environment working with these versions. If you proceed with different versions (either lower or higher), you might experience difficulties running some commands in DX Component Builder.
   1. git --version

      Use Git version 2.30 or later

   2. node --version

      Use system node version 18.x.x or 20.x.x

   3. npm --version

      Use version 8.x.x for Node 18 or 10.x.x for Node 20

3. Ensure that you have an Integrated Development Environment (IDE) for developing Javascript applications installed on your workstation
   Tip: As a best practice, install Visual Studio Code for the exercises. See Visual Studio Code for instructions on how to download and install it for your environment.
4. Launch your Pega Infinity instance for the challenge.

1. In Visual Studio Code, open a new terminal.
2. In your terminal, enter the following command: npx @pega/custom-dx-components@~24.2 init.
3. If prompted, enter y to install the Custom DX Components npm package.
4. Complete the required information to set up your DX Component Builder project:
   1. In the Enter Project name (required) line, enter sldxcomponents.
   2. In the Enter Organization name (required) line, enter SL.
5. Press the Enter key to accept defaults for everything else.  
   After successful installation, the following information is displayed similar to the following figure: 
   

1. Open Visual Studio Code.
2. In Visual Studio Code navigate to and open the sldxcomponents project directory 
3. In Visual Studio Code open tasks.config.json
4. Configure the server-config section:
   1. In the rulesetName line, enter SLConstellationDXComponents.
   2. In the rulesetVersion line, enter 01-01-01.
5. In the components section, in the library line, enter DXExtensions.
   Your tasks.config.json file should resemble the following figure:
   
6. Save your file.

1. Wake up your Pega Academy instance, if necessary, and launch it. 
2. Open Visual Studio Code in your sldxcomponents project folder.
3. Open a terminal in Visual Studio Code and execute the following command: npm run authenticate.
   The first time you run this command, the system prompts you for the server name and authentication service name.
4. In the Enter pega server URL line, enter the academy instance URL, including the https and prweb portions.
   For example, https://abcdeghi.pegacademy.net/prweb.
5. Accept the defaults for the other question by pressing the Enter key.
   DX Component Builder launches a browser tab that shows the login screen of your Pega instance, as shown in the following figure:  
   
6. Enter the credentials:
   1. In the User name field, enter author@sl
   2. In the Password field, enter pega123!
7. After successfully authentication, close the browser tab.
   A confirmation of successful authentication is also displayed in your terminal, as shown in the following figure:
   

1. Open Visual Studio Code and navigate to your sldxcomponents project folder.
2. In Visual Studio Code, open a terminal window.
3. In the terminal window and the root of your project, enter the following command: npm run create.
4. In the Enter type of component prompt, press the Enter key to select the Field option.
5. In the Enter the subtype of the component prompt, press the Enter key to select the Text option.
6. In the Enter component name (required) prompt, enter TestText.
7. In the Enter component label for display (required) prompt,  enter Test Text.
8. Press the Enter key for all of the remaining questions to accept the default values.
   The terminal displays an output similar to the following figure:
   
9. Enter the following command in your terminal to check that your component is available on the server: npm run list.
10. Select 2 to select the Local option, and then press the Enter key.
    
    Your local component is displayed in the list. This component has not yet been published to the Pega server.
11. In your terminal, run the following command: npm run startStorybook.
    Storybook starts, and then creates a local web server to interact with the Storybook stories. After Storybook compiles the component stories, it automatically launches a new browser window, as shown in the following figure:
    
12. Close the browser window that contains Storybook.
13. Go back to the terminal window where you ran the previous command, and then press CTRL-C to stop the Storybook process.
14. Enter the following commands in your terminal:
    • npm run authenticate
    • npm run publish
    Note: You only need to use npm run authenticate if your access token has expired. By default, this token is set to expire after 3600 seconds.
15. After running the publish command, select the only component in the list.
16. Accept all of the defaults by pressing the Enter key for each component.
    Your terminal output looks similar to the following figure:
    
    
    When component bundling and packaging are complete, the component uploads to the Pega server and is added to the Ruleset and Ruleset version that you specified. The following figure shows the success message:
    

17. Check that your component is available on the server by entering the following into your terminal: npm run list.
18. Select 1 for Server.
    You see output similar to the following figure:
    

You have successfully generated a new component from a sample DX Component Builder template and published it to the server, which validates that your environment is properly configured for building a Constellation DX component.