Get started with Phoenix, React, Redux, and React-Router!
JavaScript Elixir CSS HTML
Latest commit 6a87819 Jan 12, 2017 @rsilvestre committed on GitHub Merge pull request #29 from rsilvestre/feature/manifest
Feature/manifest
Permalink
Failed to load latest commit information.
config feature(phoenix): compile production code Jan 5, 2017
lib feature(manifest): add manifest.json. Let lighthouse passe 58% of the… Jan 12, 2017
priv refactor(project): move static files out of src Dec 13, 2016
rel feature(phoenix): add missing config file Jan 5, 2017
test fix(travis): add node 7 as travis deps. 10th try Dec 13, 2016
tests test(karma): implement Karma test engine. Update README, modify confi… Dec 19, 2016
web feature(manifest): add manifest.json. Let lighthouse passe 58% of the… Jan 12, 2017
.buildpacks Start integration of webpack Oct 25, 2016
.credo.exs test(karma): implement Karma test engine. Update README, modify confi… Dec 19, 2016
.eslintignore Add eslint support Dec 12, 2016
.eslintrc Add eslint support Dec 12, 2016
.gitignore test(karma): implement Karma test engine. Update README, modify confi… Dec 19, 2016
.nvmrc fix(travis): setup travis config file Dec 19, 2016
.travis.yml feature(demo): create new branch for the demo Jan 4, 2017
CONTRIBUTING.md docs(update): Add contributing and update readme Dec 13, 2016
Dockerfile fix(travis): add node 7 as travis deps. 8th try Dec 13, 2016
README.md feature(phoenix): compile production code Jan 5, 2017
compile feature(js): compile js Jan 5, 2017
compile.js feature(js): compile js Jan 5, 2017
config.js test(karma): implement Karma test engine. Update README, modify confi… Dec 19, 2016
elixir_buildpack.config Start integration of webpack Oct 25, 2016
environments.js Integration phase1 WIP. Connecting things together with webpack Oct 25, 2016
karma.config.js test(karma): implement Karma test engine. Update README, modify confi… Dec 19, 2016
mix.exs feature(phoenix): compile production code Jan 5, 2017
mix.lock feature(phoenix): compile production code Jan 5, 2017
package.json feature(js): compile js Jan 5, 2017
phoenix_static_buildpack.config Finalize integration by updating webpack config Nov 20, 2016
webpack.config.js fix(chunkplugin): remove config filename Jan 12, 2017
yarn.lock upgrade(react-redux): ^4.4.5 -> ^5.0.1' Jan 4, 2017

README.md

PhoenixReactReduxStarterKit

Standard - JavaScript Style Guide

Build status by branch :

branch build status
master Build Status
language-support Build Status
ecto Build Status
user_support Build Status
user-support-multilanguage Build Status
demo Build Status

The project is based on react-redux-starter-kit developed by David Zukowski. The main idea is to offer to the Phoenix developer one of the best react redux starter kit I ever seen before. A large part of the content of this README file could be the same than which on the react-redux-starter-kit page.

What are my motivates and what is the difference with the other starter kit. I wanted to follow a specialized react redux starter kit with the fractal approche. - The application structure presented in this boilerplate is fractal, where functionality is grouped primarily by feature rather than file type. - (Read more here). I also wanted to have several starter kit, according what you wanted to develop. The project is devided in several branches : master, language-support, ecto, user_support and user-support-multilanguage.

If you want learn more about elixir and phoenix, i would suggest you to watch the webbinar made by José Valim, the creator of elixir : https://youtu.be/Af-gTdlQoUM?t=1093

The demo website is accessible to this link : https://phoenix-react-redux-starterkit.herokuapp.com

Table of content

  1. Features
  2. Requirements
  3. Branches
  4. Start
  5. Development
  6. Test
  7. Deployment
  8. Demo
  9. Learn more
  10. Inspiraction

Features

  • react
  • redux
  • react-router
  • webpack
  • babel
  • phoenix
  • socket

Requirements

  • erlang 18.x
  • hex 0.14.1
  • elixir 1.3.4
  • phoenix 1.2.1
  • node 6.x.x
  • yarn ^0.17.0 or npm ^3.0.0

Install requirements

Elixir

follow the install instruction on the elixir-lang web page http://elixir-lang.org/install.html#mac-os-x

For OSX, you have to install erlang 18.x

$ brew install erlang-r18
$ brew install elixir

if you have several version of erlang installed, switch to version 18.x

to know which version of erlang is installed with brew, use : $ brew info erlang

$ brew switch erlang 18.x

Phoenix

Follow the instruction on the installation guide of phoenix framework http://www.phoenixframework .org/docs/installation

$ mix local.hex
$ mix archive.install https://github.com/phoenixframework/archives/raw/master/phoenix_new.ez

Node

node come with npm installed

NVM

NVM mean (node version manager). You can find it here : https://github.com/creationix/nvm

with cURL:

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

or with wget

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash

add this in your .profile of .bash_profile or .bashrc, ...

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

reload your profile with $ source ~/.profile

install node :

$ nvm install node
Brew

you can use homebrew

$ brew install node
Others

https://nodejs.org/en/download/current/

https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-16-04

Yarn

Yarn is a FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT.

Yarn caches every package it downloads so it never needs to download it again. It also parallelizes operations to maximize resource utilization so install times are faster than ever.

It's x times faster than using npm

Once npm is installed

$ npm install -g yarn

Branches

