开源软件名称(OpenSource Name): MatthieuSegret/yummy-phoenix-graphql开源软件地址(OpenSource Url): https://github.com/MatthieuSegret/yummy-phoenix-graphql开源编程语言(OpenSource Language):
Elixir
54.5%
开源软件介绍(OpenSource Introduction): Yummy Phoenix GraphQL
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.
Technologies
Frontend
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.
Backend
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.
Features
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
GraphQL Using
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
Prerequisites
Getting Started
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
Testing
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
Production with Kubernetes
This example explains how to deploy the application on Google Kubernetes Engine .
Preparing environment
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
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/*
Preparing for the istio installation
Move to kubernetes/istio/charts : cd kubernetes/istio/charts
You can run the following command to download and extract the latest release automatically : curl -L https://git.io/getLatestIstio | sh -
Move to istio-1.x.y, for example : cd istio-1.0.2
Add the istioctl client to your PATH with : printf "export PATH=%s:\$PATH\n" $PWD/bin >> ~/.bashrc && source ~/.bashrc
(or .zshrc, .bash_profile)
Check istio version : istioctl version
Back to root path of the project cd <root-project>
Building and pushing docker images to Google Container Registry
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
Creating Kubernetes cluster
Create account on Sendgrid to send emails
Create account on AWS S3 to upload images
Set environement variables :
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
Upgrading yummy chart
You can edit or append to the existing customized values and templates, then apply the changes with :
helm upgrade yummy ./kubernetes/yummy
Querying Metrics from Prometheus
Verify that the prometheus service is running in your cluster:
kubectl -n istio-system get svc prometheus
In Kubernetes environments, execute the following command:
$ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l app=prometheus -o jsonpath='{.items[0].metadata.name}') 9090:9090 &
To open the Prometheus UI, visit http://localhost:9090/graph in your web browser.
Visualizing Metrics with Grafana
Verify that the prometheus service is running in your cluster:
kubectl -n istio-system get svc prometheus
Verify that the Grafana service is running in your cluster:
kubectl -n istio-system get svc grafana
In Kubernetes environments, execute the following command:
$ kubectl -n istio-system port-forward $(kubectl -n istio-system get pod -l app=grafana -o jsonpath='{.items[0].metadata.name}') 3001:3000 &
To open the Grafana UI, visit http://localhost:3001 in your web browser. Username and password is admin
. You can change the password.
Clean up
To avoid incurring charges to your Google Cloud Platform account for the resources used, delete cluster with :
$ ./kubernetes/script/destroy-cluster.sh
Next step
Screens
Listing recipes
Editing recipe
Recipe page
Account confirmation
License
MIT © Matthieu Segret
请发表评论