Category Archives: Vue.js

Initialising a Lumen/Vue project

Leave a reply

Challenge

I want to create a single-page application in Vue.js that talks to a Laravel Lumen PHP REST API.

This is because I want to use some legacy Laravel packages in the API, and I’m more comfortable with PHP on the server than JS: I’d rather learn Vue.js by itself right now, than take on Node JS/Express JS development at the same time.

I’ve been learning how to use Vue.js itself; and I know how to create Lumen PHP applications. But I haven’t yet set up a workflow that allows me to work on an overall application that, between the server and the browser, uses both, and has the following qualities:

  • Allows me to use MySQL/Redis as data store servers
  • Uses a system like Webpack or Browserify to bundle assets related to Vue.js, and allow ES2015 language features
  • Watches public web directories and automatically bundles assets in response to changes in those directories

Attempt 1 – Gameplan

  1. Use Laravel Homestead to set up a virtual machine.
  2. VM needs to host two subdomains from separate directories: http://www.example.dev and api.example.dev
  3. Enable HTTPS for both subdomains
  4. Install Lumen in api.example.dev, and create a test API endpoint that will return some JSON
  5. Create a test http://www.example.dev/index.html, and verify that it’s being served OK
  6. Install Vue.js + NPM infrastructure so I can develop a Vue SPA, with asset files bundled automatically when code changes… but without NPM spinning up a localhost server

Attempt 1 – How it went

  • First impressions are, it’s fairly straightforward
  • I updated my versions of VirtualBox and Vagrant
  • I installed a homestead box in my Users directory
  • Did some very basic configuration to the Homestead.yaml file, to configure Nginx
  • Nginx is happy to serve 2 applications, one for each subdomain
  • Nginx seems to offer a snakeoil-style SSL certificate, so although Chrome complains, I can serve content over SSL by default
  • It was easy – familiar because I’ve used Laravel and Slim PHP application frameworks – to set up an API endpoint that serves some test JSON

Attempt 1 – Webpack

I had some Vue.js tutorial projects that use webpack for bundling project assets into a build.js file, and – I think – to run a Node/Express webserver to serve up the resulting content. Webpack was configured to bundle project assets whenever they changed. In the past I’d run all this by typing

 npm run dev

…into a command prompt.

What I want to achieve, though, is to have webpack watch for changes to my code and compile a build.js for me… but I don’t want the Node/Express mini-server to serve the content for me.

I wasn’t sure whether I could get this going easily. Here’s what I did:

  • Copied one of my tutorial Vue apps (the whole folder structure) into the public webfolder of the relevant Homestead app (the directory from which Homestead will serve http://www.example.dev) – so VirtualBox/Vagrant/Homestead would serve the content. At this point, the Vue app does not work, because /src/build.js is not being compiled
  • In my local file system –  IE on my Mac, not the Vagrant VM – I installed webpack globally:
npm install -g webpack
webpack --watch
  • When I navigated to http://www.example.dev, or refreshed my browser window, the Vue.js application was working OK: webpack must have created a build.js file.
  • Changed some code in a Vue file – IE made a code change that would only be visible in the browser if webpack recompiled the build.js file
  • Refreshed my browser window… and the Vue.js project looked OK.

Webpack & Vue.js project

So now, I know that I can call webpack and tell it to bundle project assets when assets are changed, using the CLI command webpack –watch.

But the tutorial I’d been following used the command npm run dev. I wanted to know the relationship between the two commands.

The answer is in the application’s package.json file – the file which defines application options and dependencies for NPM. The file contains the lines

...
"scripts": {
 "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
 "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
 },
...

I think, when I type npm run dev, it’s running the script defined in scripts.dev.

I tested this by (backing up package.json and) overwriting scripts.dev with

cross-env NODE_ENV=development webpack --watch

And now, I can call node.run dev at the command line, and my application is served, webpack watching the public web directory as expected.