React + Phoenix boilerplate

Demo: http://phxboilerplate.herokuapp.com

This is a basic setup for an React(16) + Phoenix(1.3)/Elixir(1.7) project, using webpack(4) and users with authentication.

STARTING PROJECT

You should have git installed

git clone https://github.com/chernyshof/react-phoenix-users-boilerplate appname
cd appname

Changing app name in files(commands for unix like systems)

grep -rl Boilerplate | xargs sed -i s@Boilerplate@Appname@g
grep --exclude={package.json,yarn.lock,.babelrc} -rl boilerplate | xargs sed -i s@boilerplate@appname@g
find . -depth -exec rename 's/boilerplate/appname/g' {} \; 

Or if you're using different rename version

find . -iname "*boilerplate*" -exec rename boilerplate appname '{}' \;

Reinit git

rm -rf .git
git init
git add priv/static/favicon.ico -f
git add priv/static/images/phoenix.png -f

Download dependencies

mix deps.get
mix ecto.create
mix ecto.migrate
cd assets
yarn install
cd ..

Start server

mix phx.server

SUPERUSER

After running mix ecto.migrate command you will have superuser:

email: [email protected]
password: 12345678

You probably wanna change it :)

SETUP

Redux logger

If you want to turn redux logger on just assign true to useReduxLogger in app/store/index.js

...
const useReduxLogger = true;
...

DEPLOYING TO HEROKU

You should have installed heroku-cli

Create heroku application

heroku create --buildpack "https://github.com/HashNuke/heroku-buildpack-elixir.git"

Optional change app address

heroku apps:rename appname

Adding phoenix buildpack

heroku buildpacks:add https://github.com/chernyshof/heroku-buildpack-phoenix-static.git

Add you address

in config/prod.exs change in config, :appname, Appname.Repo, url line(if needed)

url: [scheme: "https", host: "appnameaddress.herokuapp.com", port: 443],

Creating Environment Variables

heroku addons:create heroku-postgresql:hobby-dev
heroku config:set POOL_SIZE=18

Secret key

gen secret key

$ mix phx.gen.secret
xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53

now set key that you got in heroku

heroku config:set SECRET_KEY_BASE="xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53"

Guardian secret key

$ mix phx.gen.secret
xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53

now set key that you got in heroku

heroku config:set GUARDIAN_SECRET_KEY="xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53"

Deploy time!

git push heroku master
heroku run "POOL_SIZE=2 mix ecto.migrate"

REQUIREMENTS

• Elixir/Mix/Phoenix (Installation guide, Phoenix1.3)
• Node.js/yarn or npm
• A PostgreSQL server running on your machine.
• Watchman file watching service

USED PLUGINS AND TECHNOLOGIES

Frontend

• React
• React hot reloader Tweak React components in real time.
• Redux logger
• React Router 4 Declarative routing for React.
• Babel For ES6 and ES7 magic.
• Webpack 4 For bundling.
• Webpack Dev Middleware
• Redux Predictable state container for JavaScript apps.
• Redux Dev Tools DevTools for Redux with hot reloading, action replay, and customizable UI. Watch Dan Abramov's talk
• Redux Saga Middleware for Redux - used in async actions.
• React Router Redux 5 Ruthlessly simple bindings to keep react-router and redux in sync.
• ESLint And many librarys for this.
• Jest JavaScript Testing framework.
• Enzyme JavaScript Testing utilities for React.
• Sass Css extenstion language.
• PostCSS Tool for transforming css to javascript
• husky Husky can prevent bad commit, push and more.
• OpenBrowserPlugin Opens a new browser tab when Webpack loads. and other stuff...

Backend

• Elixir 1.7
• Phoenix 1.3
• Credo Static code analysis tool for the Elixir language.