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.
git clone https://github.com/chernyshof/react-phoenix-users-boilerplate appname
cd appname
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 '{}' \;
rm -rf .git
git init
git add priv/static/favicon.ico -f
git add priv/static/images/phoenix.png -f
mix deps.get
mix ecto.create
mix ecto.migrate
cd assets
yarn install
cd ..
mix phx.server
After running mix ecto.migrate command you will have superuser:
email: [email protected]
password: 12345678
You probably wanna change it :)
If you want to turn redux logger on just assign true to useReduxLogger in app/store/index.js
...
const useReduxLogger = true;
...You should have installed heroku-cli
heroku create --buildpack "https://github.com/HashNuke/heroku-buildpack-elixir.git"
heroku apps:rename appname
heroku buildpacks:add https://github.com/chernyshof/heroku-buildpack-phoenix-static.git
in config/prod.exs
change in config, :appname, Appname.Repo, url line(if needed)
url: [scheme: "https", host: "appnameaddress.herokuapp.com", port: 443],heroku addons:create heroku-postgresql:hobby-dev
heroku config:set POOL_SIZE=18
gen secret key
$ mix phx.gen.secret
xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53
heroku config:set SECRET_KEY_BASE="xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53"
$ mix phx.gen.secret
xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53
heroku config:set GUARDIAN_SECRET_KEY="xvafzY4y01jYuzLm3ecJqo008dVnU3CN4f+MamNd1Zue4pXvfvUjbiXT8akaIF53"
git push heroku master
heroku run "POOL_SIZE=2 mix ecto.migrate"
- Elixir/Mix/Phoenix (Installation guide, Phoenix1.3)
- Node.js/yarn or npm
- A PostgreSQL server running on your machine.
- Watchman file watching service
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent