DEV Community: Moritz Schramm

Published my first ever npm package

Moritz Schramm — Fri, 13 Jul 2018 15:42:16 +0000

I did it!

I am JavaScript developer now for quite a while, but I never managed to create an npm package that made sense to me. In the last days, I helped my girlfriend to prepare for her exam in algorithms and data structures. Within that process, I implemented some sorting algorithm in Java and could not remember that I ever have
seen a sorting package for NodeJS where I could choose the algorithm.

So here it is.

node-sorter is my first ever npm package that allows you to sort on arrays and choose the algorithm you want!

Currently, I implemented:

Bubblesort
Insertionsort
Mergesort
Quicksort
Heapsort

The source code is available on GitHub and mostly tested. I would love hearing some feedback from you. :)

Definition of Done (or not done)

Moritz Schramm — Thu, 14 Jun 2018 15:54:43 +0000

As a developer and Scrum enthusiast, I am working daily on a self-organizing team. One of the parts of my daily agile work that I would give the most important is the principle of a "Definition of Done". I am currently reading a lot about agile development methods as well as design patterns and other architectural principles.

Why am I writing this article? Well, there are actually two reasons.

I was reading a book and there were some thoughts about DoDs that I would not share and so I decided to write a post about my opinion about DoDs.
Secondly, I was surprised when talking to some developers in an agile context (even Scrum) that they were not knowing what that is.

What is a "Definition of Done"?

Basically, a DoD defines whether a certain ticket, user story or task is done. The DoD should be defined by the whole agile team¹. Only defining those rules is not enough from my point of view. Actually, every team member should clearly understand the DoD and accept its content. Otherwise, there would be ignorance on that list. I do not think that it makes sense to have a DoD if you do not care about any quality assurance.

Visibility of the DoD

There are two things that I would like to say about how to present the DoD.

The DoD should be visible within the office to every team member. (e.g. whiteboard, large print, ...)
The DoD should be available and visible within Planning and Refinement meetings.

Content of a DoD

So now we are talking about what actually could be part of a DoD. All here listed elements are just proposals and contents that worked out for me in practical landscape.

Acceptance Criteria

Every DoD should contain that all acceptance criteria of a ticket are fulfilled.

Automated Testing

Every DoD should contain all needed test methods (e.g. unit, integration, acceptance, manual).

Internationalization

If you are doing i18n then I would make it part of the DoD to ensure that everything is automatically translated.

Review

All types of review should be done (e.g. functional review, code review).

DoDs and Refactoring

I read that the process of refactoring (especially in the context of TDD) should be part of your DoD. That is a point where I would fully disagree. As a developer, you could always optimize or clean up your code. I would rather than putting refactoring on the list, add the process of code review to the DoD. You ensure with that, that a certain code quality is reached, it is actually measurable and there is room for discussion.

End

So I hope I could show you what a DoD means to me and how you could use it. If you are already using it, I would be happy to see your version of DoDs.

Footnotes

¹ In Scrum context I would define the agile team as the team containing developers, designers (could be also counted as developers), product owner and Scrum master.

Creating linear gradients in SVG

Moritz Schramm — Mon, 04 Jun 2018 06:23:08 +0000

I recently had to figure out, how to create linear gradients within SVG without using PNG files or anything else. Since the way is simple and also very powerful, I like to share with you a very simple example.

Let's consider this simple SVG structure:

<svg width="220" height="120">
    <g>
        <rect x="10" y="10" width="200" height="100" class="rectangle" />
    </g>
</svg>

That simply renders a black rectangle. I now want a left to right linear gradient as a fill color of the rectangle. We need to define this within the <defs> tag of the SVG element.

<svg width="220" height="120">
    <g>
        <rect x="10" y="10" width="200" height="100" class="rectangle" />
    </g>
    <defs>
        <linearGradient id="myGradient">
            <stop offset="0%" class="start" />
            <stop offset="100%" class="end" />
        </linearGradient>
    </defs>
</svg>

The id of the linearGradient tag we will use as a fill reference for the rect element. stop tags are used to define the breakpoints and color changing points for the gradient. You can define even more than just two.

The needed CSS looks like that:

