- Elixir

Realtime chat with Vue.js and Phoenix

2016-01-03T00:00:00+00:00

Vue.js is a javascript framework for "Reactive Components for Modern Web Interfaces". Vue.js allows for you to make small components on your page as well as full-blown single page applications. </p> </span>

Sometimes all I want is a component or two on a page rather than investing the website's whole infrastructure in a Javascript framework and this is why I enjoy using Vue.js.</p>

This quick tutorial uses the backend of the Phoenix channel tutorial located on the official website</a> and gives an alternative for the front end code built with Vue.js to illustrate how easy it is to use these two technologies together.</p>

I won't be explaining the backend code as I would be parroting what's on the Phoenix documentation. Please read the above link for a full understanding. You can copy the code snippets below before we move on to integrating Vue.js</p>

Versions</h2>

Elixir 1.1 Phoenix 1.1 Vue.js 1.0.13</p>

Channel Code</h2>

Run mix phoenix.new chat</code> to set up the new application.</p>

// web/channels/user_socket.ex
</span>defmodule </span>Chat</span>.</span>UserSocket </span>do
</span>  </span>use </span>Phoenix</span>.</span>Socket
</span>
</span>  ## Channels
</span>  channel "</span>rooms:lobby</span>", </span>Chat</span>.</span>RoomChannel
</span>
</span>  transport </span>:websocket</span>, </span>Phoenix</span>.</span>Transports</span>.</span>WebSocket
</span> 
</span>  </span>def </span>connect</span>(_params, socket) </span>do
</span>    {</span>:ok</span>, socket}
</span>  </span>end
</span>
</span>  </span>def </span>id</span>(_socket), </span>do: nil
</span>end
</span></code></pre>
//web/channels/room_channel.ex
</span>defmodule </span>Chat</span>.</span>RoomChannel </span>do
</span>  </span>use </span>Chat</span>.</span>Web</span>, </span>:channel
</span>
</span>  </span>def </span>join</span>("</span>rooms:lobby</span>", payload, socket) </span>do
</span>    {</span>:ok</span>, socket}
</span>  </span>end
</span>
</span>  </span>def </span>join</span>("</span>rooms:</span>" <> _private_room_id, _params, _socket) </span>do
</span>    {</span>:error</span>, %{</span>reason: </span>"</span>Unauthorized</span>"}}
</span>  </span>end
</span>
</span>  </span>def </span>handle_in</span>("</span>new_msg</span>", %{"</span>body</span>" => body}, socket) </span>do
</span>    broadcast! socket, "</span>new_msg</span>", %{</span>body:</span> body}
</span>    {</span>:noreply</span>, socket}
</span>  </span>end
</span>
</span>  </span>def </span>handle_out</span>("</span>new_msg</span>", payload, socket) </span>do
</span>    push socket, "</span>new_msg</span>", payload
</span>    {</span>:noreply</span>, socket}
</span>  </span>end
</span>end
</span></code></pre>
The router and page controller, view and template should all be generated automatically when the app was made.</p>
Integrating Vue.js</h2>
First up, let's get Vue.js set up with Phoenix. There are few ways to do this. Here are a couple of options to get you started.</p>

Copy a CDN link into web/templates/layout/app.html.ex</code>.</li>
</ol>
The javascript can be included like so</p>
<</span>script </span>src</span>="</span>http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js</span>"></</span>script</span>>
</span><</span>script </span>src</span>="</span><%= static_path(@conn, </span>"/</span>js</span>/</span>app.js</span>"</span>) %</span>>"</span>></span></</span>script</span>>
</span></code></pre>

