Skip to content

Commit

Permalink
README and deployment guide cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
PicoCreator committed Jan 10, 2020
1 parent 21508d2 commit 3b5bbff
Show file tree
Hide file tree
Showing 4 changed files with 242 additions and 235 deletions.
43 changes: 43 additions & 0 deletions CODE-GUIDE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
# Code Guide
If you are interested to developing Inboxkitten, this is a brief guide of how Inboxkitten has been structured.

## Main Components
- API - that serves as the backbone to connect to MailGun
- UI - the user interface that you see on <a href="https://inboxkitten.com" target="_blank">Inboxkitten</a> that interacts with the API
- CLI - the command line tool that you can use to interact with the API

### API
Under the `api` folder is where all the code resides for the API component. The API component utilizes `axios` to perform its requests to Mailgun.

- The configuration settings of the API are all located under `config/`
- `mailgunConfig.js` is the configuration file that contains the keys and domains
- `mailgunConfig.sample.js` is the template that `./config.sh` used to write into `mailgunConfig.js`
- The rest of the code resides in `src/`.
- The main point of entry in an ExpressJS setup is at `app-setup.js`. In this file,
- `mailgunReader.js` contains the underlying code that connects to Mailgun
- the `api` folder will contain the code that performs the validation of the params in the endpoint that the user called before sending over to `mailgunReader.js`.
- The `test` folder contains the mocha test cases to check the `mailgunReader.js`.

To add any endpoints, it is recommended to create a prototype function in `mailgunReader.js` that performs the execution that connects to Mailgun. Following which, you should create the endpoint that user will be using as a new file under `src/api/` folder for easy maintenance.

### UI
The UI component code is under `ui` folder. It is constructed using Vue.js for its frontend development and `axios` to perform to requests to API component.

- The configuration settings of the UI are all located under `config/`
- `apiconfig.js` contains the configuration for connecting to API component as well as the domain to display on the UI.
- `apiconfig.sample.js` is the template used in `./config.sh` for writing into `apiconfig.js`
- The other configuration to be concerned would be the `shareConfig.js` where it is the settings for shareable features such as Twitter's tweeting and GitHub's fork.
- The other files are auto generated files by vue-cli.
- The `src` folder contains the body for UI. It is separated into 3 folders.
- The `assets` will contain the images.
- The `components` will contain the components used in the UI.
- The `router` is an auto generated file but it is used to add subpaths to link to the components.
- The `scss` contains the styling used for Inboxkitten's UI.
- The `dist` folder contains the files built using the `npm run build` command.
- The `uilicious-test` is an uilicious test script that can be ran on [test.uilicious.com](https://test.uilicious.com) to check if your email has been received properly.

The main entrypoint will be the `App.vue` and by default the Vue router will direct to `landingpage.vue`.


### CLI
The CLI is under the `cli` folder. There are only one file that performs the tasks to connect to the API component. It is `inboxkitten.go` under the `src` folder. The `go.sh` script is a custom go script that ensures the environment is within the `cli` folder.
97 changes: 97 additions & 0 deletions DEPLOY-GUIDE-LOCALHOST.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# Developing on localhost / Custom deployment

Note: You will still need to do the mail gun setup in the firebase guide.

Instead of running `./config.sh`, you should setup the config files respectively for the deployment.

## Running the api server

**Configuring : api/config/mailgunConfig.js**

```
module.exports = {
"apiKey" : "<MAILGUN_API_KEY>",
"emailDomain" : "<MAILGUN_EMAIL_DOMAIN>",
"corsOrigin" : "http://localhost:8000"
}
```

+ MAILGUN_API_KEY : Mailgun private api key
+ MAILGUN_EMAIL_DOMAIN : domain for mailgun
+ UI_HOST : Url to the UI domain. `http://localhost:8000` is the default for the UI `npm run dev`,

**Running the express.js API server**

```
# Assuming that you are on the root directory of Inboxkitten
$ cd api
# Start the server
$ npm start
```

Validate your API server is online at `http://localhost:8000/api/v1/mail/list?recipient=hello-world`

You should see an empty array representing an empty inbox.

## Running the ui server - in development mode

**Configuring ui/config/apiconfig.js**
```
export default {
apiUrl: 'http://localhost:8000/api/v1/mail',
domain: '<MAILGUN_EMAIL_DOMAIN>'
}
```

+ apiUrl : Api server to point to, `localhost:8000` is the default for the api server `npm start`
+ MAILGUN_EMAIL_DOMAIN : domain for mailgun

**Running the nodejs+webpack UI server**

```
# Assuming that you are on the root directory of Inboxkitten
$ cd ui
# If you do not have a http server, you can install one
$ npm run dev
```

You can now access it on `http://localhost:8000` and enjoy your kitten-ventures.

## Running cli

This is built using the `./build.sh` script

```
# Assuming that you are on the root directory of Inboxkitten
$ cd cli
# You can immediately execute the executable
$ ./bin/inboxkitten
# Retrieving list of email
$ ./bin/inboxkitten list exampleEmailName
# Retrieving individual email
$ ./bin/inboxkitten get sw eyJwIjpmYWxzZSwiayI6IjI3YzVkNmZkLTk5ZjQtNGY5MC1iYTM4LThiNDBhNTJmNzA1OCIsInMiOiI0NzFhZjYxYjA4IiwiYyI6InRhbmtiIn0=
# Target different api endpoint
$ ./bin/inboxkitten -api http://localhost:8000/api/v1 (list|get) [params]
```
To run without compilation of `inboxkitten.go` in the src/ folder
```
$ ./go.sh run src/inboxkitten.go
```

## Calling the API using curl
If you have your API running on port `8000`,
```
# Get list of email
$ curl localhost:8000/api/v1/mail/list\?recipient=hard-dust-64
# Get individual email
$ curl localhost:8000/api/v1/mail/list\?mailKey=se-eyJwIjpmYWxzZSwiayI6ImVlMWNiMTAzLWZhZjMtNDg3Ni04MjI2LWE1YmE1ZTU3YzMxMiIsInMiOiI3NTdhNTY5ZGFkIiwiYyI6InRhbmtiIn0=
```

If you have it hosted on the net, change the endpoint to where you have hosted it on :)
90 changes: 90 additions & 0 deletions DEPLOY-GUIDE-SERVERLESS.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
# Serverless Deployment Guide

