Template for creating prototypes with Stencil.js and Calcite compnents

1. click "Use this Template" and "Create a new repository"

2. clone repo to your developer machine

3. find and replace the string REPLACE_PROJECT_NAME with your project name, e.g. hub-chatbot

4. install dependencies npm i

5. copy Calcite assets cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./src/assets/'

6. create new components with npx stencil g

   • in the first component, import the Calcite assets
   import { setAssetPath } from "@esri/calcite-components/dist/components";
   setAssetPath("./assets");

7. modify src/index.html for your component name and any props.

   • the example index.html uses script to add component to DOM so you can pass complex objects and other dynamic props

8. run the server npm run start

When you are ready to create a Github Page (Github action already present) you need to enable the Page and action permissions. After this all pushes to main will rebuild the page.

1. push to github git push origin main
2. in Github Repo UI, under **Settings > Actions > General_ in Workflow Permissions change to Read and Write Permissions
3. in Github Repo UI, under Settings > Pages in Build and Deployment > Branch choose gh-pages and Save
4. Re-run the job.

The first push will fail because the gh-pages branch does not exist until after you push.