Skip to content
An example SPA written with Stencil
Branch: master
Clone or download
hcavalieri Merge pull request #1 from anishkny/master
Setup TravisCI, add build badge
Latest commit b46f0d8 Feb 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
src RealWorld badge and TODO list in Jan 29, 2019
.travis.yml Create .travis.yml Feb 11, 2019
package.json docs(README): Add Travis badge Feb 11, 2019

RealWorld Example App

RealWorld Frontend Build Status

Stencil codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

So far, I've got all the templates and proper auth in place. You can already register, log-in and change your settings.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with Stencil including CRUD operations, authentication, routing, pagination, and more.

This not necessarily follows all the best practices for Stencil, as the community is still in its infancy... Thefore, any feedback is welcome, let's make this codebase great! Stencil is a very promising tool and this app could be the starting point for dicussing how to best build components and applications for years to come 😉

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it works

The whole codebase is based on Stencil, having as its single outside dependency (other than stencil-router), the markdown parser marked for the articles' pages. Stencil is built on top of the web-components standard and has a very tiny API, which is a blend of React, Angular and Vue. The whole app has been built on Typescript, as usual for this stack, and you might find your way around easier by taking a look at type definitions.

As the "Conduit" app is quite simple, there's no need for a central state management othern than the user information held in the app-root component. There's an example e2e test, although it can be greatly improved to provide a better example when Stencil fixes tests dependendable upon stencil-router.

Getting started

npm install // or yarn

npm run start // or yarn start

Feel free to file an issue or submit a PR. If you have the time and energy to improve this codebase and keep active in its support, let me know if you want to become a contributor 😉

Stencil, the compiler framework

If you want to learn more about Stencil and start using it, I recommend, first, taking a look at their announcement video. The docs are still a bit incomplete, but are short and straight to the point. If you already know a modern MVC framework you can probably figure it out pretty quickly... as for Typescript, there's no express need for anything other than simple types and interfaces, Typescript in 5 minutes is a great guide to start. Just go for it!


  • Better testing
    • Right now, I don't see any use for unit testing;
    • End to end testing is limited due to a bug with stencil-router, but there are plenty of cool possibilities, which we can explore after that is solved;
    • Soon Stencil will release its screenshot visual diffing testing tool, and that could provide some other cool ways to demonstrate testing.
  • Proper tag displaying in the editor route;
  • Continuous Integration (CI) set-up.
    • Several free tools to do so, just have to spend the time and energy to do so.
  • Review by the Stencil community to better align best practices
  • 404 page? This is already set-up in the not-found component, but I don't know if it's desirable considering other RealWorld apps don't have it
You can’t perform that action at this time.