Skip to content

Commit

Permalink
docs: add auth-backend setup docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@maxpatiiuk
maxpatiiuk committed Apr 14, 2024
1 parent 37a14b4 commit 644fef0
Show file tree
Hide file tree
Showing 3 changed files with 85 additions and 180 deletions.
93 changes: 11 additions & 82 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,13 @@ Features:

## Screenshots

Column chart:
[![Column chart](./docs/img/1.jpg)](https://youtu.be/FZ_468t033A)
Column chart: [![Column chart](./docs/img/1.jpg)](https://youtu.be/FZ_468t033A)

Time chart:
[![Time chart](./docs/img/2.png)](https://youtu.be/FZ_468t033A)
Time chart: [![Time chart](./docs/img/2.png)](https://youtu.be/FZ_468t033A)

Pie chart:
[![Pie chart](./docs/img/3.png)](https://youtu.be/FZ_468t033A)
Pie chart: [![Pie chart](./docs/img/3.png)](https://youtu.be/FZ_468t033A)

Settings:
[![Settings](./docs/img/4.png)](https://youtu.be/FZ_468t033A)
Settings: [![Settings](./docs/img/4.png)](https://youtu.be/FZ_468t033A)

Expanded time chart
[![Expanded time chart](./docs/img/5.png)](https://youtu.be/FZ_468t033A)
Expand All @@ -44,80 +40,13 @@ Editing the layout

## Local Installation

Pre-requisites:
1. Pre-requisites:

```
Node.js 18
Npm 8
```
```
Node.js 18
Npm 8
```

(Run all commands from the /src directory)
Install dependencies:
2. Complete installation steps in [./auth-backend](./auth-backend/)

```sh
npm install
```

## Running

Build the front-end for production:

```sh
npm run build
```

## Development

Start the watcher script which would rebuild the code on any changes:

```sh
npm run watch
```

Load unpacked extension into Chrome by [following the
instructions](https://webkul.com/blog/how-to-install-the-unpacked-extension-in-chrome/).

Note, on any code change, you will have to press the `Reload Extension` button
in the top left corner of Google Calendar in order to see the newest changes.

## React DevTools

You may have noticed that despite our app being built with React,
React DevTools browser extension does not work for debugging it.

Instead, a standalone React DevTools (an Electron app) needs to be
used. [Installation
Instructions](https://github.com/facebook/react/tree/main/packages/react-devtools#installation),

Note, this will only work for when WebPack is run in development mode
as we disabled react DevTools integration in production to reduce
bundle size.

## Testing

Unit tests are powered by Jest. Static Typechecking is powered by TypeScript.

You can run both like this:

```sh
npm test
```

or:

```sh
npm t
```

Alternatively, you can start Jest in watch mode:

```sh
npm run unitTests:watch
```

## Generating Docs

```sh
cd src
npm run docs
```
3. Complete installation steps in [./src](./src/)
63 changes: 33 additions & 30 deletions auth-backend/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,41 +8,44 @@ This backend is used to generate a more-persistent token.

## Installation

Clone this repository and open current folder:

```sh
git clone https://github.com/maxpatiiuk/calendar-plus
cd calendar-plus
cd auth-backend
```

Install dependencies:

```sh
npm install
```

## Deployment
1. Clone this repository and open current folder:

```sh
git clone https://github.com/maxpatiiuk/calendar-plus
cd calendar-plus
cd auth-backend
```

2. Create
[Google OAuth2 client](https://github.com/googleapis/google-api-nodejs-client?tab=readme-ov-file#oauth2-client)

- Create 2 clients - one for development, another for production
- Set type to "Web application"
- Set authorized redirect URI to `https://EXTENSION_ID.chromiumapp.org/`
(replace `EXTENSION_ID` with the extension ID)
- For development set:
- Authorized redirect URIs: `https://calendar-plus.patii.uk/api/route`
- For production set:
- Authorized JavaScript origins: set to domain on which `auth-backend` will
be hosted (`https://calendar-plus.patii.uk`)

3. Copy [./example.config.js](./example.config.js) into `./config.js` and fill
it in according to instructions in that file and the credentials you received
in the previous file. Fill it out with development credentials in
development, and production credentials when the app is deployed to Vercel.

4. Install dependencies:

```sh
npm install
```

### Development

1. Copy [./example.env.local](./example.env.local) into `.env.local` and fill it
in according to instructions in that file.
2. Run `npm install`
3. Run `npm run dev` to start the development server
4. The server will be accessible on the `http://localhost:3000` address.

Note, if you try to open this URL in the browser, you will see a 405 error -
that is expected, as the server only accepts POST requests.

Copy this URL as it will be needed later.
1. Run `npm run dev` to start the development server

### Production

1. Create new vercel.com project from this repository
2. Change the "Root Directory" setting to current directory
(/packages/cors-auth-middleware)
3. Set up the environmental variables according to the instructions in the
`example.env.local` file
4. Keep note of the URL at which the project is deployed - you will need it
later
(/packages/auth-backend)
109 changes: 41 additions & 68 deletions src/README.md
View file
Original file line number Diff line number Diff line change
@@ -1,91 +1,64 @@
# Getting Started with Create React App
# Calendar Plus extension

This project was bootstrapped with
[Create React App](https://github.com/facebook/create-react-app).
## Installation

## Available Scripts
Install dependencies:

In the src directory of the project, you can run:
```sh
npm install
```

### `npm start`
## Running

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
Build the front-end for production:

The page will reload when you make changes.\
You may also see any lint errors in the console.
```sh
npm run build
```

### `npm test`
## Development

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests)
for more information.
Start the watcher script which would rebuild the code on any changes:

### `npm run build`
```sh
npm run watch
```

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best
performance.
Load unpacked extension into Chrome by
[following the instructions](https://webkul.com/blog/how-to-install-the-unpacked-extension-in-chrome/).

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
Note, on any code change, you will have to press the `Reload Extension` button
in the top left corner of Google Calendar in order to see the newest changes.

See the section about
[deployment](https://facebook.github.io/create-react-app/docs/deployment) for
more information.
## React DevTools

### `npm run eject`
You may have noticed that despite our app being built with React, React DevTools
browser extension does not work for debugging it.

**Note: this is a one-way operation. Once you `eject`, you can't go back!**
Instead, a standalone React DevTools (an Electron app) needs to be used.
[Installation Instructions](https://github.com/facebook/react/tree/main/packages/react-devtools#installation),

If you aren't satisfied with the build tool and configuration choices, you can
`eject` at any time. This command will remove the single build dependency from
your project.
Note, this will only work for when WebPack is run in development mode as we
disabled react DevTools integration in production to reduce bundle size.

Instead, it will copy all the configuration files and the transitive
dependencies (webpack, Babel, ESLint, etc) right into your project so you have
full control over them. All of the commands except `eject` will still work, but
they will point to the copied scripts so you can tweak them. At this point
you're on your own.
## Testing

You don't have to ever use `eject`. The curated feature set is suitable for
small and middle deployments, and you shouldn't feel obligated to use this
feature. However we understand that this tool wouldn't be useful if you couldn't
customize it when you are ready for it.
Unit tests are powered by Jest. Static Typechecking is powered by TypeScript.

## Learn More
You can run both like this:

You can learn more in the
[Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
```sh
npm test
```

To learn React, check out the [React documentation](https://reactjs.org/).
or:

### Code Splitting
```sh
npm t
```

This section has moved here:
[https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
Alternatively, you can start Jest in watch mode:

### Analyzing the Bundle Size

This section has moved here:
[https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here:
[https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here:
[https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here:
[https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here:
[https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
```sh
npm run unitTests:watch
```

0 comments on commit 644fef0

Please sign in to comment.