Skip to content

Commit 2c1268e

Browse files
anijitsaoanijitsao
authored
Merge pull request #1 from anijitsao/dev
Dev
2 parents 58d738c + 17b2ab2 commit 2c1268e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

58 files changed

+3983
-10016
lines changed

‎README.md

Lines changed: 106 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,114 @@
1-
# simple-apollo-server-graphql-lambda
2-
Simple [GraphQL](https://graphql.org/) APIs implementation using [Node JS](https://nodejs.org/en/docs/) and [AWS Lambda](https://aws.amazon.com/lambda/) with [Apollo Server](https://www.apollographql.com/docs/apollo-server/) and [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
1+
# react-app-simple-book-search-graphql
32

4-
This example illustrates how to deploy [GraphQL](https://graphql.org/) APIs using [NodeJS](https://nodejs.org/en/docs/) functions running on [AWS Lambda](https://aws.amazon.com/lambda/) using the traditional [Serverless](https://www.serverless.com/framework/docs/providers/aws/guide/intro) Framework. The deployed functions work with [MongoDB Atlas](https://www.mongodb.com/docs/atlas/).
3+
A Simple Book Search Application using [React JS](https://reactjs.org/docs/getting-started.html), a JavaScript library to make awesome UI by Facebook, [Node JS](https://nodejs.org/en/docs) with [AWS Lambda](https://aws.amazon.com/lambda/) and [MongoDB](https://docs.mongodb.com/). To connect with the Backend [GraphQL](https://graphql.org/) is used with the framework [Apollo Client](https://www.apollographql.com/docs/react/) where the [Apollo Server](https://www.apollographql.com/docs/apollo-server/) is used to implement GraphQL Server.
54

6-
To work with [GraphQL](https://graphql.org/) features, i.e. **Type Definitions, Mutations, Queries, Resolvers** the framework [Apollo Server](https://www.apollographql.com/docs/apollo-server/) is used.
5+
This application uses [React JS](https://reactjs.org/docs/getting-started.html) component oriented UI creation paradigm. All components are written in [JSX](https://reactjs.org/docs/jsx-in-depth.html) and ES6 style and are combined to get a single build for production purpose using [Webpack 5](https://webpack.js.org/concepts/).
76

8-
This Example works with [AWS HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop.html) events i.e. `httpApi`. All *logs* for the function is kept in [AWS Cloudwatch](https://aws.amazon.com/cloudwatch/) i.e *persistent*.
9-
10-
For *session tracking* [JSON Web Token (JWT)](https://jwt.io/) is used.
7+
ES6 `module` along with [JSX Components](https://reactjs.org/docs/jsx-in-depth.html) is used. [Babel](https://babeljs.io/docs/en/babel-preset-react) is used to _transpile_ all [JSX](https://reactjs.org/docs/jsx-in-depth.html) code to vanilla JavaScript code. For UI creation [HTML5](https://www.w3schools.com/html/html5_intro.asp) and [CSS3](https://www.w3schools.com/css/) are used.
118

12-
To use the code in this example you **must** have an valid [AWS account](https://aws.amazon.com/account/) and necessary [AWS IAM](https://aws.amazon.com/iam/) roles and programmatic access to an user. You **must** have a [MongoDB Atlas](https://www.mongodb.com/docs/atlas/) account.
9+
This is a _responsive web application_ for viewing in both Mobile and Desktop.
1310

14-
**This application is closely related to [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react). For Frontend deployment please check the repo [simple-book-search-react](https://github.com/anijitsahu/simple-book-search-react)**
11+
Back end is implemented using [Node JS](https://nodejs.org/en/docs) with [Apollo Server](https://www.apollographql.com/docs/apollo-server/) and [MongoDB](https://docs.mongodb.com/). [Atlas](https://www.mongodb.com/cloud/atlas), the _Cloud_ version of [MongoDB](https://docs.mongodb.com/) is used.
1512

13+
**This Application uses standalone GraphQL Server. For Backend Deployment with AWS Lambda details please check [aws-lambda branch](https://github.com/anijitsao/simple-apollo-server-graphql/tree/aws-lambda).**
1614

1715
## Features
18-
1. [AWS Lambda](https://aws.amazon.com/lambda/) function using [NodeJS](https://nodejs.org/en/docs/)
19-
2. Function is using latest version of [AWS SDK JavaScript v3](https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/welcome.html) with all **ES6+** syntaxes like Promises, `async/await`
20-
21-
<ol start="3">
22-
<li>
23-
Function are deployed using <a href="https://www.serverless.com/framework/docs/providers/aws/guide/intro">Serverless</a> Framework.
24-
</li>
25-
<li>
26-
<code>serverless.json</code> is used for deployment configuration instead of <code>serverless.yml</code>.
27-
</li>
28-
<li>
29-
All the deployment is created in <a href="https://aws.amazon.com/s3/">AWS S3</a> to store the <code>.zip</code> of the function code and <a href="https://aws.amazon.com/cloudformation/">AWS CloudFormation</a> Stack.
30-
</li>
31-
</ol>
32-
33-
34-
6. For **session tracking** [JWT](https://jwt.io/) is used.
35-
7. [AWS HTTP API](https://docs.aws.amazon.com/apigateway/latest/developerguide/http-api-develop.html) are using [AWS API GateWay](https://aws.amazon.com/api-gateway/)
36-
37-
<ol start="8">
38-
<li> All data is saved in <a href="https://www.mongodb.com/docs/atlas/">MongoDB Atlas</a> i.e. <i>persistent</i>
39-
<!--- <li> <strong>Caching</strong> is used for faster response in the APIs. <a href="https://redis.io/">Redis</a> is used for that purpose</li> -->
40-
<li> This APIs can also be consumed by any <b>Frontend Application</b>.</li>
41-
<li> To use <a href="https://graphql.org/">GraphQL</a> features <a href="https://www.apollographql.com/docs/apollo-server/">Apollo Server</a> is used
42-
<li> For the <i>Schema</i> generation <b>Type Definitions</b> are added. <b>Queries</b> are used for the <i>Reading</i> operations while <b>Mutations</b> are added for <i>Mutable</i> operations.
43-
</ol>
4416

17+
1. Code is rewritten with latest version of [React JS](https://reactjs.org/docs/getting-started.html) and [Node JS](https://nodejs.org/en/docs/).
18+
2. Latest features of JavaScript i.e. ESNext is used.
4519

20+
<br/>
4621

47-
12. [NPM](https://www.npmjs.com/) dependencies are used for various purposes.
22+
<ol start=3>
23+
<li> This is Simple Book Search Application. It is a <b>CRUD</b> application. </li>
24+
<li> It is a Full Stack Application with <b>Standalone GraphQL Server</b>. For the <b>Backend with AWS Lambda</b> please check the <a href="https://github.com/anijitsao/simple-apollo-server-graphql/tree/aws-lambda">aws-lambda branch</a>.</li>
25+
</ol>
4826

27+
5. All the book details, authors and publication detils are stored in the [MongoDB Atlas](https://www.mongodb.com/cloud/atlas). This is a _free/ shared_ account on [Atlas](https://www.mongodb.com/cloud/atlas). **So Please use it wisely**.
4928

50-
## Usage
29+
<ol start=6>
30+
<li>Login feature is added. </li>
31+
<li>Error will be shown if the credentials are not correct or Network is <i>not</i> present.</li>
32+
<li> <b>Session tracking</b> is supported using <a href="https://https://jwt.io/">JSON Web Tokens (JWT).</a>
33+
<li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage">LocalStorage</a> is used to save the <a href="https://https://jwt.io/">JSON Web Tokens (JWT)</a>.</li>
34+
<li> To implement the features of <a href="https://graphql.org/">GraphQL</a> like <b>Queries, Mutations</b> the framework <a href="https://www.apollographql.com/docs/react/">Apollo Client</a> is used in <i>Client</i> side. </li>
35+
</ol>
5136

52-
First clone the repo
37+
11. _for simplicity passwords are not encrypted_
38+
39+
<ol start="12">
40+
<li> To use <a href="https://graphql.org/">GraphQL</a> features in <b>Server side</b> <a href="https://www.apollographql.com/docs/apollo-server/">Apollo Server</a> is used
41+
<li> For the <i>Schema</i> generation <b>Type Definitions</b> are added. <b>Queries</b> are used for the <i>Reading</i> operations while <b>Mutations</b> are added for <i>Mutable</i> operations.
42+
</ol>
43+
44+
## Installation
45+
46+
Clone the repository:
5347

5448
```bash
55-
$ git clone https://github.com/anijitsao/simple-apollo-server-graphql.git
49+
$ git clone https://github.com/anijitsao/react-app-simple-book-search-graphql.git
5650
```
57-
Install all the necessary dependencies by going inside the directory
51+
52+
Navigate inside the directory:
5853

5954
```bash
60-
# Navigating inside the directory
61-
$ cd simple-apollo-server-graphql
55+
$ cd react-app-simple-book-search-graphql
56+
```
57+
58+
Install all the necessary dependecies and run the **client side** of the application
6259

63-
# To install all the necessary dependencies
60+
```bash
6461
$ npm install
65-
```
6662

63+
# To serve the application we use a npm module named http-server
64+
$ npm run client-start
65+
```
6766

68-
### Deployment
67+
Now open **Another Terminal** and navigate to the same directory and run the **GraphQL Server**
6968

70-
In order to deploy the example, you need to run the following command:
69+
```bash
70+
$ cd /path/to/react-app-simple-book-search-graphql
7171

72-
```
73-
$ serverless deploy
72+
# Run the GraphQL Server
73+
$ npm run server-start
7474
```
7575

76-
### Invocation
76+
### Login to book search
7777

78-
After successful deployment, you can invoke the deployed **functions / resolvers**.
78+
---
7979

80-
However, to call using [GraphQL](https://graphql.org/) API you can use any *supported* Client like [Altair GraphQL Client](https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja?hl=en) with the `url` and *HTTP Verbs* as shown in Terminal after using `serverless deploy`.
80+
1. Open web browser and type`http://localhost:8080` in the address bar to load the application
81+
2. Now login with username `admin` and password `admin123`
82+
83+
**Test users**
84+
85+
| Username | Password |
86+
| -------- | -------- |
87+
| admin | admin123 |
88+
89+
_tested with latest versions of <img src="screenshots/chrome.png" width="20px" title="Google Chrome">[Google Chrome](https://www.google.com/chrome/) and <img src="screenshots/firefox.png" width="25px" title="Firefox">[Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)_
90+
91+
However, to _test_ [GraphQL](https://graphql.org/) API you can use any _supported_ Client like [Apollo Sandbox](https://studio.apollographql.com/sandbox/explorer/?_gl=1%2Abuieem%2A_ga%2AMjAyNTg2NTkxOC4xNjc5OTg3MzI4%2A_ga_0BGG5V2W2K%2AMTY3OTk4NzMyOC4xLjEuMTY3OTk4NzM0NS4wLjAuMA..) with the `url` and _HTTP Verbs_ as shown in Terminal.
8192

8293
## API Listing
8394

8495
API listing is given below, -
8596

86-
**POST** /url-of-the-deployed-lambda/graphql
97+
All APIs have common endpoint as following.
8798

88-
Following username and password is valid
99+
**POST** /url-of-the-deployed-service/graphql (for `localhost` it will be `http://localhost:4000/graphql`)
89100

90-
|Username | Password |
91-
|---|---|
92-
|admin | admin123 |
101+
Following _Queries_ use the same URL mentioned above
93102

94103
```javascript
95104
query CreateTokenQuery{
96105
// these are the only possible username and password
97-
createToken(username: "admin", password: "admin123") {
106+
createToken(username: "admin", password: "admin123") {
98107
token
99108
}
100109
}
101110
```
102111

103-
**GET** /url-of-the-deployed-lambda/graphql
104-
105-
Following *Queries* use the same URL mentioned above
106-
107112
```javascript
108113
query HelloQuery {
109114
hello
@@ -130,9 +135,7 @@ query FindAllAuthors{
130135
}
131136
```
132137

133-
**POST** /url-of-the-deployed-lambda/graphql
134-
135-
Following *Mutations* have the same URL mentioned above
138+
Following _Mutations_ have the same URL mentioned above
136139

137140
```javascript
138141
mutation ModifyCount {
@@ -163,15 +166,13 @@ mutation UpdateBookMutation($updateId: ID!, $bookData: UpdataBookParams!) {
163166
// variables
164167
{
165168
"updateId": "id-of-the-book-to-update",
166-
"bookData": {
169+
"bookData": {
167170
"name": "You Don't Know ES6"
168171
}
169172
}
170173
```
171174

172-
**POST** /url-of-the-deployed-lambda/graphql
173-
174-
Following **Author** related *Mutations* have the same URL mentioned above
175+
Following **Author** related _Mutations_ have the same URL mentioned above
175176

176177
```javascript
177178
mutation AddAuthorMutation {
@@ -199,10 +200,46 @@ mutation UpdateAuthorMutation(
199200
// variables
200201
{
201202
"updateId": "id-of-the-author-to-update",
202-
"authorData": {
203+
"authorData": {
203204
"firstName": "Agatha",
204205
"lastName": "Christie",
205206
"country": "United Kingdom"
206207
}
207208
}
208209
```
210+
211+
## Screenshots
212+
213+
Some screens of the application is given below for better understanding.
214+
215+
Desktop as well as Mobile version of the screenshots are given side by side.
216+
217+
<p> Login Screen <br/>
218+
<img src="screenshots/desktop 1.png" width="590px" title="Login screen"/>
219+
<img src="screenshots/mobile 1.png" width="190px" title="Login screen"/>
220+
</p>
221+
222+
<p> If credentials are not correct <br/>
223+
<img src="screenshots/desktop 2.png" width="590px" title="Entering credentials screen"/>
224+
<img src="screenshots/mobile 2.png" width="190px" title="Entering credentials screen"/>
225+
</p>
226+
227+
<p> After submitting credentials and Search a book <br/>
228+
<img src="screenshots/desktop 3.png" width="590px" title="After submitting credentials screen"/>
229+
<img src="screenshots/mobile 3.png" width="190px" title="After submitting credentials screen"/>
230+
</p>
231+
232+
<p> Add a Book <br/>
233+
<img src="screenshots/desktop 4.png" width="590px" title="If credentials are not correct screen"/>
234+
<img src="screenshots/mobile 4.png" width="190px" title="If credentials are not correct screen"/>
235+
</p>
236+
237+
<p> Edit a Book <br/>
238+
<img src="screenshots/desktop 5.png" width="590px" title="After a successful login screen"/>
239+
<img src="screenshots/mobile 5.png" width="190px" title="After a successful login screen"/>
240+
</p>
241+
242+
<p> Delete a Book <br/>
243+
<img src="screenshots/desktop 6.png" width="590px" title="When a new user joins screen"/>
244+
<img src="screenshots/mobile 6.png" width="190px" title="When a new user joins screen"/>
245+
</p>

0 commit comments

Comments
 (0)