Getting started
Prerequisites
- Visual Studio Code with the following recommended extensions installed:
- Node.js v16.19.1 or higher
Web components
Run and debug the solution
-
Open the project root folder in Visual Studio Code.
-
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:
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".
-
To debug the components, start debugging using the "Local debug (Edge|Chrome)" configuration:
Run and debug tests
-
Open the
packages/components
folder in Visual Studio Code. -
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:infoTo run all tests (ex: before a commit), run
npx lerna run test --scope=@pnp/modern-search-core
. -
Launch the "Debug tests Edge" VSCode configuration and choose the test you want to debug:
-
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
All stories are read from the packages/components/src/stories
folder.
SPFx Web Parts
Run and debug the solution
-
Open the project root folder in Visual Studio Code.
-
From the 'Terminal', run the following command:
npx lerna run serve --scope=@pnp/modern-search-core-spfx
-
You can also go directly to
packages/spfx
and runpnpm run serve
. -
Open the Hosted workbench debug configuration and add WebParts from Local category:
If you need to work on both web components and Web Parts at the same time, you can run the following commands
- From
packages/components
, runpnpm run build:watch
- From
pacakges/spfx
, runpnpm run serve
Docusaurus documentation
-
Open the project
documentation
folder in Visual Studio Code. -
From the 'Terminal', run the following command:
pnpm i
pnpm run start
This will serve the documentation locally at http://localhost:3000
.