.rectangle {
  fill: url(#myGradient);
}

.start {
  stop-color: #a0ced9;
}

.end {
  stop-color: #83a9b2;
}

As you can see we just need to reference the gradient using url(#myGradient). This directly searches for the defined linear gradient (or different gradient). The colors for the different stop elements need to be defined by using the stop-color attribute.

Here is the result:

Post: If you want to create a linear gradient from top to bottom then you need to change the linear gradient definition to <linearGradient id="myGradient" x2="0%" y2="100%">.

An introduction to Vue.js - Chapter 5 - Conditional Rendering

Moritz Schramm — Thu, 05 Oct 2017 21:05:54 +0000

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

I was away for some time and did not manage to write an article for you guys. But today we are continuing with our Vue.js series. Lets talk about conditional rendering in Vue and lets try to adapt our list so that we can use the list as a ordered and unordered list.

I will always upload the code to this github repository.

Conditions

We all know how we can do a conditional execution in JavaScript. Usally you have something like that:

if (a === b) {
    // Execute some code if it is true
} else {
    // Execute some code if it is false
}

Even though some times you need something like that:

if (a === b) {
    // Execute some code if the first condition is true
} else if (b === c) {
    // Execute some code if then second condition is true
} else {
    // Execute some code if both conditions are false
}

Now sometimes you want to render certain things only if a certain condition is true or even not. For that luckily Vue offers more directives called v-if, v-else and v-else-if.

v-if

The v-if is the most simple one. You can just add this to your corresponding DOM node that you only want to render under a certain circumstance. For example we want the possibility to differ between an ordered and unordered list. Of course we could simply duplicate our already existing list but we could also just change the rendered tag based on a boolean expression.

First I added an additional property to our list component:

import template from './list.html';

export default {
    name: 'vg-list',
    template,
    props: {
        items: {
            type: Array,
            required: true
        },
        ordered: {
            type: Boolean,
            required: false,
            default: false
        }
    }
};

(If you do not have a clue yet about this, read the previous chapters ;))

Now we have a look at our HTML template. We want to render an ul tag if ordered === false and an ol tag if ordered === true. When you add the v-if directive to your DOM node you set the value to the boolean expression you want to check.

<ol v-if="ordered === true" class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ol>
<ul v-if="ordered === false" class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ul>

Of course you could simply change the boolean to the shorthand expression

<ol v-if="ordered" class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ol>
<ul v-if="!ordered" class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ul>

If you know would start the app, you should get an error since it is not allowed to have multiple root nodes within one component. At some point in the Vue history it was not possible to do such stuff without an additional container element around that. But since v2.0.1 they made it possible to have multiple root nodes when using v-if and v-else.

v-else

The v-else directive always reacts to the last v-if or v-else-if directive that was called before and on the same node level. You do not need to set any value to this new "attribute". It behaves like the usual else block in your JavaScript code.

To adapt now our code we just need to remove the second v-if directive and replace it by a v-else one.

<ol v-if="ordered" class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ol>
<ul v-else class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ul>

If you now start your app it should actually work without an error message in your developer tools.

v-else-if

I could not think of any example where I would you such a thing. Actually I would prefer to rethink your component structure and maybe split them up into multiple ones (for sharing logic you could use mixins but about that we will talk later). That is why I will not go deep into that topic.

Basically it behaves like a combination of the other two. It needs to have a boolean expression as the value and it always reacts to the last v-if or v-else-if directive on the same node level.

If you want to have further reading, check the API documentation for that. ;)

Pass boolean parameters

While writing that article I noticed some missing knowledge from my side on how to pass a boolean to a component from your HTML template. Usually, I would use a property and bind that one to the component but that do not make sense at all when using such a list component. When just doing this:

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list :items="items" ordered="true" />
    <vg-list :items="items" />
</div>

We would get a "Expected Boolean, Got String." error. That is why I looked it up and it is actually pretty easy. You just need to bind the boolean value to the component:

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list :items="items" :ordered="true" />
    <vg-list :items="items" />
</div>

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list :items="items" v-bind:ordered="true" />
    <vg-list :items="items" />
</div>

That actually works because the value of the v-bind directive is executed as JavaScript code and the return value is passed to the bound component.

Done

I hope you like the guide. If you have any questions ask them on Twitter or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.

Next chapter will come in the next days.

An introduction to Vue.js - Chapter 4 - List

Moritz Schramm — Sun, 24 Sep 2017 21:21:30 +0000

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

