cookiecutter-elixir-phoenix

An Elixir + Phoenix umbrella project template

Sections

• Features
• Cookiecutter Requirements
• Cookiecutter Usage
• Setting Everything Up
• Running the project
• Recommended VS Code Plugins

Features

• Elixir (1.9.0)
• Phoenix (1.4)
• Absinthe (Elixir GraphQL library)
• Credo
• Dialyzer
• Excoveralls
• Dockerfile
• Gitlab CI Configurations
• React (latest)
• TypeScript
• ESLint with customized rules for Typescript and React (loosely based on Airbnb rules)
• Prettier + Editorconfig
• Single Page Application Routing: Reach Router with Lazy Loading
• Apollo GraphQL
  • React Apollo with @apollo/react-hooks
  • Apollo Client and Links setup readily available for you
  • websocket and subscription working with example
• Frontend optimizations with webpack configuration out of the box. Includes:
  • Split Chunks Optimization with WebpackAssetsManifest
  • Terser Minifier
  • Code Splitting and Dynamic Imports
  • OptimizeCSSAssetsPlugin
  • GZIP (Compression Plugin)
  • Workbox (Service Worker)
  • Cache Busting with Service Worker
• Progressive Web App Capable

Cookiecutter Requirements

Install python first. We'll need pip or pip3 to use cookiecutter.
Install cookiecutter command line: pip install cookiecutter

Cookiecutter Usage

Generate a new Elixir + Phoenix + GraphQL + ReactJS + Docker project:

Stable (master)

cookiecutter gh:ibakami/cookiecutter-elixir-phoenix

Latest (develop)

cookiecutter gh:ibakami/cookiecutter-elixir-phoenix --checkout develop

Setting everything up

Requirements

Please install the latest versions to avoid problems

• Elixir
• Phoenix
• Docker
• Docker Compose
• Node.js
• Yarn

To avoid problems, it is recommended to do the steps in order. We also assume that you have the required application installed in your machine

Initialize Git Flow (default setting). Also, do the first commit so gitignore and git hooks will be initialized too.
Git Flow Cheatsheet

git flow init
git add .
git commit -am "Initial Commit"

Build docker for postgres

docker-compose up -d

Install phoenix dependencies

mix deps.get

Setting up the database and compiling stuffs

mix ecto.setup

Getting the npm packages with yarn (avoid using npm). Change <application slug> to your project slug name

(cd apps/<application_slug>_web/assets && yarn)

Running the project

Make the phoenix project work locally

mix phx.server

Recommended VS Code Plugins

• Better Comments
• EditorConfig for VS Code
• Eslint
• GraphQL
• Prettier - Code Formatter
• vscode-elixir

License

This project is licensed under the terms of the MIT License