title: Creating a dockerized vue-storybook project published: true description: Steps to create a docker container with a vue storybook tags: vue, storybook, docker

Let's create a vue-based storybook project that runs in docker

Overview

• Setup
• 1. Create new project
• 1. Install vue and dependencies
• 1. Install storybook

• Build

• 1. Add storybook script package.json
• 1. Create a component /components/MyButton.vue
• 1. Create configuration /.storybook/config.js
• 1. Create a story /stories/button.js

• Ship

• 1. Create dockerfile
• 1. Create .dockerignore
• 1. Create docker-compose.yml

1. Create a new project

Assuming you don't have a project created, start by creating a new directory and starting a new project within by running the init command.

sh npm init

This will ask some questions about the project setup, like name, version etc. Fill these in however you like.

2. Install vue

Next up, install the vue dependencies. Typically vue is not installed as a dev dependency and the other dependencies are. I'm leaving it as is, even though in this example they could all be same.

sh npm install vue --save npm install vue-loader vue-template-compiler @babel/core babel-loader babel-preset-vue --save-dev

3. Install storybook

This is just one more dependency, but it takes a while to install compared to the others.

sh npm install @storybook/vue --save-dev

4. Add storybook script

Open package.json file and replace the "test":... script with:

json "storybook": "start-storybook -s 8086"`

This will allow us to use npm run storybook to start the storybook application.

It also uses the same port number every time it starts, so that we can make the port available through docker easier.

5. Creating a component

To illustrate a basic component in storybook, let's create a button component in /components/MyButton.vue

This component will allow changing color to red, blue or green and have the ability to set rounded to true or false'. It uses a slot to define the button text.

```vue

```

6. Create Storybook configuration

Create a new file: .storybook/config.js with:

```js import { configure } from '@storybook/vue';

function loadStories() { const req = require.context('../stories', true, /.js$/); req.keys().forEach(filename => req(filename)); }

configure(loadStories, module); ```

This will scan through the stories folder for any .js files for stories to load.

7. Create a story

Create a file stories/button.js

```js import { storiesOf } from '@storybook/vue'; import MyButton from '../components/MyButton';

storiesOf('Button', module) .add('default', () => ({ components: { MyButton }, template: 'Default' })) .add('red', () => ({ components: { MyButton }, template: 'Red' })) .add('blue', () => ({ components: { MyButton }, template: 'Blue' })) .add('green', () => ({ components: { MyButton }, template: 'Green' })) .add('rounded', () => ({ components: { MyButton }, template: 'Rounded' })) ```

Test it

At this point, you should be able to run storybook using

sh npm run storybook

8. Create Dockerfile (for docker image)

This file defines what the image instructions are. The image is based off the node version 10, using alpine Linux. I'm using Alpine because it's small, and has all the things needed for this purpose.

Create the Dockerfile and put in the following instructions.

```docker

Select reference image

FROM node:10-alpine

This is optional. Sets the level of logging that you see

ENV NPM_CONFIG_LOGLEVEL warn

Create app directory

WORKDIR /usr/src/app

Copy project files into the docker image

COPY . .

Install app dependencies

RUN npm set progress=false && npm install

Make port 8086 available

EXPOSE 8086

run storybook app

CMD ["npm", "run", "storybook"]

```

9. Skip node_modules with .dockerignore

Create a .dockerignore file and put in the following

txt node_modules/

This will prevent your local node modules file to be copied into the docker image. Since different environments may require different dependency versions (binaries), preventing docker from copying node_modules will prevent headaches and you should most likely always do it.

10. Create a docker container

Create a docker-compose.yml file and paste the following:

yml version: '3' services: storybook: ports: - "8086:8086" build: .

This file makes it easier to run the container, so you don't need to run a build and run command for the Dockerfile.

Then run it with:

```sh docker-compose up

or to force building after making changes you can use --build

docker-compose up --build ```

The first time it runs, it will take a bit longer, since it needs to download the required images, but subsequent runs should be faster.

After storybook is ready, you can test it using localhost:8086

Link to git repo: https://github.com/dasDaniel/dockerized-vue-storybook-project