This application can be used as starter kit if you want to get started building an app with Phoenix, React, and GraphQL. This is a simple cooking recipe sharing application using ordinary features which can be found in most web applications.
- TypeScript - A superset of JavaScript that compiles to clean JavaScript output.
- React - A JavaScript library for building user interfaces. It introduces many great concepts, such as, Virtual DOM, Data flow, etc.
- Webpack 4 - A bundler for javascript and friends. Packs many modules into a few bundled assets.
- Bulma - Bulma is a modern CSS framework based on Flexbox
- Apollo 2 - A flexible, fully-featured GraphQL client for every platform.
- React Final Form - High performance subscription-based form state management for React.
- Elixir 1.6
- Phoenix 1.3
- Erlang 20.3
- Absinthe - The GraphQL toolkit for Elixir.
- Graphiql - Graphiql is an in-browser IDE for exploring GraphQL.
- Arc - Flexible file upload and attachment library for Elixir.
- ExAws - A flexible, easy to use set of clients AWS APIs for Elixir. Use to store attachments in Amazon S3.
- PostgreSQL for database.
- CRUD (create / read / update / delete) on recipes
- Creating comments on recipe page
- Pagination on recipes listing
- Searching on recipes
- Authentication with token
- Creating user account
- Update user profile and changing password
- Confirm user account with a code sends by email
- Display comments and recipes in real-time
- Application ready for production
- Queries et mutations
- FetchMore for pagination
- Using
apollo-cache-inmemory
- Apollo Link (dedup, onError, auth)
- Subscription
- Managing local state with Apollo Link
- Optimistic UI
- Static GraphQL queries
- Validation management and integration with Final Form
- Authentication and authorizations
- Protect queries and mutations on GraphQL API
- Batching of SQL queries backend side
- Erlang 20 (Installing Erlang
- Elixir 1.6 (Installing Elixir)
- Phoenix 1.3 (Installing Phoenix)
- Node 8.11 (Installing Node)
- ImageMagick 7
- PostgreSQL
- Ruby only for integration tests with FakeS3
-
Checkout the yummy git tree from Github
$ git clone https://github.com/MatthieuSegret/yummy-phoenix-graphql.git $ cd yummy-phoenix-graphql yummy-phoenix-graphql$
-
Install dependencies :
yummy-phoenix-graphql$ mix deps.get
-
Create and migrate your database :
yummy-phoenix-graphql$ mix ecto.create && mix ecto.migrate
-
Load sample records:
yummy-phoenix-graphql$ mix run priv/repo/seeds.exs
-
Start Phoenix endpoint
yummy-phoenix-graphql$ mix phx.server
-
Run npm to install javascript package in other terminal:
yummy-phoenix-graphql$ cd client yummy-phoenix-graphql/client$ npm install
-
Start client in development mode. You should be able to go to
http://localhost:3000
:yummy-phoenix-graphql/client$ npm start
Integration tests with Wallaby and ChromeDriver. Instructions:
- Install ChromeDriver
- Install FakeS3 with
gem install fakes3
. Fake S3 simulate Amazon S3. It minimize runtime dependencies and be more of a development tool to test S3 calls. - Run FakeS3 in a new terminal window with
fakes3 -r $HOME/.s3bucket -p 4567
- Build frontend with
API_HOST=localhost:4000 npm run build
- Start frontend test server
npm run test.server
- Run tests with
mix test
This example explains how to deploy the application on Google Kubernetes Engine.
- Create account on Google Cloud and create the project
yummy-phoenix-graphql
- Install gcloud
- Initialize gcloud with
gcloud init
- Install kubectl with gcloud :
gcloud components install kubectl
- Create a static IP address named yummy-phoenix-graphql-ip
gcloud compute addresses create yummy-phoenix-graphql-ip --global
- Install jq to parse json in command-line : https://stedolan.github.io/jq
- Install only the Helm client (helm) : https://docs.helm.sh/using_helm/#installing-helm
- Set execute permissions on scripts
chmod +x kubernetes/script/*
- Install Docker
- Read Quickstart for Google Container Registry
- Login to docker registry
gcloud auth configure-docker
- Build frontend image :
docker build -t gcr.io/yummy-phoenix-graphql/frontend:latest -f dockerfiles/frontend.dockerfile .
- Build api backend image :
docker build -t gcr.io/yummy-phoenix-graphql/api:latest -f dockerfiles/api.dockerfile .
- Push images to registry :
docker push gcr.io/yummy-phoenix-graphql/frontend:latest && docker push gcr.io/yummy-phoenix-graphql/api:latest
- Create account on Sendgrid to send emails
- Create account on AWS S3 to upload images
- Set environement variables :
export NAMESPACE=yummy-staging
export PUBLIC_HOST=$(gcloud compute addresses describe yummy-phoenix-graphql-ip --global --format="value(address)")
export SENDGRID_API_KEY=<your-sendgrid-api-key>
export S3_KEY=<your-s3-key>
export S3_SECRET=<your-s3-secret>
export S3_BUCKET=<your-s3-bucket>
- Create cluster with
./kubernetes/script/create-cluster.sh
- Install yummy helm chart :
helm install --name yummy --namespace=$NAMESPACE \
--set publicHost=$PUBLIC_HOST \
--set api.sendgridApiKey=$SENDGRID_API_KEY \
--set api.s3Key=$S3_KEY \
--set api.s3Secret=$S3_SECRET \
--set api.s3Bucket=$S3_BUCKET \
./kubernetes/yummy
- Create and populate the Database
./kubernetes/script/create-database.sh
You can edit or append to the existing customized values and templates, then apply the changes with :
helm upgrade yummy ./kubernetes/yummy
To avoid incurring charges to your Google Cloud Platform account for the resources used :
- Delete cluster with
./kubernetes/script/destroy-cluster.sh
- if you don't want to recreate this cluster in the future, delete the static ip :
gcloud compute addresses delete yummy-phoenix-graphql-ip --global
- Delete any orphaned resources :
gcloud compute backend-services delete --global -q <BACKEND_SERVICES>
- Migrate from S3 to Google CDN
- Connect Erlang nodes between them on Kubernetes cluster with Peerage
- Migrate frontend from TypeScript to ReasonML
MIT © Matthieu Segret