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

# Initial Project Structure

<div align="left"><img src="https://2768661053-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MMabv2sF5BvVBSjGZx7%2F-MMd_BpCIEVdm8GhPEtj%2F-MMeqHHXApFISYsdUWoJ%2Fimage.png?alt=media&#x26;token=c2861dee-36f0-4c9d-9aba-c679c82da3b6" alt="Project Structure"></div>

### 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. &#x20;

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

```markup
<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.&#x20;

This is very similar to, how things are with Angular. \
&#xNAN;_&#x6D;ain.ts_ - which bootstraps a module - which identifies a bootstrap component for this module - [https://angular.io/guide/bootstrapping#the-bootstrap-array](https://angular.io/guide/bootstrapping#the-bootstrap-array)

#### ## h2

{% hint style="info" %}
**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](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**.&#x20;
{% endhint %}

#### Let's start with creating a [new Component](new-component).&#x20;