Sometime you would like to render a list. This list could be some bullet points, a chart list, multiple content items, ...

But how do we do this actually with Vue.js? This question I will try to answer with you together.

I will always upload the code to this github repository.

Needs

What to we need for a list. Of course we should start with a component.

import template from './list.html';

export default {
    name: 'vg-list',
    template
};

And this component needs although a property to handover the list items we want to render. The property should be required and has the type Array.

(src/components/list/list.js)

import template from './list.html';

export default {
    name: 'vg-list',
    template,
    props: {
        items: {
            type: Array,
            required: true
        }
    }
};

If you do not understand what we did here, I recommend you to read Chapter 2 and Chapter 3.

The template

The actual magic to render the list happens within our template file.

Let us have look how a usual list would look like in plain HTML.

<ul class="list">
    <li class="list-item">List Item 1</li>
    <li class="list-item">List Item 2</li>
    <li class="list-item">List Item 3</li>
    <li class="list-item">List Item 4</li>
</ul>

As we can see we repeat always this li tags with just changing the corresponding text. Happily, Vue provides some API to do this automatically. For that we use the Directive v-for. With v-for you can iterate over an array an use the specific values to render a DOM element or even a custom component. Let us have a look how that initially looks like.

(src/components/list/list.html)

<ul class="list">
    <li v-for="" class="list-element">List item</li>
</ul>

The value of that v-for attribute usually looks like that: <iteratee> in <array>
That actually looks like a simple for-each loop in JavaScript. In our case we want to iterate over our items array and use each item to display it. (Expecting that this array only contains plain strings)

<ul class="list">
    <li v-for="item in items" class="list-element"></li>
</ul>

To display it now we just use the text directive:

<ul class="list">
    <li v-for="item in items" class="list-element">{{ item }}</li>
</ul>

Make use of it

I adapted our hello component by adding a data property to it with a simple array of strings as a value. Moreover I already imported the list component

import button from 'app/components/button/button';
import list from 'app/components/list/list';
import template from './hello.html';

export default {
    name: 'vg-hello',
    template,
    components: {
        [button.name]: button,
        [list.name]: list
    },
    data: () => ({
        items: ['foo', 'bar', 'buz']
    })
};

But how do we get this items array into the list component? If we try to add the variable simply as an attribute as we did before, we should get an error.

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list items="items" />
</div>

So that does not work because the value of items is now interpreted as a string (meaning not that items is converted into string but actually the word items is passed). We need to bind that data property to the list. That can be done in two different ways.

Option 1

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list v-bind:items="items" />
</div>

Option 2

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo bar" />
    <vg-list :items="items" />
</div>

I personally prefer using the second options since it helps you saving typing. With the bind method you could although pass usual properties or even methods.

If you now build and open your app, I should see your list rendered. Of course we can currently only render an unordered list and not an ordered list but how that we works we will see in the next chapter.

Done

I hope you like the guide. If you have any questions ask them on Twitter or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.

Next Chapter

An introduction to Vue.js - Chapter 3 - Components (Part II)

Moritz Schramm — Fri, 22 Sep 2017 08:19:44 +0000

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

First of all: Thanks for the great support on dev.to and Twitter!

I added a table of contents at the beginning of every chapter so that you can easily jump between them. I recommend to read the other chapters before starting with this one.

This time we will try to extend our button component and make it a little more useful.

I will always upload the code to this github repository.

Properties

The first "quest" would be to extend our button so that we can set the text that we want to use depending on the place were we use it, since we do not want all our buttons to have the text "Click me!".

The requirements to our button text would be:

It can be set at the place where the button is used.
It defaults to "Click me!" if no text is given.

The answer to solve this problems are properties.

Properties are like parameters of a function - just for components. They can be set via the DOM were it will be used. Moreover we can display a property in our template or used even in function (we will see later).

But how to define a property on a components? The keyword for that is props. Its an object that export as well which contains multiple property configurations.

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
    }
};

A property configuration can consists multiple parameters. For now we will concentrate on type, required and default.

type is the data type of the property. It could for example have the value String, Number or Boolean. For our button text we would use String since it should be some sort of text.

With the help of required we can define a property as needed to be passed when using this component. For our button I will leave it as not required since we are providing a default text.

default is actually the default value of the property.

