vanilla-template

Setup 🚀

You can create a new project using @pota/create.

npm init @pota -- --template vanilla

or use the vanilla combination, for the recommended setup

npm init @pota vanilla

Standards 📒

This project follows the MediaMonks Frontend Coding Standards

Features 🔋

Security 👮‍

Ignore scripts

In order to mitigate NPM supply chain attacks by best effort the NPM ignore-scripts setting is enabled by default. This project comes with a preconfigured set of dependencies that are allowed to run installation scripts.

After running npm install it is required to run npm run postinstall to run required installation scripts from dependent packages.

When adding a new dependency that requires an installation script to run make sure to add that package to the project package.json in the postinstall property.

Important: After running npm install or npm ci always run npm run postinstall afterwards before running other scripts.

Pota Scripts [TODO]

hidden TODOs

JavaScript / TypeScript

hidden TODOs

CSS

hidden TODOs

Images

hidden TODOs

Misc. Assets

hidden TODOs

Linting & Formatting

hidden TODOs

Service Worker

The skeleton has opt-in support for service workers through the help of workbox.

To get started, you can create /src/service-worker.ts file to customize workbox and its many modules .

This is how an example service worker file could look like:

/// <reference lib="webworker" />

import { clientsClaim } from 'workbox-core';
import { precacheAndRoute } from 'workbox-precaching';

declare const self: ServiceWorkerGlobalScope;

clientsClaim();

// eslint-disable-next-line no-underscore-dangle
precacheAndRoute(self.__WB_MANIFEST);

Now, whenever you bundle your application for production, a service-worker.js file will be generated.

As a last step, you need to make sure to register the service worker using the serviceWorkerRegistration.ts module, see the comment in main.ts for more details.

Deployment

Remote Sync

For simple deployments, when you just want to upload your files to a remote server, you can use the rsync script.

Note: before using the rsync script, make sure to configure a host in in the "package.json"

npm pkg set config.host="github.com"

hidden TODOs

Git

hidden TODOs

Continuous Integration / Continuous Deployment

Bitbucket

webpack-skeleton comes with bitbucket-pipelines.yml, pre-configured to run check-types, lint and test scripts.

hidden TODOs