Challenge with Serving Static files

Hello guys ,
I have set up some project , but I have som e bit of challenge with serving static files with the plug module

23:03:44.817 [debug] GET /home
 
23:03:44.817 [debug] Sent 200 in 32µs
 
23:03:44.849 [debug] GET /priv/js/test.js
 
*23:03:44.849 [debug] Sent 404 in 24µs*
==============================
Routes :
plug(Plug.Logger, log: :debug)
	plug :match
	plug :dispatch
	plug Plug.Static, at: "/home", from: :server, only: ~w(js css images robots.txt)

	get "/" do
		send_resp(conn, 200, "Hello There!")
	end

	get "/about/:user_name" do
		send_resp(conn, 200, "Hello, #{user_name}")
	end

	get "/home" do
		conn = put_resp_content_type(conn, "text/html")
		send_file(conn, 200, "priv/index.html")
	end

I need some guidance on what , I be doing wrong , your assistance will be much appreciated

You should use the Plug.Static plug before the :match and :dispatch plugs.

1 Like

Hello ,
This is the snippet of the code

defmodule PlugEx.Router do
	use Plug.Router
	use Plug.Debugger
	plug(Plug.Logger, log: :debug)
	plug :match
	plug :dispatch
	plug Plug.Static, at: "/", from: :server, only: ~w(js css images robots.txt)

	get "/" do
		send_resp(conn, 200, "Hello There!")
	end

	get "/about/:user_name" do
		send_resp(conn, 200, "Hello, #{user_name}")
	end

	get "/home" do
		conn = put_resp_content_type(conn, "text/html")
		send_file(conn, 200, "priv/index.html")
	end


	match _, do: send_resp(conn, 404, "404 error not found!")
end

  plug :match
  plug :dispatch
  plug Plug.Static, at: "/", from: :server, only: ~w(js css images robots.txt)

must become

  plug Plug.Static, at: "/", from: :server, only: ~w(js css images robots.txt)  
  plug :match
  plug :dispatch
2 Likes

i have made the changes but still its failing to serve the javascript file

iex(9)> recompile 
Compiling 1 file (.ex)
:ok
iex(10)> 
08:29:31.893 [debug] GET /
 
08:29:31.893 [debug] Sent 200 in 23µs
 
08:29:45.368 [debug] GET /home
 
08:29:45.368 [debug] Sent 200 in 31µs
 
**08:29:45.447 [debug] GET /priv/js/test.js**
** **
**08:29:45.448 [debug] Sent 404 in 37µs**
 

Plug.Static serves assets from priv/static. Move your JavaScript file to priv/static/js

Thanks for the support so far but its still failing

iex(12)> 
08:49:28.582 [debug] GET /home
 
08:49:28.582 [debug] Sent 200 in 32µs
 
08:49:28.608 [debug] GET /priv/static/js/test.js
 
08:49:28.608 [debug] Sent 404 in 22µs
 
08:50:53.701 [debug] GET /home
 
08:50:53.701 [debug] Sent 200 in 27µs
 
08:50:53.723 [debug] GET /js/test.js
 
08:50:53.723 [debug] Sent 404 in 12µs
 
08:51:25.358 [debug] GET /home
 
08:51:25.358 [debug] Sent 200 in 30µs
 
08:51:25.387 [debug] GET /static/js/test.js
 
08:51:25.387 [debug] Sent 404 in 19µs
 
08:51:36.653 [info]  App Started!
Interactive Elixir (1.12.1) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)> 
08:51:40.599 [debug] GET /home
 
08:51:40.614 [debug] Sent 200 in 14ms
 
08:51:40.642 [debug] GET /static/js/test.js
 
08:51:40.642 [debug] Sent 404 in 29µs
 

for the index page

<!DOCTYPE HTML>

<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>ElixirTest</title>
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script  type="text/javascript" src="static/js/test.js" ></script>
</head>
<body>
	Elixir- 5
</body>
</html>

So from the above where is the issue

Your src in the script tag should just be /js/test.js

1 Like

Same output

iex(2)> recompile 
Compiling 1 file (.ex)
:ok
iex(3)> 
09:21:26.801 [debug] GET /home
 
09:21:26.801 [debug] Sent 200 in 29µs
 
09:21:26.822 [debug] GET /js/test.js
 
09:21:26.822 [debug] Sent 404 in 17µs
 

Is your application’s name :server? Looks like it might be :plug_ex instead. The from option should match your application’s name.

1 Like

Thanks @Nicd , that has worked ,now have you used extjs library with elixir before , if yes could you please share a sample project layout