Place Vue.js in your web/static/vendor/ directory</li>
</ol>
Brunch is set up to include any code in the vendor directory on compilation so it will be available with the other scripts.</p>
You can download Vue.js from the website manually, or use NPM and copy it.</p>
npm</span> install vue</span> --save-dev
</span></code></pre>
cp</span> node_modules/vue/dist/vue.js web/static/vendor/vue.js
</span></code></pre>
Now running brunch build</code> or mix phoenix.server</code> will compile Vue.js with your Javascript.</p>
Setting up the HTML</h2>
Edit your web/templates/page/index.html.ex</code> like so</p>
<div id="</span>app</span>">
</span>  <ul>
</span>    <li v-</span>for</span>="</span>message in messages</span>">
</span>      [{{ message.at }}] {{ message.body }}
</span>    </li>
</span>  </ul>
</span>  <input type-"</span>text</span>" v-model="</span>newMessage</span>" v-</span>on:</span>keyup.</span>13</span>="</span>sendNewMessage</span>">
</span></div>
</span></code></pre>
The div with the ID "app" will be used by Vue.js, any code inside here is going to be available.</p>
There's a v-for="message in messages"</code> on line 3 which will loop through an array of objects.</p>
Line 4 will output the chat messages and the time they were added.</p>
Line 7 is an input box, bound to Vue.js by v-model="newMessage"</code> and will trigger a sendNewMessage</code> method when the Enter key (13) is pressed.</p>
Booting up the Phoenix server with mix phoenix.server</code> will show a bunch of curly brackets as we haven't initialized the Vue.js Javascript yet.</p>
</p>
Javascript</h2>
Now in web/static/js/app.js</code> uncomment the socket import.</p>
In web/static/js/socket.js add this code</p>
import </span>{</span>Socket</span>} </span>from </span>"</span>deps/phoenix/web/static/js/phoenix</span>"
</span>
</span>let </span>socket </span>= new Socket("</span>/socket</span>", {params: {token: window.</span>userToken</span>}})
</span>
</span>socket</span>.</span>connect</span>()
</span>
</span>let </span>app </span>= new Vue({
</span>  el: '</span>#app</span>',
</span>  </span>ready</span>() {
</span>    </span>this</span>.</span>channel </span>= </span>socket</span>.</span>channel</span>("</span>rooms:lobby</span>", {});
</span>    </span>this</span>.</span>channel</span>.</span>on</span>("</span>new_msg</span>", </span>payload </span>=> </span>{
</span>      </span>payload</span>.</span>at </span>= </span>Date</span>();
</span>      </span>this</span>.</span>messages</span>.</span>push</span>(</span>payload</span>);
</span>    });
</span>    </span>this</span>.</span>channel</span>.</span>join</span>()
</span>      .</span>receive</span>("</span>ok</span>", </span>resp </span>=> </span>{ </span>console</span>.</span>log</span>("</span>Joined successfully</span>", </span>resp</span>) })
</span>      .</span>receive</span>("</span>error</span>", </span>resp </span>=> </span>{ </span>console</span>.</span>log</span>("</span>Unable to join</span>", </span>resp</span>) })
</span>  },
</span>  data: {
</span>    messages: [],
</span>    newMessage: '',
</span>    channel: </span>null</span>,
</span>  },
</span>  computed: {
</span>  
</span>  },
</span>  methods: {
</span>    </span>sendNewMessage</span>() {
</span>      </span>this</span>.</span>channel</span>.</span>push</span>("</span>new_msg</span>", {body: </span>this</span>.</span>newMessage</span>});
</span>      </span>this</span>.</span>newMessage </span>= '';
</span>    }
</span>  }
</span>});
</span>
</span>export default </span>socket
</span></code></pre>
The import socket, socket.connect() is unchanged. The Vue.js class uses el to know which HTML to use. The ready</code> method is a lifecycle hook which is called after Vue has finished compilation (There's a nice diagram here of all the lifecycle hooks http://vuejs.org/guide/instance.html#Lifecycle_Diagram).</p>
We have set the channel to an instance variable in the ready</code> method.  So we can call it in various places throughout the code. This will be useful shortly when we need to push an event to the server.</p>
The ready method is also where we join the rooms:lobby</code> and subscribe to the new_msg</code> event from Phoenix. When this event is sent from the server we append the new message to our messages</code> instance variable which then automatically shows in the HTML we wrote previously (the v-for</code> loop).</p>
There's a methods</code> object where we put the sendNewMessage</code> method which is triggered from the newMessage</code> input we wrote earlier. This method pushes the message to Phoenix, ready to be published across all connections. It then sets newMessage</code> to '' so the user can begin typing a fresh message.</p>
At this point if you reload the page the curly brackets should disappear. When you enter a new message it should appear in the list!</p>
</p>
That's all there is to it! Try opening multiple windows and messaging between each to see it in action.</p>
Bonus points</h2>
Add Moment.js for a simpler date format</p>
payload</span>.</span>at </span>= </span>moment</span>().</span>format</span>('</span>YYYY-MM-DD HH:mm:ss</span>');
</span></code></pre>
Style with CSS!</p>
<!-- </span>web</span>/</span>templates</span>/</span>page</span>/</span>index</span>.</span>html</span>.</span>ex </span>-->
</span><</span>span class</span>="</span>brackets</span>">[</</span>span</span>><span class="</span>time</span>">{{ message.</span>at </span>}}</</span>span</span>><span class="</span>brackets</span>">]</</span>span</span>> {{ message.</span>body </span>}}
</span></code></pre>
#app </span>ul </span>{
</span>  list-style-type: none;
</span>  padding: </span>0</span>;
</span>}
</span>
</span>#app </span>li </span>{
</span>  padding: </span>5px 0</span>;
</span>}
</span>
</span>.</span>brackets </span>{
</span>  color: </span>#ccc</span>;
</span>}
</span>
</span>.</span>time </span>{
</span>  color: </span>#999</span>;
</span>  font-style:italic;
</span>}
</span>
</span>input </span>{
</span>  width: </span>100%</span>;
</span>}
</span></code></pre>
</p>
There's a lot more you can do with both Phoenix and Vue.js and I may look at writing some more articles in the future. For now we have a Vue.js frontend which works with the Phoenix channel tutorial backend.</p>