So the definition of our text property should look like that.

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    }
};

But how can we now display this text in our template?

For that we will using the Directives of Vue.

The easiest one would be just displaying text (actually that what we are looking for). There are two ways of doing that within our template file. (app/components/button/button.html)

Option 1

<button role="button" class="button">
    {{ text }}
</button>

Option 2

<button role="button" class="button" v-text="text"></button>

I personally prefer the first option.

Now we want to set the button text in our hello component to Foo Bar. This is actually pretty easy. In the template file of the components (app/components/hello/hello.html) we need to add just an attribute to the DOM node:

<div class="app">
    <h1>Hello World</h1>
    <vg-button text="Foo Bar" />
</div>

If you now build and open the app, you should now see that the button has the text "Foo Bar".

Methods

Of course we want our button something to do. For the begin we want our button to print the text that it has to the console.

Methods can be easily defined on a component by exporting the methods object.

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    },
    methods: {
    }
};

If you use this within a method I would recommend you to use function and never a arrow function. With this we can access our properties. So if we want to print our text property to the console it would look like that:

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    },
    methods: {
        interact: function() {
            console.log(this.text);
        }
    }
};

If you build and open the app you will recognise that the button does not execute the method. We need to add this method as an event function to our button. Luckily Vue provides an easy way of event binding. Therefore we need to edit the template. When we add @eventname as an attribute to a native DOM node we can register a function to that. The events are not automatically bubbled up so you can not use them directly on you custom component node (we will take care about that in different chapter). In our case it would be @click="interact".

So our template (app/components/hello/hello.html) should now look like that:

<button role="button" class="button" @click="interact">
    {{ text }}
</button>

If you now build and open the app the button should work as expected. Yeah!

Data

Sometime we need some variables for keeping data without passing them at usage. Of course we could add property with required: false and an initial value using default but Vue provides another way. We can export a data object or a function returning an object. I personally like the way of having a function returning the data object. That would look like that:

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    },
    data: () => ({

    }),
    methods: {
        interact: function() {
            console.log(this.text);
        }
    }
};

As an example usage we want our button to count the clicks and displayed it together with our button text.

So first we would add an data variable called interactCount with the initial value 0.

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    },
    data: () => ({
        interactCount: 0
    }),
    methods: {
        interact: function() {
            console.log(this.text);
        }
    }
};

Now we would need to increment that number each time the button is clicked. For that I removed the console.log and replaced it with the increment.

import template from './button.html';

export default {
    name: 'vg-button',
    template,
    props: {
        text: {
            type: String,
            required: false,
            default: 'Click me!'
        }
    },
    data: () => ({
        interactCount: 0
    }),
    methods: {
        interact: function() {
            this.interactCount += 1;
        }
    }
};

As you can see we can access the data variables with this as well.

To display now the number we need to adapt the template and use the directives to display the full text.

<button role="button" class="button" @click="interact">
    {{ text }} - {{ interactCount }}
</button>

If you now build and open the app the button text should change, every time you click the button.

Done

I hope you like the guide. If you have any questions ask them on Twitter or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.

Next chapter will come in the next days.

An introduction to Vue.js - Chapter 2 - Components (Part I)

Moritz Schramm — Mon, 18 Sep 2017 20:59:02 +0000

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

Before we start some short information.

Before you read the second chapter, please read the first one so that you have a basic setup we can work with. Thank you :)

I will always upload the code to this github repository.

Some of you ask me why I do not use "Single File Components" (.vue files). I decided to write a special chapter about that whole topic, show you how to configure your project to make use of them and tell you my opinion about this.

Our todays chapter will be more theory and less writing code.

Components

Components are one of the main parts or even the main part of Vue.js. But what is actually a component?

Let me check Wikipedia for you.

Web Components are a set of features [...] that allow for the creation of reusable widgets or components in web documents and web applications.

That is the basic definition of Web Components in the context of the W3C specs. But basically this although applies to Vue components. They are reusable widgets that you can use in your app. A widget could be a navigation, a list or even a simple button. I personally prefer naming my components with small letters and putting all files which belong together into one folder.

In Vue every component need to have at least 2 things:

A name (obvious)
A template (The rendered DOM that belongs to each component)

Lets take a look at the .js file of our last chapter:

import template from './hello.html';

