Using javascript in Phoenix (1.3, umbrella project)

I have an umbrella app that started out as a json server only (no brunch). Yesterday I added some html routes (with the help of the awesome members of this forum – thankyou!).

I need to add some javascript to some of the templates and have tried to follow the advice given in this post. However, per the console, the js is not being loaded. Below is my setup (controller, template). Regarding the template, I checked the path to the js file:

$ pwd
/Users/carlson/dev/apps/koko/apps/koko_web/priv
 $ ls -lh js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js
-rw-r--r--  1 carlson  staff   1.6M Jun 20 13:26 js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js

controller

defmodule Koko.Web.PrintController do
  use Koko.Web, :controller
  alias Koko.Repo
  alias Koko.DocManager.Document

  plug :put_layout, false

  def show(conn, %{"id" => id}) do
    document = Repo.get(Document, id)
    qs = conn.query_string
    case qs do
      "text=plain" ->
        conn |> render("plain.html", document: document)
      "text=adoc" ->
        conn |> render("asciidoc.html", document: document)
      "text=latex" ->
        conn |> render("latex.html", document: document)
      _ ->
        conn |> render("plain.html", document: document)
    end
  end
end

template


<!DOCTYPE html>
<html>
  <head>
   ...
  </head>
  <body>

    <script src="/js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js"></script>

    <div id="asciidoc">
       <%= @document.rendered_content %>
    </div>

  </body>
</html>

/js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js

What happens when you access this directly in your browser?

If what you mean is GET

http://localhost:4000/js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js

by putting the above in the URL box of the broswer, then the result is

no route found for GET /js/asciidoctor.js/asciidoctor.js/dist/asciidoctor.js (Koko.Web.Router)

which is expected, since my routes begin with document or print . Did you have something else in mind that I should do?

If it is expected that you cannot access the file, why are you trying to access it?

In all seriousness though, you should be able to access your assets that way. In your MyApp.Endpoint, you should have something that looks like this

  # Serve at "/" the static files from "priv/static" directory.
  #
  # You should set gzip to true if you are running phoenix.digest
  # when deploying your static files in production.
  plug Plug.Static,
    at: "/", from: :my_app, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)

This checks to see if there are any assets at the route that you asked for before actually checking your router.

@Ankhers This helps a lot, but there is something weird going on. One mistake I was making is that I did not have my files in priv/static. I also found that js files have to be in a subfolder priv/static/js. I verified this with a one-line test file which prints a message to the console.

I also have the asciidoctor.js doing what it is supposed to.

Thank you so much for your help!