Stencil | Getting Started

In this video I want to introduce Stencil, a relatively new tool which allows us to create Web Components without using a framework. Not sure what Web Components are and why we might use them? Let's find out!

----------

----------

See you in the videos!

[MariuSzzz]

Another great tutorial Seth Rogen. Good job! :)

[alexou]

This guy is the best in Angular, he gave purpose to my Working life.

[enesns]

Are you planning to make a new stencil tutorial. It would be helpful. And thanks for the really good stuff and pace!

[MaxLynchMan]

Awesome video, adding it to the stencil site now!

[antonetrinh]

My goodness stencil is the perfect tool.

[HarisKhan-bhuj]

thanks for clearly explaining about Stencil !!

[vaisakhmc]

I am having a doubt at 13:10 that in the current version...stencil.config.js is should I replace my-name with my-modal in the new version?

[sannguyen]

Hi Max, can you explain after building it to web-component, how can I use it in my angular app, how stencil service worker, ssr fit in angular, @angular/service-worker and @angular/universal? Compare between stencil element and @angular/element? After built, what I have is a full PWA with service worker, html prerender, manifest... so much confusion now

[SuperNirupam]

Hi, this bundle option is missing in stencil.config.js new stencil 2020, any idea how to bundle now?

[cookiecrumb]

Your my favorite Udemy instructor..!!! I dig ur style..ur enthusiasm..I buy your courses because I learn from your content. Over 2000 video tutorials watched so far on Udemy..one day I will be a full stack developer !!

[cookiecrumb]

Here is a question though..lets say you use the stencil compiler to create custom components from lets say components of onsen ui..that I wish to import into an angular web app.. So essentially you would be importing the components and styling and compiling them to your angular project to have the look and feel of mobile..will this have performance gain?

[slackergeek]

So, I followed the video and it seems that sometimes after saving a file and NPM detects a change and recompiles and new instance of Node.js Server appears in Task Manager. That's all fine, except when I CTRL+C to stop the server I can't restart it because it thinks something is using the same port, which technically it is. If I end task on all those Node.js Server instances I can then use npm start to restart the app. However, doing this starts 5 instances of Node.js Server. Is this normal or how do I fix it?

[JohnSmith-rnvl]

It's like stencil saw what VueJs does and decided to copy it. I don't yet see any reason to use stencil yet. However, one of the ionic developers mentioned that we should be able to use stencil + Vuejs/React/Angular + ionic4 to build mobile web apps. If I could use VueJs to do all my navigation/routes and data/state and logic but be able to import ionic components like input fields or access native mobile device features like camera that might be pretty amazing. I really don't like angular or react.

[yousifmohamed]

you got me excited as usual xDD, Thanks Max

[MrVisheshsingh]

I am getting the following error after hitting the npm start command: ERROR: EPERM: operation not permitted, open

[anatolenavarro]

How has stencil aged now in 2020? Is it a good choice for Bigcommerce?

[pasizdobrekuce]

Used Web Components with WordPress, brilliant dev experience. I really enjoyed it. Stencil.js is just going to make it even "brillianter". :)))) Great stuff Max. Thanks a lot.

[Templars]

Awesome walkthrough and teaching style: clear and concise. I'm going to give Stencil a whirl, it's exactly what I need for my personal site. Thank you!

[hamzazaidi]

Hi Seth, i am starting on Stenciljs. I am writing my very first progress bar component and want to animate the width on inner bar.
How can i update the width of the inner-bar with stencil.

[fabiopaitra]

How did you add a folder and file so easily? Any shortcut extension? I always right click :(