Vue js advanced beginners guide. Part 1. Vue + node(koa) + webpack.

Other parts!

Part 1. Vue + node(koa) + webpack.
Part 2. Vue + vue-router + vuex.
Part 3. Vue + Node(koa) webpack hot reload + production build.
Part 4. Vue + Docker, nginx, getting fancy!

Also you can check github repo, where you’ll find code for every part!

Prelude

So i’ve been trying to create vue app, what I wanted to do was:

docker
nodejs (koa) server
mongodb
nginx
vue+vue router+vuex+webpack+stylus+babel and some other staff
yarn

Vue offers vue-cli tools, that is really helpful, if you’re trying to do some vue client-side prototyping, but I wanted to have more control and understanding over my server side and hadn’t really found any easy solution to achieve that (guess i’m really bad at googling staff)

Also I wanted more explicit building part (vue-cli has vue-cli-service build, which has webpack in it, and you can override its configuration, but again, I want to have more understanding of building steps)

Then i’ve tried to find some vue+koa guides||solutions and found some, but they did not meet my expectations about some implicit staff, so i’ve decided to write my own!

Hope you’ll enjoy reading!
And also that it will be helpful 🤔

The guide!

In that part i’ll cover just basic client side and server side code

First of all I assume you know what JS, Vue.js, Nodejs, Koajs, Webpack, Yarn (but you can use npm instead) are, so i’ll skip that part

Also I assume that you’re familiar with new ES features

Creating project

Everything was tested on these versions:

• node: 10.11+
• koa: 2.5+
• yarn: 1.10+
• webpack: 4.20+
• vue: 2.5+

Let’s create our project folder

mkdir vue-guide
cd vue-guide

Now let’s do some initial staff we need!

Initial files

index.template.html

Nothing specific here, we just create template html, which html-webpack-plugin will use to inject our built modules

./src/App.vue

It is simple SFC, which will be our root component.
One thing need clarification here, you may had noticed, that our html AND root component have id="app" attribute, which will conflict in same html, but i’ll explain it few lines later.

./src/main.js

So what we do here:

1. importing vue itself
2. importing our SFC
3. creating our vue instance, which

3.1. renders our whole app (root component and all its descendants)

3.2. looks for id="app" node, and replaces it with itself, so in the end we’ll have only 1 element with id="app" (thus it is not recommended to use html||head||body as root elements)

Let’s build it!

yarn init -y
yarn add -D webpack webpack-cli html-webpack-plugin clean-webpack-plugin vue-loader vue-template-compiler
yarn add vue

1. We init our package.json with some standard fields
2. We add our development tools as devDependencies
3. We add our essential components as dependencies

It doesn’t really matter if you add them as I did, or add them all as deps, or devDeps.

Now let’s create our config file for webpack, and because its our dev config, let’s call it webpack.config.dev.js

It should look like this

./webpack.config.dev.js

Let’s explain it step-by-step

1. importing necessary modules
2. mode is required in webpack, also it enables useful features in everything we use
3. as entry file we’ll use our main.js
4. we’ll need publicPath, so all our built resources will be requested with path /dist/
5. output it all to dist folder, don’t forget about hash (we don’t want problems with browser cache)
6. next comes vue-loader, in order for us to use .vue files, we need to process them, and that is where vue-loader comes in. It also provides some cool features, but we’ll come to them later.
7. clean-webpack-plugin for cleaning our dist directory before each build, so our hash files won’t spam
8. html-webpack-plugin for processing our html template and injecting our built scripts, by default webpack puts it in same “public path” as everything else, and want separate it from dist
9. VueLoaderPlugin is required for processing .vue files

Now, that we’re ready to build, let’s add our building script to our package.json, so it would in the end look something like this

./package.json

we want to build our app with webpack, using our dev config, output should be coloured, provide us with detailed information, show us progress and rerun on changes

Now we are ready to build!

yarn dev

it will create dist directory and put our index.html and built js modules

Let’s open our ./dist/index.html, result should look like this

Congratulations! We had built our first client-side part!

Its time to manage our server-side

Let’s add packages for our server

yarn add -D nodemon
yarn add koa koa-static koa-mount

Now let’s create server/index.js file

We’ll need nodemon for server restarting on changes (it is really useful for development)
And koa for some server staff

./index.js

(I’ll skip imports)

We tell our koa app to serve files from our dist directory (in which webpack builds to) for /dist/ path in url

And in case there is no /dist/ in path, or file was not found by default we return index.html file

Then we tell our app to listen either to port, provided from environment (for example from command line) either to port 3000

Тow let’s tweak our package.json scripts a little

./package.json

first of all we’ve added “dev:server”: “nodemon -w server server/index.js” to start our server side and restart only on file changes from server folder
also we pass NODE_ENV=development because some libraries||frameworks may look for it, when they decide is it dev mode or not

if you want even more debugging, you can add env variable DEBUG=*

and we also renamed our dev script to dev:build

now let’s run our server script!

yarn run dev:server

(I assume you have already built modules)

now let’s open in browser localhost:3000 (if you had not changed your port) and we should see similar “Hello world” message

Congratulations! Now you have client side AND server side ready

Please feel free to leave comments here or at github!