Stencil: In development, being able to implement multiple html pages to test components

[Danetag]

Stencil version:

@stencil/[email protected] 

I'm submitting a:
[ ] bug report
[x] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
While developing component, there's only src/index.html available to test my components.

Expected behavior:
I'm looking for a way to create different pages while developing components, instead of using only src/index.html. Ideally, an html page per component.

I don't want to create components as a page to simulate pages, because they would be exported in the final dist folder, which I want to keep clean and component focus only.

The documentation doesn't explicitly detail the best way of doing so. The Stencil Style Guide page https://stenciljs.com/docs/style-guide describes a file structure to adopt, and I can see a test folder with an html page:

├── card
│   ├── card.ios.css
│   ├── card.md.css
│   ├── card.css
│   ├── card.tsx
│   └── test
│       └── basic
│           ├── e2e.js
│           └── index.html

How can I make the dev-server serving the card/test/basic/index.html ?

Thanks!

[Danetag]

Never mind, I found a solution. You can create the architecture you want, but it's better to create it this way:

├── src
│   ├── components
│   └── pages
│       └── my-component
│           ├── index.html
│       └── my-second-component
│           ├── index.html
│     

In stencil.config.ts, add a copy property in the www target that copies the /pages folder into the www folder on build

outputTargets: [
    ...
    {
      type: 'www',
      serviceWorker: null, // disable service workers
      copy: [
        ...
        { src: 'pages' },
      ],
    }
  ]

Now, on build or dev, you can access the html pages you created in the pages folder. Here for instance, http://localhost:3333/pages/my-component.

Thanks!