Giter VIP home page Giter VIP logo

elixir-cowboy-react-spa's Introduction

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:

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.

Demo#1 Demo#2 Mobile#1 Mobile#2

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.
  1. Create a docker-compose.yml file in the same directory that you created the .env file:
  • Copy the information from this file.
  1. Start the services by running $ docker-compose up -d.

License

MIT

elixir-cowboy-react-spa's People

Contributors

angarsk8 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.