LitElement Dev Container

When I work on a project, I like to work in a container. This repository serves as a template for developing LitElement web components in a Visual Studio Code developement container. These are my requirements:

1. Create no local dependencies on my computer.
2. Use TypeScript.
3. Minimize the number of dependencies the codebase requires.
4. Write tests to ensure things work as expected.

This template will create a project that runs in a container, uses LitElement to create a web component, Sass to style it, and Cypress to test it.

Get started

1. Install Visual Studio Code
2. Install Docker
3. Open Visual Studio Code and install the Remote Development Extension
4. Clone this repository, or create a new one from the template, and open it in Visual Studio Code
5. Configure ports so they do not conflict with other things on your box:
   1. Set the webPort for noVNC and vncPort and forward them if you want to use them.
   2. Set the appPort where your app will run.
6. Reopen the folder inside a dev container and open a terminal:
   1. Install dependencies: npm i
   2. Run it: npm run dev
   3. Test it: npm run test

Code intellisense, linting, and formatting

When multiple developers work on the same codebase, it is very easy to end up with inconsistent styling. This template is configured to use ESLint and Prettier to help ensure consistent styling and coding rules. It also has some extensions to help with intellisense and reason about the code. The following Visual Studio Code Extensions are installed in the container to help with that:

• ESLint
• Prettier ESLint
• lit-plugin
• markdownlint
• SCSS IntelliSense

These plugins rely on the follow NPM packages:

• eslint to ensure code quality.
• prettier to enforce style and format.
• @typescript-eslint/eslint-plugin and @typescript-eslint/parser configure ESLint to behave nicely with TypeScript.

Building the web component

To build the web component, run npm run build from a terminal. It uses rollup to package the code into a nice little bundle. The build relies on the following packages:

• rollup builds all the things.
• rimraf delete things in a cross-platform way.
• @rollup/plugin-node-resolve loads node modules.
• @rollup/plugin-typescript allows all the code to be written in TypeScript.
• rollup-plugin-postcss compiles SCSS.
  • postcss-url embeds images in the compiled CSS.
• rollup-plugin-postcss-lit imports SCSS into LitElements
• rollup-plugin-terser bundles the code as small as possible.
• rollup-plugin-summary lets us know what has been built.

Other installed packages and why they are here

When building an application, it is important to limit dependencies and know why the ones in the project are there. Dependency hell is no fun. We've all been there. These are the other libraries in this starter template and why they are there:

• @web/dev-server serves our code during development.
• @webcomponents/webcomponentsjs polyfills for web components in various environments.
• start-server-and-test waits for the server to launch before running tests.