Follow the 5 steps guide below to get started on Firebase!

- [Step 0 - Clone Me](#step-0---clone-me)
- [Step 1 - Setup Serverless provider](#step-1---mailgun--firebase-signup)
- [Step 2 - Configuration](#step-2---configuration)
- [Step 3 - Build the package](#step-3---build-the-package)
- [Step 4 - Deployment](#step-4---deployment)

> Also do let us know how we can help make this better 😺
## Step 0 - Clone Me

```
$ git clone https://github.com/uilicious/inboxkitten.git
```

### Step 1a - Setup Firebase

1. Go to <a href="https://firebase.google.com" target="_blank">Firebase</a> and click on `Get Started`.
2. Sign in with your favorite Google account.
3. Click on `Add Project` and create your own firebase inboxkitten project.
4. Remember the project ID

On your local machine where your InboxKitten is located at,
```
# Go to the root folder of InboxKitten
$ cd <the place where you clone your inboxkitten>
# Ensure that firebase CLI tool is installed
$ npm install -g firebase-tools
# Login to your firebase account
$ firebase login
# Set your firebase project
$ firebase use --add <project name that you remembered>
```

OR

### Step 1b - Setup Cloudflare Workers

1. Go to <a href="https://cloudflare.com" target="_blank">Cloudflare</a> and signup with a domain.
2. Setup cloudflare worker and get an API key
___

## Step 2 - Configuration

In the root directory of Inboxkitten, run the following command
```
$ ./config.sh
```

During the run time of `./config.sh`, there are three environment variables that is being used to set the configuration for your configuration files.

1. `MAILGUN_EMAIL_DOMAIN` - any custom domain that you owned or the default domain in Mailgun
2. `WEBSITE_DOMAIN` - any custom domain that you owned. If you use your default firebase url, it will be `<Your project>.firebaseapp.com`
3. `MAILGUN_API_KEY` - retrieve the api key from your Mailgun account

<img src="./assets/configuration.png" alt="configuration" width="500px"/>

___

## Step 3 - Build the package

```
$ ./build.sh
```

`./build.sh` will package the three components to be ready for deployment.

___

## Step 4 - Deployment

For API deployment on Firebase:

```
# Run the deployment script
$ ./deploy/firebase/deploy.sh
```

For API deployment on Cloudflare:

```
# Run the deployment script
$ ./deploy/cloudflare/deploy.sh
```
Loading

0 comments on commit 3b5bbff

Please sign in to comment.