export default {
    name: 'vg-hello',
    template
};

We imported a template from a .html file and we exported a data object with two key-value-pairs. The two keys were name and template (if you are not familiar with the shorthand object property notation have a look here).

I prefixed my component name with vg- since it makes the work a lot easier when using third-party components. Later I will show you how to use those components in other components. There the name will be equal to our tag in the DOM.

Now let us have a short look into our current .html file:

<h1>Hello World</h1>

Here we see the DOM which is rendered instead of the tag or when it is the root component (as it is for now), it replaces the mounted element in the initial DOM.

Reminder: Our index.html currently looks like that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Vue Guide</title>
</head>
<body>
    <div id="app"></div>

    <script src="build.js"></script>
</body>
</html>

If we now start our app, open the dev tools and look at the DOM tree, we should see this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Vue Guide</title>
</head>
<body>
    <h1>Hello World</h1>

    <script src="build.js"></script>
</body>
</html>

The direct replacement of the element and later the custom tags is something that I really like within Vue.js (Angular 4 for example renders the custom tags into the DOM).

Button

Now let us create another component, a simple button. We will use this button for the next chapters and it will develop more and more over time.

For now our button should be like:

The HTML button tag
Has the attributes class="button" and role="button"
Has the text Click me!

Let us start with the template (src/components/button/button.html)

<button role="button" class="button">Click me!</button>

This should be easy to understand. We have our button tag with class, role and the expected text. Now we need to define the .js file. (src/components/button/button.js)

import template from './button.html';

export default {
    name: 'vg-button',
    template
};

I imported the template, named the button class vg-button and exported both. That is everything what we need to do. I will show you now how to use those components in other components. There are two ways and I will show you both.

Register the component on a global level.

For that we need to add some lines to our main.js.

import button from 'app/components/button/button';

Vue.component(button.name, button);

Your main.js could now look like that:

import button from 'app/components/button/button';
import hello from 'app/components/hello/hello';
import Vue from 'vue';

Vue.component(button.name, button);

new Vue({
    render: (h) => h(hello)
}).$mount('#app');

To use the button component in our hello component I adapt the hello.html:

<div class="app">
    <h1>Hello World</h1>
    <vg-button />
</div>

As you can see I added an additional <div> around both elements since Vue requires exactly one root element per component.

If you now build and open your app you now should see the button. It has no functionality for now but it should be there. You can although add more:

<div class="app">
    <h1>Hello World</h1>
    <vg-button />
    <vg-button />
    <vg-button />
</div>

Now should even see three. They should all have the same DOM, the same inner text and should all do nothing.

Register the component on a local level

That is basically the way I prefer since it is much more easier to test the rendered DOM in unit tests (we will see that in later chapters). I will use this way in the next chapters but I will not force you to use it (as always).

For that you need to adapt your hello.js. We need to import the component and then export the used components.

import button from 'app/components/button/button';
import template from './hello.html';

export default {
    name: 'vg-hello',
    template,
    components: {
        [button.name]: button
    }
};

As you can see I added a new property to my object containing the used components. If we know use the same HTML in our template as before the button should still be there without registering them globally.

Done

I hope you like the guide. If you have any questions ask them on Twitter or in the comment section. I will try to answer a much as possible. I am happy about any possible feedback.

Next chapter will come in the next days.

An introduction to Vue.js - Chapter 1 - Basic Setup

Moritz Schramm — Sun, 17 Sep 2017 09:15:39 +0000

Series overview

Chapter 1
Chapter 2
Chapter 3
Chapter 4
Chapter 5

Foreword

I recently started working with Vue.js in a more deeper way. I figured out that it isn't that hard to get into it but will get harder after some time to get more insides into that area.

I decided to write a series of Vue guides how you could possible handle certain things in your project. I like the way I will describe to you but of course it is not the overall solution for healing the world. It just a best practice I figured out while working with Vue.

I will always upload the code to this github repository.

So now lets start with our first chapter.

Node.js Modules

First of all we need to setup a simple Node project. I would recommend you to do this via command line by using the npm init command which will do a small wizard with you to create the package.json. I removed some parts of the generated package.json and it finally looked like that:

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC"
}

Afterwards we would need to instal some Node modules for using Vue. The first one would be Vue itself.

npm install --save vue

