angarsk8/elixir-cowboy-react-spa

Example application that shows how to use Cowboy 2.0 in conjunction with React and Redux to create data driven Single Page Applications

Cowboy + React SPA Example

This is an example application that shows how to use Cowboy 2.0 in conjunction with React and Redux to create data driven Single Page Applications.

This project has been developed using the following technologies:

• Elixir 1.3.4
• Cowboy 2.0
• Ecto
• PostgreSQL
• React
• Redux
• Redux Saga

Features

This repository contains the source code of a Todo list web application that pretends to serve as a mid size example to learn how to build modern SPAs with Elixir (not Phoenix) and React. In this project you will find how to implement important features and services such as:

Backend

• Anonymous authentication (encoding and signing user with JWT)
• RESTful JSON API (Cowboy REST handlers)
• Serve static files (Cowboy static handler)
• Authorization (decoding and verifying JWT)
• Data modeling and persistency (Ecto + PostgreSQL)

Frontend

• Component based SPA (React)
• Application state management (Redux)
• Async operations handling (Redux Saga)

Demo

Demo available here.

Setup

To start this application locally:

1. Make sure you have installed Elixir, Erlang, Node, Yarn and PostgreSQL
2. Install the Mix dependencies: $ mix deps.get
3. Create and migrate the development database: $ mix ecto.setup
4. Start the application with all its dependencies: $ iex -S mix
5. Install the Node packages $ cd client/ && yarn install
6. Start the web development server: $ yarn start

To build the JavaScript application for production:

• In the client directory, run $ yarn build

Deployment with Docker

To run this application in production with Docker:

1. Make sure both docker and docker-compose are installed on your production server.
2. Create a .env file anywhere in your server:

• Copy the information from this file.
• Replace the placeholders with the data you want.

3. Create a docker-compose.yml file in the same directory that you created the .env file:

• Copy the information from this file.

4. Start the services by running $ docker-compose up -d.

License

MIT

elixir-cowboy-react-spa's Issues

Migrate Cowboy to version 2.0

Migrate Cowboy and the REST callbacks/handlers to version 2.0.

reference: https://ninenines.eu/docs/en/cowboy/2.0/manual/

Error running migrations

This is the error trace that shows when I try to run mix ecto.migrate:

** (ArgumentError) argument error
    (stdlib) :ets.lookup(Env, {:todo_app, TodoApp.Repo})
    lib/env.ex:269: Env.lookup/2
    lib/env.ex:131: Env.fetch/3
    lib/env.ex:160: Env.fetch!/3
    lib/todo_app/repo.ex:33: TodoApp.Repo.get_env/1
    lib/todo_app/repo.ex:29: TodoApp.Repo.set_env/2
    (elixir) lib/enum.ex:1755: Enum."-reduce/3-lists^foldl/2-0-"/3
    lib/todo_app/repo.ex:10: TodoApp.Repo.init/2

Demo link doesn't work

Process Exception errors

I get these errors on iex -S mix when playing on local with it. Not sure if important or not, the app behaves OK.

