Initial Project Structure

The structure, well is very different from what an Angular project looks.

Project Structure

Different but Same...

It all starts with the index.html, which connects the global app.js and .css and the body bootstraps the app-root component.

<script nomodule src="/build/app.js"></script>
<link href="/build/app.css" rel="stylesheet">

<app-root></app-root>

app-root - sets up the routing ( if needed - More on that in the Routing page. ) Or simply is the root of the component tree.

This is very similar to, how things are with Angular. main.ts - which bootstraps a module - which identifies a bootstrap component for this module - https://angular.io/guide/bootstrapping#the-bootstrap-array

## h2

Q. Are there modules in StencilJS? Ans. Well, to answer that, we would need to first understand what are Angular modules. https://angular-2-training-book.rangle.io/modules/introduction - gives a beautiful explanation

In Angular, a module is a mechanism to group components, directives, pipes and services that are related, in such a way that can be combined with other modules to create an application. An Angular application can be thought of as a puzzle where each piece (or each module) is needed to be able to see the full picture.

So, it is then just a grouping mechanism, and as such is fine to be omitted, and as we will see later, there is no concept of Directives, Pipes and Services in StencilJS. It's just Components.

Let's start with creating a new Component.