Handling slug URLs in Ember and Phoenix
2015-11-02T00:00:00+00:00
I've recently started playing around with the PEEP stack (Postgres Elixir Ember Phoenix). One of the first things I wanted achieve is using SEO-friendly slugs instead of ids in Ember application's URLs.</p>
</span>
This article presumes you know how to set up a fresh Ember project and a fresh Phoenix application as we will be diving head first into the code. </p>
Version info:</h3>
These are the tools I'm using for this application.</p>

Node 4.2.1</li>
Ember 1.13.8 / 2.0.2</li>
Elixir 1.0.5</li>
Phoenix 1.0.3</li>
PostgreSQL 9.4.5</li>
</ul>
Notes</h3>
There is no special configuration required for each to work together. Although, I recommend launching Ember with the proxy argument as shown below.</p>
ember</span> serve</span> --proxy</span>=http://localhost:4000
</span></code></pre>
This means you don't have to worry about Content Security Policy between Ember and your API.</p>
If you haven't already, check out Maxwell Holder's Build a Blog with Phoenix and Ember.js</a>. This article really helped me get started with using Ember and Phoenix together.</p>
I'll be demonstrating how to set up 2 pages: a page with a list of products and a page for individual products which have a slug instead of an ID. This includes querying the slug on the API as well.</p>
Show me the code!</h2>
The code is available on Github</a>.</p>
Now on to the tutorial!</p>
Setting up Phoenix</h2>
First run mix ecto.create</code> to make sure the database is set up correctly.</p>
Phoenix provders a really useful generator for APIs. Run the following command to get the cruft of the work done for you.</p>
mix</span> phoenix.gen.json Product products name:string slug:string blurb:text preview:string featured:boolean
</span></code></pre>
The above command generates the view, controller, migration and model files. </p>
The fields include a name, a slug, a blurb for a short product description, preview which will be a link to an image and featured which is a boolean which states if the product is featured or not.</p>
To make this accessible we need to add resource to the router.</p>
# web/router.ex
</span>scope "</span>/api</span>", </span>Api </span>do 
</span>  pipe_through </span>:api
</span>  resources "</span>/products</span>", </span>ProductController</span>, </span>only: </span>[</span>:index</span>, </span>:show</span>]
</span>end
</span></code></pre>
Git Commit</a></p>
We've added the API pipeline which we will be modifying shortly. For now, migrate the database in the terminal</p>
mix</span> ecto.migrate
</span></code></pre>
As of now the API works, however, it needs a couple of tweeks to be compatible with Ember and to support slugs.</p>
Ember compatible API</h3>
Phoenix wraps JSON objects and collections with the "data" attribute but Ember (currently in 2.1 and below) uses the model's singular name for objects and plural name for collections.</p>
// Phoenix currently
</span>{"</span>data</span>":[]}
</span></code></pre>
// What Ember wants
</span>{"</span>products</span>":[]} </span>// Collection
</span>{"</span>product</span>":[]} </span>// Single Objects
</span></code></pre>
Phoenix makes this really easy to change.</p>
In product_view.ex</code> change data</code> in both the index</code> and show</code> render</code> methods.</p>
The render</code> method which pattern matches index.json</code> should change data</code> to products</code> and the render</code> method which pattern matches show.json</code> should change data</code> to product</code>.</p>
# web/views/product_view.ex
</span>defmodule </span>Api</span>.</span>ProductView </span>do
</span>  </span>use </span>Api</span>.</span>Web</span>, </span>:view
</span>
</span>  </span>def </span>render</span>("</span>index.json</span>", %{</span>products:</span> products}) </span>do
</span>    %{</span>products:</span> render_many(products, </span>Api</span>.</span>ProductView</span>, "</span>product.json</span>")}
</span>  </span>end
</span>
</span>  </span>def </span>render</span>("</span>show.json</span>", %{</span>product:</span> product}) </span>do
</span>    %{</span>product:</span> render_one(product, </span>Api</span>.</span>ProductView</span>, "</span>product.json</span>")}
</span>  </span>end
</span>
</span>  </span>def </span>render</span>("</span>product.json</span>", %{</span>product:</span> product}) </span>do
</span>    %{</span>id:</span> product.id,
</span>      </span>name:</span> product.name,
</span>      </span>slug:</span> product.slug,
</span>      </span>blurb:</span> product.blurb,
</span>      </span>preview:</span> product.preview,
</span>      </span>featured:</span> product.featured,
</span>  </span>end
</span>end
</span></code></pre>
Git commit</a></p>
Just add slugs</h3>
To search for slug</code> instead of the id</code> primary key, we need to replace the Repo.get</code> with a query that uses Repo.one</code> or Repo.one!</code> in the product controller - using the exclamation marked version will throw an error if nothing is found. I recommend this route as you can configure Ember to redirect elsewhere in this situation.</p>
def </span>show</span>(conn, %{"</span>id</span>" => slug}) </span>do
</span>  query = from p in </span>Product</span>,
</span>    </span>where:</span> p.slug == ^</span>slug</span>,
</span>    </span>select:</span> p
</span>  product = </span>Repo</span>.one!(query)
</span>  render(conn, "</span>show.json</span>", </span>product:</span> product)
</span>end
</span></code></pre>
Git commit</a></p>
On line 1 id</code> has been altered to say slug</code>, this is just so we're clear that we're dealing with a slug. The map key is still id</code>, though, as the product resource route added previously is set up to pattern match for id</code>. To change it to slug</code> requires adding a separate route.</p>
Lines 2 to 4 is the query to find the slug in the database.</p>
Line 5 uses Repo.one!</code> to fetch the first match for the query or throw an error.</p>
CORS in production</h3>
Although using ember serve --proxy will solve this issue in development, it's worth adding Corsica</a> for production environments.</p>
After following the installation instructions modify the API pipeline in the router:</p>
  pipeline </span>:api </span>do
</span>    plug </span>:accepts</span>, ["</span>json</span>"]
</span>    plug </span>Corsica</span>, </span>origins: </span>["</span>localhost:4200</span>", "</span>example.com</span>"]
</span>  </span>end
</span></code></pre>
Git commit</a></p>
This will modify response headers to show which sources can load the API.</p>
Make sure that you restart your Phoenix server after installing Corsica.</p>
mix</span> phoenix.server
</span></code></pre>
Before you continue to the Ember section make sure you have some data in the database! For this example I've used a lorem ipsum generator and Fill Murray</a> for the preview column.</p>
Ember</h2>
Let's use Twitter Bootstrap to make the application look presentable.</p>
ember</span> install ember-bootstrap
</span></code></pre>
Note that because I have named my app "App" I have had to rename my app.css</code> to style.css</code>.</p>
Modify the application template to use the bootstrap grid</p>
{{!-- app/templates/application.hbs --}}
</span><</span>div </span>class=</span>"</span>container</span>">
</span>  <</span>div </span>class=</span>"</span>row</span>">
</span>    <</span>div </span>class=</span>"</span>col-xs-12</span>">
</span>      <</span>h1 </span>id</span>="</span>title</span>">Ember Phoenix Slugs</</span>h1</span>>
</span>    </</span>div</span>>
</span>  </</span>div</span>>
</span>  <</span>div </span>class=</span>"</span>row</span>">
</span>    <</span>div </span>class=</span>"</span>col-xs-12</span>">
</span>      {{</span>outlet</span>}}
</span>    </</span>div</span>>
</span>  </</span>div</span>>
</span></</span>div</span>>
</span></code></pre>
Git commit</a></p>
Make sure you restart the Ember server after installing the addon.</p>
ember</span> serve</span> --proxy</span>=http://localhost:4000
</span></code></pre>
Before we can hook up Ember to the API, we need to generate the application adapter to add the 'api' namespace that we've set up in Phoenix.</p>
ember</span> g adapter application
</span></code></pre>
Open up the newly created adapter file and add the namespace property.</p>
// app/adapters/application.js
</span>import </span>DS </span>from </span>'</span>ember-data</span>';
</span>
</span>export default </span>DS</span>.</span>RESTAdapter</span>.</span>extend</span>({
</span>  namespace: '</span>api</span>'
</span>});
</span></code></pre>
Git commit</a></p>
Now we can set up the model we'll use to connect to the API</p>
ember</span> g model product
</span></code></pre>
// app/models/product.js
</span>import </span>DS </span>from </span>'</span>ember-data</span>';
</span>
</span>export default </span>DS</span>.</span>Model</span>.</span>extend</span>({
</span>  name: </span>DS</span>.</span>attr</span>(),
</span>  slug: </span>DS</span>.</span>attr</span>(),
</span>  blurb: </span>DS</span>.</span>attr</span>(),
</span>  preview: </span>DS</span>.</span>attr</span>(),
</span>});
</span></code></pre>
Generate the index route to connect to the product model.</p>
ember</span> g route index
</span></code></pre>
// app/routes/index.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>
</span>export default </span>Ember</span>.</span>Route</span>.</span>extend</span>({
</span>  </span>model</span>: </span>function</span>() {
</span>    </span>return </span>this</span>.</span>store</span>.</span>findAll</span>('</span>product</span>');
</span>  }
</span>});
</span></code></pre>
Here is the template for the index. It loops through all the products and links to them in the image and headings.</p>
{{!-- app/templates/index.hbs --}} 
</span><</span>h2</span>>Products</</span>h2</span>>
</span><</span>div </span>class=</span>"</span>row</span>">
</span>  {{#each </span>model </span>as |</span>product</span>|}}
</span>    <</span>div </span>class=</span>"</span>col-xs-3</span>">
</span>      {{#link-to '</span>product</span>' </span>product</span>}}
</span>        <</span>img </span>src=</span>{{</span>product.preview</span>}} </span>class=</span>"</span>product--image</span>">
</span>        <</span>h3</span>>{{</span>product.name</span>}}</</span>h3</span>>
</span>      {{/link-to}}
</span>      <</span>p</span>>{{</span>product.blurb</span>}}</</span>p</span>>
</span>    </</span>div</span>>
</span>  {{/each}}
</span></</span>div</span>>
</span></code></pre>
Git commit</a></p>
Note that if you're using Ember 2 or onwards you can remove the curly brackets around the image source value.</p>
Next we need to generate the product route.</p>
Product page</h3>
As of now Ember will throw an error due to using a product route which doesn't exist yet. Let's fix that.</p>
ember</span> g route product
</span></code></pre>
// app/routes/product.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>
</span>export default </span>Ember</span>.</span>Route</span>.</span>extend</span>({
</span>  </span>model</span>: </span>function</span>(</span>params</span>) {
</span>    </span>this</span>.</span>set</span>('</span>product</span>', </span>this</span>.</span>modelFor</span>('</span>product</span>'));
</span>    </span>return </span>this</span>.</span>store</span>.</span>find</span>('</span>product</span>', </span>params</span>.</span>product_slug</span>);
</span>  },
</span>  </span>serialize</span>: </span>function</span>(</span>model</span>, </span>params</span>) {
</span>    </span>return </span>{ product_slug: </span>model</span>.</span>get</span>('</span>slug</span>') };
</span>  }
</span>});
</span></code></pre>
On line 6 we try to find the product by the product_slug</code>.</p>
The serialize</code> method needs to be implemented when an attribute other than id</code> is used for the primary key. We are telling the Ember that when a product object is passed through the link-to</code> method to use the slug</code> instead. product_slug</code> will match in the route we are creating below (On line 10):</p>
// app/router.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>import </span>config </span>from </span>'</span>./config/environment</span>';
</span>
</span>var </span>Router </span>= </span>Ember</span>.</span>Router</span>.</span>extend</span>({
</span>  location: </span>config</span>.</span>locationType
</span>});
</span>
</span>Router</span>.</span>map</span>(</span>function</span>() {
</span>  </span>this</span>.</span>route</span>('</span>product</span>', {path: '</span>/products/:product_slug</span>'});
</span>});
</span>export default </span>Router</span>;
</span></code></pre>
The template:</p>
{{!-- app/templates/index.hbs --}} 
</span><</span>h2</span>>{{</span>model.name</span>}}</</span>h2</span>>
</span><</span>img </span>src=</span>{{</span>model.preview</span>}} </span>class=</span>"</span>product--image</span>">
</span><</span>h3</span>>{{</span>model.name</span>}}</</span>h3</span>>
</span><</span>p</span>>{{</span>model.blurb</span>}}</</span>p</span>>
</span>{{</span>link-to </span>'</span>Back</span>' '</span>index</span>' </span>class</span>=</span>"</span>btn btn-default</span>"}}
</span></code></pre>
Git commit</a></p>
Error page</h3>
If the slug can't be found then Phoenix will return a 404 error. The easiest way to handle this in Ember is create a product-error</code> template which Ember will show automatically.</p>
{{!-- app/templates/product-error.hbs --}} 
</span><</span>h2</span>>Whoops</</span>h2</span>>
</span><</span>p</span>>This page could not be found.</</span>p</span>>
</span>{{</span>link-to </span>'</span>Back</span>' '</span>index</span>' </span>class</span>=</span>"</span>btn btn-default</span>"}}
</span></code></pre>
Git commit</a></p>
Setting slug as the primary key</h1>
Right now the application works, however, while refreshing an individual product page if you Ember tries to find a product with an id</code> of slug</code>, then a slug</code> of slug</code>. This results in two separate objects rather than one.</p>
This sounds rather confusing and is best illustrated through Ember inspector:</p>
</p>
To get around this we can change the product model primary key to slug by generating a product serializer and updating the primaryKey</code> property.</p>
ember</span> g serializer product
</span></code></pre>
// app/serializers/product.js
</span>import </span>DS </span>from </span>'</span>ember-data</span>';
</span>
</span>export default </span>DS</span>.</span>RESTSerializer</span>.</span>extend</span>({
</span>  primaryKey: '</span>slug</span>'
</span>});
</span></code></pre>
By doing this the slug attribute on each product object gets moved to the id field and leaves slug as undefined. We will need to update the product route to reflect this change.</p>
// app/routes/product.js
</span>import </span>Ember </span>from </span>'</span>ember</span>';
</span>
</span>export default </span>Ember</span>.</span>Route</span>.</span>extend</span>({
</span>  </span>model</span>: </span>function</span>(</span>params</span>) {
</span>    </span>this</span>.</span>set</span>('</span>product</span>', </span>this</span>.</span>modelFor</span>('</span>product</span>'));
</span>    </span>return </span>this</span>.</span>store</span>.</span>find</span>('</span>product</span>', </span>params</span>.</span>product_slug</span>);
</span>  },
</span>  </span>serialize</span>: </span>function</span>(</span>model</span>, </span>params</span>) {
</span>    </span>return </span>{ product_slug: </span>model</span>.</span>get</span>('</span>id</span>') };
</span>  }
</span>});
</span></code></pre>
Git commit</a></p>
Notice now on line 10 how model.get()</code> is looking for id rather than slug</code>.</p>
Alternatively, we could remove the serialize</code> method and update the router.js</code> to look for :id</code> rather than :product_slug</code>.</p>
Preview</h2>
</p>
</p>
</p>
Summary</h2>
In this tutorial we have gone through how to set up index</code> and show</code> methods in a Phoenix application to work with URL slugs.</p>
We have connected this API to an Ember application which can view product listings and link to individual product pages.</p>

- Elixir

Realtime chat with Vue.js and Phoenix

Handling slug URLs in Ember and Phoenix

Summary</h2> In this tutorial we have gone through how to set up index</code> and show</code> methods in a Phoenix application to work with URL slugs.</p> We have connected this API to an Ember application which can view product listings and link to individual product pages.</p>

Summary</h2>
In this tutorial we have gone through how to set up `index</code> and show</code> methods in a Phoenix application to work with URL slugs.</p>`
`We have connected this API to an Ember application which can view product listings and link to individual product pages.</p>`