[error] Process #PID<0.3906.0> raised an exception ** (CaseClauseError) no case clause matching: {:ok, {:ok, {:http_req, #Port<0.135027>, :ranch_tcp, :keepalive, #PID<0.3906.0>, "PUT", :"HTTP/1.1", {{127, 0, 0, 1}, 57093}, "localhost", :undefined, 8080, "/api/v1/todos/2", :undefined, "", :undefined, [id: "2"], [{"host", "localhost:8080"}, {"connection", "keep-alive"}, {"content-length", "49"}, {"accept", "application/json"}, {"origin", "http://localhost:3000"}, {"user-agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36"}, {"authorization", "Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleHAiOjE0OTM0NDM4MDgsImlhdCI6MTQ5MDg1MTgwOCwiaXNzIjoiVG9kb0FwcCIsImp0aSI6Ijk4ZmYzMDBjLTk4MTEtNDE0Yy1iZjlkLWQwMTFjNzFmYjY5NiIsInBlbSI6e30sInN1YiI6IlVzZXI6MSIsInR5cCI6ImFjY2VzcyJ9.nD2bCL-vi8hr_6mLLdv_DmbLKEw1OeKkLdw2XiQgNvWqYb9UcqNGGUlw3C3yxKfnxIAiruKO5CUSdvSLn1tTKw"}, {"content-type", "application/json"}, {"dnt", "1"}, {"referer", "http://localhost:3000/"}, {"accept-encoding", "gzip, deflate, sdch, br"}, {"accept-language", "es,en-US;q=0.8,en;q=0.6,fr;q=0.4"}], [{"content-length", 49}, {"expect", :undefined}, {"content-type", {"application", "json", []}}, {"if-modified-since", :undefined}, {"if-none-match", :undefined}, {"if-unmodified-since", :undefined}, {"if-match", :undefined}, {"accept", [{{"application", "json", []}, 1000, []}]}, {"authorization", {"bearer", "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleHAiOjE0OTM0NDM4MDgsImlhdCI6MTQ5MDg1MTgwOCwiaXNzIjoiVG9kb0FwcCIsImp0aSI6Ijk4ZmYzMDBjLTk4MTEtNDE0Yy1iZjlkLWQwMTFjNzFmYjY5NiIsInBlbSI6e30sInN1YiI6IlVzZXI6MSIsInR5cCI6ImFjY2VzcyJ9.nD2bCL-vi8hr_6mLLdv_DmbLKEw1OeKkLdw2XiQgNvWqYb9UcqNGGUlw3C3yxKfnxIAiruKO5CUSdvSLn1tTKw"}}, {"connection", ["keep-alive"]}], :undefined, [media_type: {"application", "json", []}, charset: :undefined], :done, "", :undefined, false, :done, [], "", :undefined}}} (cowboy) /Users/cpu/Work/Code/elixir-cowboy-react-spa/deps/cowboy/src/cowboy_rest.erl:777: :cowboy_rest.process_content_type/3 (cowboy) /Users/cpu/Work/Code/elixir-cowboy-react-spa/deps/cowboy/src/cowboy_protocol.erl:442: :cowboy_protocol.execute/4 [error] Ranch listener :http_listener had connection process started with :cowboy_protocol:start_link/4 at #PID<0.3906.0> exit with reason: {{:case_clause, {:ok, {:ok, {:http_req, #Port<0.135027>, :ranch_tcp, :keepalive, #PID<0.3906.0>, "PUT", :"HTTP/1.1", {{127, 0, 0, 1}, 57093}, "localhost", :undefined, 8080, "/api/v1/todos/2", :undefined, "", :undefined, [id: "2"], [{"host", "localhost:8080"}, {"connection", "keep-alive"}, {"content-length", "49"}, {"accept", "application/json"}, {"origin", "http://localhost:3000"}, {"user-agent", "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36"}, {"authorization", "Bearer eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleHAiOjE0OTM0NDM4MDgsImlhdCI6MTQ5MDg1MTgwOCwiaXNzIjoiVG9kb0FwcCIsImp0aSI6Ijk4ZmYzMDBjLTk4MTEtNDE0Yy1iZjlkLWQwMTFjNzFmYjY5NiIsInBlbSI6e30sInN1YiI6IlVzZXI6MSIsInR5cCI6ImFjY2VzcyJ9.nD2bCL-vi8hr_6mLLdv_DmbLKEw1OeKkLdw2XiQgNvWqYb9UcqNGGUlw3C3yxKfnxIAiruKO5CUSdvSLn1tTKw"}, {"content-type", "application/json"}, {"dnt", "1"}, {"referer", "http://localhost:3000/"}, {"accept-encoding", "gzip, deflate, sdch, br"}, {"accept-language", "es,en-US;q=0.8,en;q=0.6,fr;q=0.4"}], [{"content-length", 49}, {"expect", :undefined}, {"content-type", {"application", "json", []}}, {"if-modified-since", :undefined}, {"if-none-match", :undefined}, {"if-unmodified-since", :undefined}, {"if-match", :undefined}, {"accept", [{{"application", "json", []}, 1000, []}]}, {"authorization", {"bearer", "eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJVc2VyOjEiLCJleHAiOjE0OTM0NDM4MDgsImlhdCI6MTQ5MDg1MTgwOCwiaXNzIjoiVG9kb0FwcCIsImp0aSI6Ijk4ZmYzMDBjLTk4MTEtNDE0Yy1iZjlkLWQwMTFjNzFmYjY5NiIsInBlbSI6e30sInN1YiI6IlVzZXI6MSIsInR5cCI6ImFjY2VzcyJ9.nD2bCL-vi8hr_6mLLdv_DmbLKEw1OeKkLdw2XiQgNvWqYb9UcqNGGUlw3C3yxKfnxIAiruKO5CUSdvSLn1tTKw"}}, {"connection", ["keep-alive"]}], :undefined, [media_type: {"application", "json", []}, charset: :undefined], :done, "", :undefined, false, :done, [], "", :undefined}}}}, [{:cowboy_rest, :process_content_type, 3, [file: '/Users/cpu/Work/Code/elixir-cowboy-react-spa/deps/cowboy/src/cowboy_rest.erl', line: 777]}, {:cowboy_protocol, :execute, 4, [file: '/Users/cpu/Work/Code/elixir-cowboy-react-spa/deps/cowboy/src/cowboy_protocol.erl', line: 442]}]}

Thanks for this example, really cool to avoid Phoenix Views/Templates if one prefers to choose React/Redux for the frontend.

Would you accept a PR trying to add react-native to the bunch? Not sure how far it will go as far as a nice experiment.

Recreate frontend using Elm