boilerplate-frontend/assets/index.html-CanOZARV.js

import{_ as e,c as t,o as n,a}from"./app-CnpfAwgF.js";const r="/boilerplate-frontend/assets/it4c-logo2-clean-bg_alpha-128x128-B_JxeTXp.png",s={},o=a('<h1 id="boilerplate-frontend" tabindex="-1"><a class="header-anchor" href="#boilerplate-frontend"><span>boilerplate-frontend</span></a></h1><p><a href="https://nodejs.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/nodejs-&gt;%3D20.5.0-blue" alt="nodejs"></a><a href="https://www.npmjs.com/package/npm" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/npm-latest-blue" alt="npm"></a><a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/docker-latest-blue" alt="docker"></a><a href="https://jqlang.github.io/jq/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/jq-latest-blue" alt="jq"></a><a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=dependencies.vue&amp;label=vue&amp;color=green" alt="vue"></a><a href="https://vike.dev/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=dependencies.vike&amp;label=vike&amp;color=green" alt="vike"></a><a href="https://vuetifyjs.com/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=dependencies.vuetify&amp;label=vuetify&amp;color=green" alt="vuetify"></a><a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=dependencies.pinia&amp;label=pinia&amp;color=green" alt="pinia"></a><a href="https://vue-i18n.intlify.dev/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=dependencies[&#39;vue-i18n&#39;]&amp;label=vue-i18n&amp;color=green" alt="vue-i18n"></a><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.eslint&amp;label=eslint&amp;color=yellow" alt="eslint"></a><a href="https://remark.js.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies[&#39;remark-cli&#39;]&amp;label=remark-cli&amp;color=yellow" alt="remark-cli"></a><a href="https://stylelint.io/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.stylelint&amp;label=stylelint&amp;color=yellow" alt="stylelint"></a><a href="https://vitest.dev/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.vitest&amp;label=vitest&amp;color=yellow" alt="vitest"></a><a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.storybook&amp;label=storybook&amp;color=orange" alt="storybook"></a><a href="https://vuepress.vuejs.org/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.vuepress&amp;label=vuepress&amp;color=orange" alt="vuepress"></a><a href="https://www.chromatic.com/" target="_blank" rel="noopener noreferrer"><img src="https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2FIT4Change%2Fboilerplate-frontend%2Fmaster%2Fpackage.json&amp;query=devDependencies.chromatic&amp;label=chromatic&amp;color=orange" alt="chromatic"></a></p><p>The IT4C Boilerplate for frontends</p><p><img src="'+r+`" alt=""></p><h2 id="requirements-technology" tabindex="-1"><a class="header-anchor" href="#requirements-technology"><span>Requirements &amp; Technology</span></a></h2><p>To be able to build this project you need <code>nodejs</code>, <code>npm</code> and optional <code>docker</code> and <code>jq</code>.</p><p>The project uses <code>vite</code> as builder, <code>vike</code> to do the SSR. The design framework is <code>vuetify</code> which requires the frontend framework <code>vue3</code>. For localization <code>vue-i18n</code> is used; Session storage is handled with <code>pinia</code>.</p><p>Testing is done with <code>vitest</code> and code style is enforced with <code>eslint</code>, <code>remark-cli</code> and <code>stylelint</code>.</p><p>This projects utilizes <code>storybook</code> and <code>chromatic</code> to develop, document &amp; test frontend components and <code>vuepress</code> for static documentation generation.</p><h2 id="commands" tabindex="-1"><a class="header-anchor" href="#commands"><span>Commands</span></a></h2><p>The following commands are available:</p><table><thead><tr><th>Command</th><th>Description</th></tr></thead><tbody><tr><td><code>npm install</code></td><td>Project setup</td></tr><tr><td><code>npm run build</code></td><td>Compiles and minifies for production</td></tr><tr><td><code>npm run server:prod</code></td><td>Runs productions server</td></tr><tr><td><strong>Develop</strong></td><td></td></tr><tr><td><code>npm run dev</code></td><td>Compiles and hot-reloads for development</td></tr><tr><td><code>npm run server:dev</code></td><td>Run development server</td></tr><tr><td><code>npm run server:prod:ts</code></td><td>Run production server without build (ts-node)</td></tr><tr><td><code>npm run server:build</code></td><td>Build Server into an executable cjs file</td></tr><tr><td><strong>Test</strong></td><td></td></tr><tr><td><code>npm run test:lint</code></td><td>Run all linters</td></tr><tr><td><code>npm run test:lint:eslint</code></td><td>Run linter eslint</td></tr><tr><td><code>npm run test:lint:locales</code></td><td>Run linter locales</td></tr><tr><td><code>npm run test:lint:remark</code></td><td>Run linter remark</td></tr><tr><td><code>npm run test:lint:style</code></td><td>Run linter stylelint</td></tr><tr><td><code>npm run test:unit</code></td><td>Run all unit tests and generate coverage report</td></tr><tr><td><code>npm run test:unit:update</code></td><td>Run unit tests, coverage and update snapshots</td></tr><tr><td><code>npm run test:unit:dev</code></td><td>Run all unit tests in watch mode</td></tr><tr><td><code>npm test</code></td><td>Run all tests &amp; linters</td></tr><tr><td><strong>Storybook</strong></td><td></td></tr><tr><td><code>npm run storybook</code></td><td>Run Storybook</td></tr><tr><td><code>npm run storybook:build</code></td><td>Build static storybook</td></tr><tr><td><code>npm run storybook:test</code></td><td>Run tests against all storybook stories</td></tr><tr><td><strong>Documentation</strong></td><td></td></tr><tr><td><code>npm run docs:dev</code></td><td>Run Documentation in development mode</td></tr><tr><td><code>npm run docs:build</code></td><td>Build static documentation</td></tr><tr><td><strong>Chromatic</strong></td><td></td></tr><tr><td><code>npm run chromatic</code></td><td>Run Chromatic. See Chromatic section for details</td></tr><tr><td><strong>Maintenance</strong></td><td></td></tr><tr><td><code>npm run update</code></td><td>Check for updates</td></tr></tbody></table><h3 id="docker" tabindex="-1"><a class="header-anchor" href="#docker"><span>Docker</span></a></h3><p>Docker can be run in development mode utilizing <code>docker-compose.overwrite.yml</code>:</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">docker</span> compose up</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><p>Docker can be run in production mode:</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">docker</span> compose <span class="token parameter variable">-f</span> docker-compose.yml up</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="chromatic" tabindex="-1"><a class="header-anchor" href="#chromatic"><span>Chromatic</span></a></h3><p>In order to use the chromatic workflow you need to provide a <code>CHROMATIC_PROJECT_TOKEN</code> in the repository secrets.</p><p>If you want to run chromatic from the command line you either have to provide this variable as well</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token builtin class-name">export</span> <span class="token assign-left variable">CHROMATIC_PROJECT_TOKEN</span><span class="token operator">=</span><span class="token punctuation">..</span>.</span>
<span class="line"><span class="token function">npm</span> run chromatic</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>or you have to append it via parameter:</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> run chromatic -- --project-token<span class="token operator">=</span><span class="token punctuation">..</span>.</span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div><h3 id="update" tabindex="-1"><a class="header-anchor" href="#update"><span>Update</span></a></h3><p>You can get a list of packes to update by running <code>npm run update</code>.</p><p>Appending <code>-u </code> will also update the packages in the <code>package.json</code>. You have to run <code>npm install</code> again after.</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">npm</span> run update -- <span class="token parameter variable">-u</span></span>
<span class="line"><span class="token function">npm</span> <span class="token function">install</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="endpoints" tabindex="-1"><a class="header-anchor" href="#endpoints"><span>Endpoints</span></a></h2><p>The following endpoints are provided given the right command is executed or all three if <code>docker compose</code> is used:</p><table><thead><tr><th>Endpoint</th><th>Description</th></tr></thead><tbody><tr><td><a href="http://localhost:3000" target="_blank" rel="noopener noreferrer">http://localhost:3000</a></td><td>Web</td></tr><tr><td><a href="http://localhost:6006" target="_blank" rel="noopener noreferrer">http://localhost:6006</a></td><td>Storybook</td></tr><tr><td><a href="http://localhost:8080" target="_blank" rel="noopener noreferrer">http://localhost:8080</a></td><td>Documentation</td></tr></tbody></table><h2 id="how-to-use-as-part-of-a-project" tabindex="-1"><a class="header-anchor" href="#how-to-use-as-part-of-a-project"><span>How to use as part of a project</span></a></h2><p>If you want to use this as part of a larger project, e.g. in conjunction with a backend also utilizing a boilerplate you cannot use the template mechanic provided by github for this repository.</p><p>You can use the following commands to include the whole git history of the boilerplate and be able to update according to changes to this repo using another remote.</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> remote <span class="token function">add</span> xxx_boilerplate_frontend git@github.com:IT4Change/boilerplate-frontend.git</span>
<span class="line"><span class="token function">git</span> fetch xxx_boilerplate_frontend</span>
<span class="line"><span class="token function">git</span> merge <span class="token parameter variable">-s</span> ours --no-commit --allow-unrelated-histories xxx_boilerplate_frontend/master</span>
<span class="line"><span class="token function">git</span> read-tree <span class="token parameter variable">--prefix</span><span class="token operator">=</span>xxx/ <span class="token parameter variable">-u</span> xxx_boilerplate_frontend/master</span>
<span class="line"><span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">&quot;Imported boilerplate_frontend as a subtree under xxx/.&quot;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To update the subtree you can use</p><div class="language-bash line-numbers-mode" data-highlighter="prismjs" data-ext="sh" data-title="sh"><pre class="language-bash"><code><span class="line"><span class="token function">git</span> subtree pull <span class="token parameter variable">-P</span> xxx/ xxx_boilerplate_frontend master</span>
<span class="line"><span class="token function">git</span> commit <span class="token parameter variable">-m</span> <span class="token string">&quot;Updated boilerplate_frontend in subtree under xxx/.&quot;</span></span>
<span class="line"></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Where <code>xxx</code> refers to the folder and product part you want to use the boilerplate in. This assumes that you might need several copies of the frontend boilerplate for you product.</p><p>This mechanic was taken from this <a href="https://stackoverflow.com/questions/1683531/how-to-import-existing-git-repository-into-another/8396318#8396318" target="_blank" rel="noopener noreferrer">source</a></p><h2 id="known-problems" tabindex="-1"><a class="header-anchor" href="#known-problems"><span>Known Problems</span></a></h2><ul><li>[ ] <a href="https://github.com/vuetifyjs/vuetify/issues/18772" target="_blank" rel="noopener noreferrer">Image flicker</a></li><li>[ ] <a href="https://github.com/vuetifyjs/vuetify/issues/18773" target="_blank" rel="noopener noreferrer">Black Buttons</a></li></ul><h2 id="license" tabindex="-1"><a class="header-anchor" href="#license"><span>License</span></a></h2><p><a href="./LICENSE">Apache 2.0</a></p>`,42),i=[o];function l(d,c){return n(),t("div",null,i)}const h=e(s,[["render",l],["__file","index.html.vue"]]),u=JSON.parse('{"path":"/","title":"boilerplate-frontend","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Requirements & Technology","slug":"requirements-technology","link":"#requirements-technology","children":[]},{"level":2,"title":"Commands","slug":"commands","link":"#commands","children":[{"level":3,"title":"Docker","slug":"docker","link":"#docker","children":[]},{"level":3,"title":"Chromatic","slug":"chromatic","link":"#chromatic","children":[]},{"level":3,"title":"Update","slug":"update","link":"#update","children":[]}]},{"level":2,"title":"Endpoints","slug":"endpoints","link":"#endpoints","children":[]},{"level":2,"title":"How to use as part of a project","slug":"how-to-use-as-part-of-a-project","link":"#how-to-use-as-part-of-a-project","children":[]},{"level":2,"title":"Known Problems","slug":"known-problems","link":"#known-problems","children":[]},{"level":2,"title":"License","slug":"license","link":"#license","children":[]}],"git":{},"filePathRelative":"README.md"}');export{h as comp,u as data};