History

Joe Haddad b7e17e09e5 Update references to zeit/next.js (#13463 )		2020-05-27 17:51:11 -04:00
..
packages	Update Examples for Fast Refresh (#13068 )	2020-05-18 17:44:18 -04:00
package.json	Add `with-stencil` example (#10125 )	2020-01-20 16:45:03 -05:00
README.md	Update references to zeit/next.js (#13463 )	2020-05-27 17:51:11 -04:00

README.md

Stenciljs example

Deploy your own

Deploy the example using Vercel:

How to use

Using `create-next-app`

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-next-app --example with-stencil with-stencil-app
# or
yarn create next-app --example with-stencil with-stencil-app

Download manually

Download the example:

curl https://codeload.github.com/vercel/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-stencil
cd with-stencil

Build stencil component:

cd packages/test-component
yarn build

Install it and run:

yarn
yarn dev

Deploy it to the cloud with Vercel (Documentation).

Choose packages/web-app as root directory when deploying.

The idea behind the example

Stencil is a compiler that generates Web Components (more specifically, Custom Elements). Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

In this example we have two workspaces:

web-app: A Next.js app
test-component: A stencil components