I will use webpack as my "compiler" and babel as a transpiler. Moreover we will need raw-loader to load html files via ES6 Modules.

npm install --save-dev webpack babel-core babel-loader raw-loader

You should now have a node_modules folder and your package.json should look like that (the version strings could differ):

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

The Webpack Configuration

We will configure the webpack build through the webpack.config.js. For that we would need to create that file on the same level as the package.json.

First of all we need to define were the webpack should actually start "compiling". From my setup it should start from the file src/main.js.

module.exports = {
    entry: './src/main.js'
};

Now we need to tell webpack were to put the bundled file. I love to put that into a separated folder called bin and the filename would be build.js.

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    }
};

Since webpack works with loaders we would need to define which we would like to use (we installed raw-loader and babel-loader). The babel-loader we use for our .js files and raw-loader for .html files.

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    }
};

Now we need to define some alias to get Vue.js to work. The first one we need to import Vue.js in the correct and full version, the second one is to avoid later import path that could look like that: ../../../common/button/button rather then doing app/components/common/button/button

const path = require('path');

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'bin'),
        filename: 'build.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.html$/,
                loader: 'raw-loader'
            }
        ]
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.js',
            app: path.resolve(__dirname, 'src')
        }
    }
};

That's it for now with our webpack configuration.

NPM Scripts

Luckily npm offers a script function were we could execute commands from our command line with out creating a bunch of weird looking bash scripts executing stuff from the deep of our node_modules folder.

These scripts can be defined in our package.json.

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {

  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

I created a script called build and one called build:js.

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {
    "build": "npm run build:js",
    "build:js": "webpack",
  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "npm-run-all": "4.1.1",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

The build script currently calls only the build:js script but will later get more calls. The build:js executes webpack using our webpack.config.js.

Some code

After configuring a bunch of stuff we now created some code to test the whole stuff and add another step to our build script.

First of all we need to create a src folder as we configured in our webpack configuration.

index.html

Within that folder we add the index.html which should look like that:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <title>Vue Guide</title>
</head>
<body>
    <div id="app"></div>

    <script src="build.js"></script>
</body>
</html>

The index.html includes our build.js generated by webpack. We need to copy that file over into the bin folder a well so I added another script called deploy:resources and called it in the build script (I installed npm-run-all via npm install --save-dev npm-run-all to ease the way of calling multiple npm scripts).

{
  "name": "chapter1",
  "version": "1.0.0",
  "description": "Chapter 1 of the Vue Guide",
  "author": "Moritz Schramm",
  "license": "ISC",
  "scripts": {
    "build": "npm-run-all build:js deploy:resources",
    "build:js": "webpack",
    "deploy:resources": "cp src/index.html bin/index.html"
  },
  "dependencies": {
    "vue": "2.4.4"
  },
  "devDependencies": {
    "babel-core": "6.26.0",
    "babel-loader": "7.1.2",
    "npm-run-all": "4.1.1",
    "raw-loader": "0.5.1",
    "webpack": "3.6.0"
  }
}

hello component

That part I will not explain for now. You can simply copy over the code. I will go deeper into that topic in one of the next chapters.

File path: src/components/hello/hello.js

import template from './hello.html';

export default {
    name: 'vg-hello',
    template
};

File path: src/components/hello/hello.html

<h1>Hello World</h1>

main.js

This is not only our entry point for webpack but although our file for instantiating Vue.

import Vue from 'vue';

new Vue({
});

We need to tell Vue were to mount the app initially (render point in the DOM which is in our case the div with the id app).

import Vue from 'vue';

new Vue({
}).$mount('#app');

Finally we would need to tell Vue which component to render a startup.

import hello from 'app/components/hello/hello';
import Vue from 'vue';

new Vue({
    render: (h) => h(hello)
}).$mount('#app');

Done

We you now run npm run build from your command line you should find a bin folder with a build.js and index.html. Open that index.html in your favourite web browser (e.g. Chrome or Firefox) and you should the "Hello World".

Last words

I hope you like that way of describing the setup of a Vue project. I know there are a lot of different ways to do so (e.g. not using webpack, using .vue files, ...) but I like the way using ES6 modules. If you have some feedback, feel free to add it and if you have questions, just ask them on Twitter or in the comment section. I will try to answer as much as possible.

Next Chapter: Components (Part I)