inityou will be provided with a prompt to choose the type of project to start. While Stencil can be used to create entire apps, we’ll choose the component as we’ll just be dealing with modular components rather than building an entire application
cdinto the project and run
npm i ; npm start
www/directories are outputs for compiled code. In the
src/components/directory you’ll see a
my-component/folder. We’re about to generate our own component, so go ahead and delete that folder. You can also nuke the
utils/directory as we won’t be covering tests in this tutorial. Now run:
bantu-wallet. Disable Spec Test and E2E Test as we’re not interested in those Stencil features today. Press Return and your component will generate and wire up.
stencil.config.tsfile at the root of the project and modify it to this:
src/components/wallet/and rename the
wallet.scss. While we’re here let’s go ahead and modify this new style file with some basic styling to put our project in a pretty place.
wallet.tsxwith this new stylesheet, note that we’re also importing a global stylesheet. Go ahead and create that file at the root of the
wallet.tsxto point to our new styles like so:
src/index.htmlfile to use this brand new component. Modify that file to match this.