vite-skeleton

Setup 🚀

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

npx @pota/create vite my-vite-app

Standards 📒

This project follows the MediaMonks Frontend Coding Standards

Features 🔋

Pota Commands

build - builds the source using vite.

npm run build # or npx pota build

| Option | Type | Default | Description | | ----------------- | ----------- | -------- | --------------------------------------------------------------- | ---------- | ------ | ---------------------------------------------------------------------- | | debug | {Boolean} | false | Sets NODE_ENV to 'development'. | | output | {String} | ./dist | The build output directory. | | source-map | {Boolean} | false | Enable source-map generation. | | public-path | {String} | / | The location of static assets on your production server. | | log-level | {'info' | 'warn' | 'error' | 'silent'} | info | Adjust console output verbosity. (https://vitejs.dev/config/#loglevel) | | force | {Boolean} | false | Ignore pre-bundled dependencies (the node_modules/.vite cache). |

dev - starts the vite development server.

npm run dev # or npx pota dev

| Option | Type | Default | Description | | ----------------- | ----------- | ------- | ------------------------------------------------------------------------------------- | ---------- | ------ | ---------------------------------------------------------------------- | | force | {Boolean} | false | Ignore pre-bundled dependencies (the node_modules/.vite cache). | | https | {Boolean} | false | Run the development server with HTTPS. | | open | {Boolean} | true | Allows to configure dev server to open the browser after the server has been started. | | port | {Number} | 2001 | Allows configuring the port. | | cors | {Boolean} | false | Enable CORS. | | prod | {Boolean} | false | Sets NODE_ENV to 'production'. | | log-level | {'info' | 'warn' | 'error' | 'silent'} | info | Adjust console output verbosity. (https://vitejs.dev/config/#loglevel) | | public-path | {String} | / | The location of static assets on your production server. |

preview - server the built /dist directory.

npm run preview # or npx pota preview

| Option | Type | Default | Description | | ----------------- | ----------- | ------- | ------------------------------------------------------------------------------------- | ---------- | ------ | ---------------------------------------------------------------------- | | https | {Boolean} | false | Run the development server with HTTPS. | | open | {Boolean} | true | Allows to configure dev server to open the browser after the server has been started. | | port | {Number} | 2001 | Allows configuring the port. | | cors | {Boolean} | false | Enable CORS. | | log-level | {'info' | 'warn' | 'error' | 'silent'} | info | Adjust console output verbosity. (https://vitejs.dev/config/#loglevel) | | public-path | {String} | / | The location of static assets on your production server. |

hidden TODOs

Scripts

Non-Pota scripts defined in "scripts" of package.json and are runnable using npm run {script}

| Script | Description | | ----------------- | -------------------------------------------------------------------------- | | typecheck | Checks for type errors and unused variables/types in the source directory. | | fix | Executes all fix:* and format commands in sequence. | | **fix:eslint** | Executes eslint:lint and fixes fixable errors. | | **format** | Formats the source files using prettier. | | **lint** | Executes all lint:* commands in sequence. | | **lint:eslint** | Lints the source files using eslint. | | **rsync** | Synchronizes (uploads) dist/` files to a remote server. |

JavaScript / TypeScript

hidden TODOs

CSS

hidden TODOs

Images

hidden TODOs

Misc. Assets

hidden TODOs

Linting & Formatting

hidden TODOs

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