Like there are serveral way to start a project, I added some nice feature in sub-branches to help developpers to start faster there projects. May be in a futur I will move thoses branches in independant github project :

. master             # is a starter kit without Ecto support
├── language-support # include a multilanguage support using react-intl
└── ecto             # include ecto deps with postgrex
    └── user_support # include a user restricted area, a signup, a signin and a signout actions
        └── user-support-multilanguage # merge user_support with language-support
            └── demo # The demo of the starter kit

master

The branch master contains the simpliest starter kit possible. The backend just render a static page including the canvas of the SPA. It handles the request to the css, the javascript, the favicon, etc...

ecto

This branch contains the simple support to ecto. Ecto is the elixir ORM you can find more details, you can find information here : https://hexdocs.pm/ecto/Ecto.html

language-support

I'm living in Beligum. We have three communities speaking different languages. Dutch, French and German. For that reason, language support looks important to me. juanda99 created first a language support for react redux starter kit and I helped him to maintain his repository. I reused what he did and included it in this project

user_support

A lot of project start with a user connection. This branch includes a small user support.

It adds a restricted area, a user create, login and logout. It also add Websocket user connection.

user-support-multilanguage

This branch is a mix between user_support and language-support. You should be able to start a project really fast.

Start

To start your Phoenix app:

Install from source

$ git clone git@github.com:rsilvestre/phoenix-react-redux-starter-kit.git <my-project-name>
cd <my-project-name>

Then install dependencies and check to see it works. It is recommended that you use Yarn for deterministic installs, but npm install will work just as well.

$ mix deps.get                      # Install dependencies
$ yarn install                      # Install node modules
$ mix do ecto.create, ecto.migrate  # If you use `Ecto`
$ mix phoenix.server                # Start Phoenix endpoint

Now you can visit localhost:4000 from your browser.

Ready to run in production? Please check our deployment guides.

Development

Developer Tools

We recommend using the Redux DevTools Chrome Extension. Using the chrome extension allows your monitors to run on a separate thread and affords better performance and functionality. It comes with several of the most popular monitors, is easy to configure, filters actions, and doesn?t require installing any packages.

However, adding the DevTools components to your project is simple. First, grab the packages from npm:

$ npm i --save-dev redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

Then follow the manual integration walkthrough.

Routing

We use react-router route definitions (<route>/index.js) to define units of logic within our application. See the application structure section for more information.

DevTools

The complete explaination about the Redux DevTools can be found on the github page of the project, and the usage of the extension can be fond on the Redux DevTools Extension page. But basicaly, from the extension's context menu choose 'Open Remote DevTools' or press Alt+Shift+arrow up (or down, left, right) (Cmd+CTRL+arrow up on Mac) for remote monitoring.

Test

The Elixir code is linted with credo where the source code can be found on github

$ mix credo --strict

The Elixir code is unitTested (orchestration) with ExUnit and the Integration tests is made with Hound

$ mix test                          # integration tests included
$ mix test --exclude integration    # integration tests excluded

The JavaScript code is linted with eslint

$ npm run lint

The JavaScript is unitTested (orchestred) with Karma, Mocha, sinon and chai

$ npm run test

Deployment

Compile production code with distillery

You need to compile first the javascript and next phoenix. As proposed by Pete Corey here : Deploying elixir applications with distillery

$ npm run deploy:prod
$ MIX_ENV=prod mix do compile, phoenix.digest, release --env=prod

To test it :

$ PORT=8080 ./_build/prod/rel/YOUR_APP/bin/YOUR_APP foreground

Docker

  1. build, check and push

    docker login dockerhub.net -u root -p PASSWORD
    export TAG=$(git rev-parse --short HEAD)
    docker build -t dockerhub.net/phoenix-react-redux-starter-kit:${TAG} .
    docker stop messaging_center_widget
    docker rm messaging_center_widget
    docker run --name=messaging_center_widget --restart=always \
      -p 127.0.0.1:4000:4000 -d dockerhub.net/phoenix-react-redux-starter-kit:${TAG}
    docker push dockerhub.net/widget-prototype:${TAG}
    export dockerToDelete=$(docker images | \
      grep dockerhub.net/widget-prototype | \
      grep -v "IMAGE ID" | grep -v ${TAG} | awk '{print $3}' | sed '$d')
    if [ ! -z "$dockerToDelete" ]; then docker rmi $dockerToDelete; fi
    echo export TAG=${TAG}
  2. pull, run and clean

    docker login dockerhub.net -u root -p PASSWORD
    export TAG=TAG
    docker pull dockerhub.net/phoenix-react-redux-starter-kit:${TAG}
    docker stop messaging_center_widget
    docker rm messaging_center_widget
    docker run --name=messaging_center_widget --restart=always -p 0.0.0.0:4000:4000 \
      -d dockerhub.net/phoenix-react-redux-starter-kit:${TAG}
    docker rm $(docker ps -a | grep Exited | awk '{print $1}')
    docker rmi $(docker images | grep -v "IMAGE ID" | grep -v ${TAG} | awk '{print $3}')

Demo

https://phoenix-react-redux-starterkit.herokuapp.com

It support multi-language, user connection and websocket communication.

If you try it, when you open 2 browser and you are connecte on each browser with the same user, when you are on the counter page, if you increment the counter, this one is incremented on the page of each browsers. This is also a GenServer to memorise the counter state. The state of the counter is shared between each instance of the server.

Learn more

Inspiraction

I would like to thank you all the people in different opensource communities for there projects that help me to create this starter kit.

Read those books :