Vuesion

# Development

# Storybook

Storybook (opens new window) is an open source tool for building UI components and pages in isolation. It streamlines UI development, testing, and documentation.

# Get familiar with the Design System and its components

To see and interact with the Components that are available with the Vuesion Design System run npm run storybook:dev. The script will open http://localhost:6006 (opens new window) in your browser.

# Design System Tokens

Design tokens are all the values needed to construct and maintain a design system. Please read the documentation of the corresponding Stories for

# Design System deep dive

If you want to know more about the architecture of the Design Systems, Layout components or theming, read the Design System deep dive

# Nuxt.js

Nuxt.js (opens new window) is a framework for creating Vue.js applications. Its goal is to help Vue developers take advantage of server-side-rendering and a unified module system to enhance the developer and user-experience.

# Run your application

To test if everything works as expected run the following command: npm run dev.

It will open http://localhost:3000 (opens new window) and show you the Nuxt.js loading screen.

# Development mode and hot reloading

Your application currently runs in development mode, which means that Nuxt.js watches for changes.

Every file in the ./src directory will be hot reloaded, so you don't have to reload your browser or restart the dev server during development.

That guarantees a good dev experience and will make you much more productive.

CSS changes

CSS changes on page-level sometimes require a reload.

i18n

The only files that are not hot-reloaded are the files in the ./i18n directory; you have to reload your browser to reflect the changes.

# Change web-server port

Your app runs on port 3000 by default, set the PORT environment variable to configure a different port e.g. npm run dev -- --port 8080 in development mode or PORT=8080 npm start for your production build.

# Docker

Docker (opens new window), a subset of the Moby project, is a software framework for building, running, and managing containers on servers and the cloud.

The application can be served via Docker too.

In order to build the image run:

npm run ci && docker build -t "Vuesion:latest" .

When building is complete, you can proceed with firing up the Docker container:

docker run -it --name Vuesion -p 3001:3000 Vuesion:latest

You have to wait for the message:

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.15.2                       │
   │                                        │
   │   ▸ Environment: production            │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Memory usage: 123 MB (RSS: 181 MB)   │
   │                                        │
   │   Listening: http://172.17.0.2:3000/   │
   │                                        │
   ╰────────────────────────────────────────╯

Docker is available at port: 3001 so a developer can have both Docker and local server running at the same time

Now that you know everything works as expected, see Vuesion in action at http://localhost:3001 (opens new window).

← Testing →