chrismcg/Brocfile.js

## backend.js
import {Socket} from "phoenix";

export function initialize(/* container, application */) {
  let socket = new Socket("ws://localhost:4000/ws");
  socket.connect();
  let chan = socket.chan("rooms:lobby", {});
  chan.join().receive("ok", chan => {
    console.log("Welcome to Phoenix Chat!");
  });
}

export default {
  name: 'backend',
  initialize: initialize
};

## Brocfile.js
/* global require, module */

var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var ES6Modules = require('broccoli-es6modules');
var esTranspiler = require('broccoli-babel-transpiler');
var mergeTrees = require('broccoli-merge-trees');

var app = new EmberApp();

// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.

var phoenixTree = "./vendor/phoenix";
var phoenixAmdFiles = new ES6Modules(phoenixTree, {
  format: 'amd',
    esperantoOptions: {
      strict: true,
      amdName: "phoenix"
    }
});
var phoenixTranspiledFiles = esTranspiler(phoenixAmdFiles, {});

module.exports = mergeTrees([app.toTree(), phoenixTranspiledFiles]);

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Frontend</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    {{content-for 'head'}}

    <link rel="stylesheet" href="assets/vendor.css">
    <link rel="stylesheet" href="assets/frontend.css">

    {{content-for 'head-footer'}}
  </head>
  <body>
    {{content-for 'body'}}

    <script src="assets/vendor.js"></script>
    <script src="phoenix.js"></script>
    <script src="assets/frontend.js"></script>

    {{content-for 'body-footer'}}
  </body>
</html>

## router.ex
defmodule Backend.Router do
  use Backend.Web, :router

  pipeline :browser do
    plug :accepts, ["html"]
    plug :fetch_session
    plug :fetch_flash
    plug :protect_from_forgery
  end

  pipeline :api do
    plug :accepts, ["json"]
  end

  scope "/", Backend do
    pipe_through :browser # Use the default browser stack

    get "/", PageController, :index
  end

  socket "/ws", Backend do
    channel "rooms:lobby", RoomChannel
  end

  # Other scopes may use custom stacks.
  # scope "/api", Backend do
  #   pipe_through :api
  # end
end
	import {Socket} from "phoenix";

	export function initialize(/* container, application */) {
	let socket = new Socket("ws://localhost:4000/ws");
	socket.connect();
	let chan = socket.chan("rooms:lobby", {});
	chan.join().receive("ok", chan => {
	console.log("Welcome to Phoenix Chat!");
	});
	}

	export default {
	name: 'backend',
	initialize: initialize
	};
	/* global require, module */

	var EmberApp = require('ember-cli/lib/broccoli/ember-app');
	var ES6Modules = require('broccoli-es6modules');
	var esTranspiler = require('broccoli-babel-transpiler');
	var mergeTrees = require('broccoli-merge-trees');

	var app = new EmberApp();

	// Use `app.import` to add additional libraries to the generated
	// output files.
	//
	// If you need to use different assets in different
	// environments, specify an object as the first parameter. That
	// object's keys should be the environment name and the values
	// should be the asset to use in that environment.
	//
	// If the library that you are including contains AMD or ES6
	// modules that you would like to import into your application
	// please specify an object with the list of modules as keys
	// along with the exports of each module as its value.

	var phoenixTree = "./vendor/phoenix";
	var phoenixAmdFiles = new ES6Modules(phoenixTree, {
	format: 'amd',
	esperantoOptions: {
	strict: true,
	amdName: "phoenix"
	}
	});
	var phoenixTranspiledFiles = esTranspiler(phoenixAmdFiles, {});

	module.exports = mergeTrees([app.toTree(), phoenixTranspiledFiles]);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Frontend</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	{{content-for 'head'}}

	<link rel="stylesheet" href="assets/vendor.css">
	<link rel="stylesheet" href="assets/frontend.css">

	{{content-for 'head-footer'}}
	</head>
	<body>
	{{content-for 'body'}}

	<script src="assets/vendor.js"></script>
	<script src="phoenix.js"></script>
	<script src="assets/frontend.js"></script>

	{{content-for 'body-footer'}}
	</body>
	</html>
	defmodule Backend.Router do
	use Backend.Web, :router

	pipeline :browser do
	plug :accepts, ["html"]
	plug :fetch_session
	plug :fetch_flash
	plug :protect_from_forgery
	end

	pipeline :api do
	plug :accepts, ["json"]
	end

	scope "/", Backend do
	pipe_through :browser # Use the default browser stack

	get "/", PageController, :index
	end

	socket "/ws", Backend do
	channel "rooms:lobby", RoomChannel
	end

	# Other scopes may use custom stacks.
	# scope "/api", Backend do
	# pipe_through :api
	# end
	end