hasura · shahidhk · May 10, 2019 · May 1, 2019 · May 2, 2019 · May 5, 2019
diff --git a/community/learn/graphql-tutorials/backend-services/graphiql/README.md b/community/learn/graphql-tutorials/backend-services/graphiql/README.md
@@ -13,7 +13,7 @@ We use [dotenv](https://github.com/motdotla/dotenv) for setting environment vari
 ```
 PORT=3000
 NODE_ENV=development
-GRAPHQL_ENDPOINT=http://localhost:8090/v1/graphql
+GRAPHQL_ENDPOINT=http://localhost:8090/v1alpha1/graphql
 HEADER_STRING='{}'
 VARIABLE_STRING='{}'
 QUERY_STRING='query { test_table { id } }'

diff --git a/...ity/learn/graphql-tutorials/backend-services/graphiql/src/components/ApiExplorer/state.js b/...ity/learn/graphql-tutorials/backend-services/graphiql/src/components/ApiExplorer/state.js
@@ -53,7 +53,7 @@ dataApisContent.push({
   },
   request: {
     method: 'POST',
-    url: getUrl('/v1/graphql'),
+    url: getUrl('/v1alpha1/graphql'),
     headers: defaultHeader,
     bodyType: 'graphql',
     params: JSON.stringify({}, null, 4),

diff --git a/community/learn/graphql-tutorials/manifests/caddy-config.yaml b/community/learn/graphql-tutorials/manifests/caddy-config.yaml
@@ -14,6 +14,10 @@ data:
         /graphql/react/ /graphql/react/introduction
       }
 
+      redir 301 {
+        /graphql/hasura/ /graphql/hasura/introduction
+      }
+
       redir 302 {
         if {path} is /
         / /graphql/react/introduction
@@ -25,8 +29,8 @@ data:
         without /graphql/console
       }
 
-      proxy /graphql/v1/graphql hasura/v1/graphql {
-        without /graphql/v1/graphql
+      proxy /graphql/v1alpha1/graphql hasura/v1alpha1/graphql {
+        without /graphql/v1alpha1/graphql
         websocket
       }
 
@@ -42,9 +46,11 @@ data:
         without /graphql/graphiql
       }
 
+      proxy /graphql/hasura hasura-backend
+
       proxy /graphql/react react-apollo
 
-      proxy /graphql hasura/v1/graphql {
+      proxy /graphql hasura/v1alpha1/graphql {
         without /graphql
         websocket
       }

diff --git a/community/learn/graphql-tutorials/manifests/hasura-backend.yaml b/community/learn/graphql-tutorials/manifests/hasura-backend.yaml
@@ -0,0 +1,49 @@
+---
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  labels:
+    app: hasura-backend
+  name: hasura-backend
+  namespace: default
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app: hasura-backend
+  strategy:
+    type: RollingUpdate
+    rollingUpdate:
+      maxUnavailable: 0
+  template:
+    metadata:
+      labels:
+        app: hasura-backend
+    spec:
+      containers:
+      - image: hasura/base-git-image:0.7
+        imagePullPolicy: IfNotPresent
+        name: hasura-backend
+        ports:
+        - containerPort: 8080
+          protocol: TCP
+        readinessProbe:
+          httpGet:
+            path: /graphql/hasura/introduction
+            port: 8080
+---
+apiVersion: v1
+kind: Service
+metadata:
+  labels:
+    app: hasura-backend
+  name: hasura-backend
+  namespace: default
+spec:
+  ports:
+  - port: 80
+    protocol: TCP
+    targetPort: 8080
+  selector:
+    app: hasura-backend
+  type: ClusterIP
diff --git a/community/learn/graphql-tutorials/manifests/hasura.yaml b/community/learn/graphql-tutorials/manifests/hasura.yaml
@@ -17,7 +17,7 @@ spec:
         app: hasura
     spec:
       containers:
-      - image: hasura/graphql-engine:v1.0.0-alpha44
+      - image: hasura/graphql-engine:v1.0.0-alpha45
         imagePullPolicy: IfNotPresent
         name: hasura
         env:

diff --git a/community/learn/graphql-tutorials/manifests/homepage.yaml b/community/learn/graphql-tutorials/manifests/homepage.yaml
@@ -27,6 +27,10 @@ spec:
         ports:
         - containerPort: 8080
           protocol: TCP
+        readinessProbe:
+          httpGet:
+            path: /
+            port: 8080
 ---
 apiVersion: v1
 kind: Service

diff --git a/community/learn/graphql-tutorials/manifests/react-apollo.yaml b/community/learn/graphql-tutorials/manifests/react-apollo.yaml
@@ -27,6 +27,10 @@ spec:
         ports:
         - containerPort: 8080
           protocol: TCP
+        readinessProbe:
+          httpGet:
+            path: /graphql/react/introduction
+            port: 8080
 ---
 apiVersion: v1
 kind: Service

diff --git a/.../learn/graphql-tutorials/tutorials/react-apollo/app-boilerplate/CONTRIBUTING.md b/.../learn/graphql-tutorials/tutorials/react-apollo/app-boilerplate/CONTRIBUTING.md
@@ -1,9 +1,9 @@
 This app uses environment variables.
 
 ```
-REACT_APP_GRAPHQL_URL=https://hasura-todo-test.herokuapp.com/v1/graphql
+REACT_APP_GRAPHQL_URL=https://hasura-todo-test.herokuapp.com/v1alpha1/graphql
 
-REACT_APP_REALTIME_GRAPHQL_URL=wss://hasura-todo-test.herokuapp.com/v1/graphql
+REACT_APP_REALTIME_GRAPHQL_URL=wss://hasura-todo-test.herokuapp.com/v1alpha1/graphql
 
 REACT_APP_CALLBACK_URL=http://localhost:3000/callback
 

diff --git a/community/learn/graphql-tutorials/tutorials/react-apollo/app-final/CONTRIBUTING.md b/community/learn/graphql-tutorials/tutorials/react-apollo/app-final/CONTRIBUTING.md
@@ -1,9 +1,9 @@
 This app uses environment variables.
 
 ```
-REACT_APP_GRAPHQL_URL=https://hasura-todo-test.herokuapp.com/v1/graphql
+REACT_APP_GRAPHQL_URL=https://hasura-todo-test.herokuapp.com/v1alpha1/graphql
 
-REACT_APP_REALTIME_GRAPHQL_URL=wss://hasura-todo-test.herokuapp.com/v1/graphql
+REACT_APP_REALTIME_GRAPHQL_URL=wss://hasura-todo-test.herokuapp.com/v1alpha1/graphql
 
 REACT_APP_CALLBACK_URL=http://localhost:3000/callback
 

diff --git a/...orials/tutorials/react-apollo/tutorial-site/content/assets/after-logging-in.png b/...orials/tutorials/react-apollo/tutorial-site/content/assets/after-logging-in.png
diff --git a/...tutorials/react-apollo/tutorial-site/content/assets/boilerplate-after-login.png b/...tutorials/react-apollo/tutorial-site/content/assets/boilerplate-after-login.png
diff --git a/.../tutorials/react-apollo/tutorial-site/content/assets/boilerplate-initial-ui.png b/.../tutorials/react-apollo/tutorial-site/content/assets/boilerplate-initial-ui.png
diff --git a/...ls/tutorials/react-apollo/tutorial-site/content/assets/graphiql-after-login.png b/...ls/tutorials/react-apollo/tutorial-site/content/assets/graphiql-after-login.png
diff --git a/...tutorials/tutorials/react-apollo/tutorial-site/content/assets/realtime-feed.png b/...tutorials/tutorials/react-apollo/tutorial-site/content/assets/realtime-feed.png
diff --git a/...phql-tutorials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql.md b/...phql-tutorials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql.md
@@ -10,11 +10,11 @@ GraphQL is designed for developers of web/mobile apps (HTTP clients) to be able
 ## GraphQL vs REST: an example
 Let's say you have an API to fetch a user's profile and their address. In a typical REST scenario, this is what the request/response would look like:
 
-![GraphQL API example](./intro-to-graphql/rest-api.png)
+![GraphQL API example](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/rest-api.png)
 
 If your API server was a GraphQL server instead, this is what your API calls would look like:
 
-![GraphQL API example](./intro-to-graphql/graphql-api.gif)
+![GraphQL API example](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphql-api.gif)
 
 You can see that the response JSON is different for different "queries" sent by the client.
 

diff --git a/...tutorials/react-apollo/tutorial-site/content/intro-to-graphql/1-architecture.md b/...tutorials/react-apollo/tutorial-site/content/intro-to-graphql/1-architecture.md
@@ -10,7 +10,7 @@ GraphQL is actually used in an HTTP client (typically a web/mobile app).
 Check out the diagram below, to get a sense of how GraphQL is typically used in
 your stack:
 
-![GraphQL over HTTP](./graphql-on-http.png)
+![GraphQL over HTTP](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphql-on-http.png)
 
 ### GraphQL client-server flow:
 

diff --git a/.../react-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md b/.../react-apollo/tutorial-site/content/intro-to-graphql/2-fetching-data-queries.md
@@ -17,7 +17,7 @@ When you connect GraphiQL to a GraphQL endpoint, it
 queries the server for its GraphQL schema and gives you a UI to browse
 and test queries, and that powers its amazing autocomplete!
 
-![GraphiQL demo](./graphiql.gif)
+![GraphiQL demo](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphiql.gif)
 
 Tools like GraphiQL make GraphQL APIs really easy
 to use and integrate APIs in your app without requiring
@@ -44,7 +44,7 @@ use a tool like GraphiQL to explore and test your GraphQL queries.
      name
    }
  }
- ```
+```
 
 4. Hit `ctrl + enter` or `cmd + enter` (mac) or click on the ▶️ icon to run the GraphQL query
 5. On the right, you should see a list of users by their names that are in the system!
@@ -60,7 +60,7 @@ that you see on the right hand side.
 Our todo app has users, todos and information about users that are currently online.
 This is what our API "schema" looks like:
 
-![Schema](./schema.png)
+![Schema](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/schema.png)
 
 As you can see, it is a "graph" like schema where all the 3 models are linked to each other.
 

diff --git a/...ials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/graphiql.gif b/...ials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/graphiql.gif
diff --git a/...s/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/graphql-api.gif b/...s/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/graphql-api.gif
diff --git a/...torials/react-apollo/tutorial-site/content/intro-to-graphql/graphql-on-http.png b/...torials/react-apollo/tutorial-site/content/intro-to-graphql/graphql-on-http.png
diff --git a/...ials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/rest-api.png b/...ials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/rest-api.png
diff --git a/...orials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/schema.png b/...orials/tutorials/react-apollo/tutorial-site/content/intro-to-graphql/schema.png
diff --git a/.../graphql-tutorials/tutorials/react-apollo/tutorial-site/content/introduction.md b/.../graphql-tutorials/tutorials/react-apollo/tutorial-site/content/introduction.md
@@ -35,3 +35,6 @@ You need to have npm/yarn & node 8+ running.
 
 ## How long will this tutorial take?
 Less than 2 hours
+
+## Will this course teach setting up the GraphQL backend?
+No, this course is focussed on the frontend. You can take the [Introduction to Hasura](https://learn.hasura.io/graphql/hasura) backend course to know how the backend for this realtime todo app was setup.
diff --git a/...y/learn/graphql-tutorials/tutorials/react-apollo/tutorial-site/content/setup.md b/...y/learn/graphql-tutorials/tutorials/react-apollo/tutorial-site/content/setup.md
@@ -22,7 +22,7 @@ Our task will be to convert the "static" UI into a working realtime app.
 
 This is what you should see after the steps above:
 
-![Boilerplate after login](./assets/boilerplate-after-login.png)
+![Boilerplate after login](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/boilerplate-after-login.png)
 
 ### Load GraphiQL to play with your GraphQL APIs
 
@@ -31,4 +31,4 @@ This is what you should see after the steps above:
 
 This is what you should see after the steps above:
 
-![GraphiQL after login](./assets/graphiql-after-login.png)
+![GraphiQL after login](https://graphql-engine-cdn.hasura.io/learn-hasura/assets/graphql-react/graphiql-after-login.png)
diff --git a/...arn/graphql-tutorials/tutorials/react-apollo/tutorial-site/content/what-next.md b/...arn/graphql-tutorials/tutorials/react-apollo/tutorial-site/content/what-next.md
@@ -8,6 +8,9 @@ Congratulations! You have successfully completed the course.
 
 In case you are wondering what to do next, you have the following options:
 
+## Take the Hasura backend course
+We have an [Introduction to Hasura](https://learn.hasura.io/graphql/hasura) backend course to build the backend that you just used for your react app.
+
 ## Join Discord for Support
 We have a Discord Channel for those who are new to GraphQL. Please post your queries or feedback regarding this course. It is a pretty active channel.
 

diff --git a/community/learn/hasura/graphql-tutorial-backend/event-trigger/.gitignore b/community/learn/hasura/graphql-tutorial-backend/event-trigger/.gitignore
@@ -0,0 +1,2 @@
+*.env
+node_modules
diff --git a/community/learn/hasura/graphql-tutorial-backend/event-trigger/README.md b/community/learn/hasura/graphql-tutorial-backend/event-trigger/README.md
@@ -0,0 +1,17 @@
+# sendgrid-email-event-trigger
+
+[![DEPLOY TO GLITCH](https://raw.githubusercontent.com/hasura/graphql-engine/master/community/boilerplates/auth-webhooks/nodejs-express/assets/deploy-glitch.png)](https://glitch.com/~sendgrid-send-email-event)
+
+## Environment variables
+After remixing to your own project on Glitch, modify the `.env` file to enter the 
+- `SMTP_LOGIN`, 
+- `SMTP_PASSWORD`, 
+- `SMTP_HOST` 
+
+values appropriately.
+
+Additionally you should also configure the sender and receiver address using 
+- `SENDER_ADDRESS` 
+- `RECEIVER_ADDRESS` 
+
+env variables.
diff --git a/community/learn/hasura/graphql-tutorial-backend/event-trigger/index.js b/community/learn/hasura/graphql-tutorial-backend/event-trigger/index.js
@@ -0,0 +1,45 @@
+const nodemailer = require('nodemailer');
+const transporter = nodemailer.createTransport('smtp://'+process.env.SMTP_LOGIN+':'+process.env.SMTP_PASSWORD+'@' + process.env.SMTP_HOST);
+const fs = require('fs');
+const path = require('path');
+const express = require('express');
+const bodyParser = require('body-parser');
+const app = express();
+
+app.set('port', (process.env.PORT || 3000));
+
+app.use('/', express.static(path.join(__dirname, 'public')));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({extended: true}));
+
+app.use(function(req, res, next) {
+    res.setHeader('Access-Control-Allow-Origin', '*');
+    res.setHeader('Cache-Control', 'no-cache');
+    next();
+});
+
+app.post('/send-email', function(req, res) {
+
+  const name = req.body.event.data.new.name;
+  // setup e-mail data
+  const mailOptions = {
+      from: process.env.SENDER_ADDRESS, // sender address
+      to: process.env.RECEIVER_ADDRESS, // list of receivers
+      subject: 'A new user has registered', // Subject line
+      text: 'Hi, This is to notify that a new user has registered under the name of ' + name, // plaintext body
+      html: '<p>'+'Hi, This is to notify that a new user has registered under the name of ' + name + '</p>' // html body
+  };
+  // send mail with defined transport object
+  transporter.sendMail(mailOptions, function(error, info){
+      if(error){
+          return console.log(error);
+      }
+      console.log('Message sent: ' + info.response);
+      res.json({'success': true});
+  });
+
+});
+
+app.listen(app.get('port'), function() {
+  console.log('Server started on: ' + app.get('port'));
+});