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
andyarn
) - 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.local
# 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.local: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.
Subscribe to Nanobox
Get the latest posts delivered right to your inbox