Getting started

Prerequisites

• Visual Studio Code with the following recommended extensions installed:
  • Bicep
  • ESLint
  • lit-plugin
  • Tailwind CSS IntelliSense
  • PowerShell
  • MDX
• Node.js v16.19.1 or higher

Web components

Run and debug the solution

1. Open the project root folder in Visual Studio Code.

2. From the 'Terminal' window, run the following command:

   npx lerna run serve --scope=@pnp/modern-search-core

   This will bundle the solution and serve it from a local server on adresss http://localhost:8080/index.html:

   

Use index.html as your sandbox

The packages/components/dev/index.html is a sandbox page, meaning you can update it any way you want to test components behavior. To know all available parameters for components, go to the "playground".

1. To debug the components, start debugging using the "Local debug (Edge|Chrome)" configuration:

   

Run and debug tests

1. Open the packages/components folder in Visual Studio Code.

2. From the 'Terminal', run the following command:

   pnpm run test:watch

   This will start tests in watch mode on the http://localhost:8000/. Choose then the test you want to debug:

   

   info

   To run all tests (ex: before a commit), run npx lerna run test --scope=@pnp/modern-search-core.

   

3. Launch the "Debug tests Edge" VSCode configuration and choose the test you want to debug:

   

4. Put breakpoints in your tests and refresh the page to trigger the test again:

   

Run Storybook stories

We use Storybook to demo components in different scenarios:

To run Storybook locally run the following command:

npx lerna run docs:watch --scope=@pnp/modern-search-core

info

All stories are read from the packages/components/src/stories folder.

SPFx Web Parts

Run and debug the solution

1. Open the project root folder in Visual Studio Code.

2. From the 'Terminal', run the following command:

   npx lerna run serve --scope=@pnp/modern-search-core-spfx

3. You can also go directly to packages/spfx and run pnpm run serve.

4. Open the Hosted workbench debug configuration and add WebParts from Local category:

   

info

If you need to work on both web components and Web Parts at the same time, you can run the following commands

1. From packages/components, run pnpm run build:watch
2. From pacakges/spfx, run pnpm run serve

Docusaurus documentation

1. Open the project documentation folder in Visual Studio Code.

2. From the 'Terminal', run the following command:

   • pnpm i
   • pnpm run start

This will serve the documentation locally at http://localhost:3000.