Phoenix and Vue.js Up and Running in Minutes

Phoenix is an incredibly fast and flexible web framework built in Elixir. Vue.js is a slick front-end javascript framework designed strictly to handle your app's view layer. Together, they're all sorts of awesome.

In this article, I'm going to walk through setting up a bare-bones Phoenix/Vue.js app with nothing installed other than Nanobox. If you don't have it installed, go ahead and create a free Nanobox account and dowload the Nanobox installer.

Setup a New Project

Create a new project directory and cd into it.

mkdir phoenix-vue && cd phoenix-vue  

Nanobox uses the boxfile.yml to build and configure your app's runtime both locally and in production. For Phoenix and Vue, you'll need both Elixir and Node.js available. Add a boxfile.yml to the root of your project with the following:

boxfile.yml

run.config:  
  engine: elixir
  extra_packages:
    - nodejs
  dev_packages:
    - inotify-tools
  cache_dirs:
    - node_modules
  extra_path_dirs:
    - node_modules/.bin
  fs_watch: true

data.db:  
  image: nanobox/postgresql:9.5

web.site:  
  start: mix phoenix.server

This boxfile.yml will do the following:

• Provide an Elixir runtime (including mix)
• Install Node.js (including npm and yarn)
• Include inotify-tools for local development
• Cache NPM packages
• Include NPM-loaded binaries in the system $PATH
• Enable file-system watching
• Provide a Postgres database
• Provide a public webserver when deployed to production.

Start the Dev Environment

With the boxfile.yml in place, you're ready to fire up your dev environment. Before that, I recommend adding a DNS alias just to make it easier to access the running app from the browser.

# add a convenient way to access the app from the browser
nanobox dns add local phoenix-vue.dev

# start the dev environment
nanobox run  

Install Phoenix

From the Nanobox console, you have everything you need to install Phoenix.

# download Phoenix
mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

# cd into a temporary directory
cd /tmp

# generate the phoenix app (You can use your own app name)
# Select 'Y' when prompted to fetch dependencies
mix phoenix.new app

# cd back into the /app dir
cd -

# set the shell option to inlcude hidden files
# copy the generated app into the project root
shopt -s dotglob  
cp -a /tmp/app/* .  

Install Vue.js

Use npm to install Vue.js in the project.

npm install --save vue  

Update the Brunch Config

Brunch is a lean build tool that comes packaged with Phoenix and is used to compile the front-end assets. Update the brunch-config.js in the root of your project to whitelist Vue and include it in your front-end assets as well as configure Vue to use the standalone build that includes the Vue compiler. You're welcome to use the runtime-only (used by default) version, but you'll need to build in a render function.

npm: {  
  enabled: true,
  whitelist: ["phoenix", "phoenix_html", "vue"],
  globals: {
    Vue: "vue/dist/vue.common.js"
  },
}

Run a brunch build to apply the updated settings:

brunch build  

Update Templates & App JS

For just a bare-bones "Hello World" example, open up web/templates/page/index.html.eex and replace the entire contents of the file content with:

<div id="hello-world">  
  {{message}}
</div>  

Add the following to the bottom of your web/static/js/app.js file:

new Vue({  
  el: "#hello-world",
  data: {
    message: "Hello World"
  }
});

Note: With Vue set as a global, you don't have to import it into your js files.

Configure the Database Connection

To keep your database connection secure and portable across environments, update the connection config to use environment variables. Nanobox automatically generates environment variables for required connection credentials. Update the database config in config/dev.exs, config/test.exs, and config/prod.secret.exs with the following (be sure to replace the appname).

config :app, App.Repo,  
  adapter: Ecto.Adapters.Postgres,
  username: System.get_env("DATA_DB_USER"),
  password: System.get_env("DATA_DB_PASS"),
  hostname: System.get_env("DATA_DB_HOST"),
  database: "gonano",
  pool_size: 10

Configure HTTP for Production

In order for the app to function properly when deployed to a live app with Nanobox, you'll need to update the HTTP config to listen on port 8080 and set your app's url. In config/prod.exs, update the following:

config :app, App.Endpoint,  
  http: [port: 8080],
  url: [host: "appname.nanoapp.io", port: 80],
  cache_static_manifest: "priv/static/manifest.json"

Start Phoenix

From the root of your project inside the Nanobox console, start Phoenix.

mix phoenix.server  

Once everything compiles, you'll be able to access the site at phoenix-vue.dev:4000. Open that up in a browser and you'll see the Phoenix banner with a Vue-generated "Hello World."

With this foundation, you're ready to start building out an awesome Phoenix/Vue.js app.

Special thanks to Brandon Richey and his article on using Phoenix and Vue.js together. It gave me the starting point for this article.