Skip to content

Commit

Permalink
readme updates + minor changes
Browse files Browse the repository at this point in the history
  • Loading branch information
codekansas committed Jun 10, 2024
1 parent 0d7f505 commit 5fd0f43
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 37 deletions.
91 changes: 56 additions & 35 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,51 +4,68 @@ This is the code for our online store. This is a simple store for buying and sel

## Development

> [!IMPORTANT]
> You **MUST** use `127.0.0.1:3000` instead of `localhost:3000` when developing the website. This is because those URLs are considered as distinct for the purposes of CORS, and `store/settings/configs/local.yaml` is configured only to support `127.0.0.1:3000`.
To get started developing:

To develop the application, start React and FastAPI in separate terminals:
1. Clone the repository
2. Install the React dependencies and create a `.env.local` file
3. Install the FastAPI dependencies
4. Start the Redis and DynamoDB databases
5. Initialize the test databases
6. Serve the FastAPI application
7. Serve the React frontend

### React
### Database

To install the React dependencies, use [nvm](https://github.com/nvm-sh/nvm) and [npm](https://www.npmjs.com/):
#### DynamoDB

When developing locally, use the `amazon/dynamodb-local` Docker image to run a local instance of DynamoDB:

```bash
cd frontend
nvm use 20.10.0
npm install
docker pull amazon/dynamodb-local # If you haven't already
docker run --name store-db -d -p 8000:8000 amazon/dynamodb-local # Start the container in the background
```

To serve the React frontend in development mode:
Then, if you need to kill the database, you can run:

```bash
npm start
docker kill store-db || true
docker rm store-db || true
```

To build the React frontend for production:
Initialize the test databases by running the creation script:

```bash
npm run build
python -m store.app.db create
```

To automatically rebuild the React frontend code when a file is changed:
##### Admin Panel

DynamoDB Admin is a GUI that allows you to visually see your tables and their entries. To install, run

```bash
npm run watch
npm i -g dynamodb-admin
```

To run code formatting:
To run, **source the same environment variables that you use for FastAPI** and then run

```bash
npm run format
dynamodb-admin
```

#### Environment Variables
#### Redis

You will need to set `REACT_APP_GOOGLE_CLIENT_ID`. To do this, first create a Google client id (see [this LogRocket post](https://blog.logrocket.com/guide-adding-google-login-react-app/)). Then create a `.env.local` file in the `frontend` directory and add the following line:
For Redis, use the `redis` Docker image:

```bash
docker pull redis # If you haven't already
docker run --name store-redis -d -p 6379:6379 redis # Start the container in the background
```
REACT_APP_GOOGLE_CLIENT_ID=your-client-id

Then, if you need to kill the database, you can run:

```bash
docker kill store-redis || true
docker rm store-redis || true
```

### FastAPI
Expand All @@ -74,9 +91,6 @@ Serve the FastAPI application in development mode:
fastapi dev 'store/app/main.py' --port 8080 # On port 8080 to avoid conflicts with Docker
```

> [!NOTE]
> You will need to run `npm run build` at least once in order to generate the static files in `frontend/build/static`.
#### Configuration

Settings for the app backend live in the `store/settings/` directory. You can use the following environment variables:
Expand All @@ -95,33 +109,40 @@ export AWS_SECRET_ACCESS_KEY=test
export REACT_APP_BACKEND_URL=http://127.0.0.1:8080
```

#### Database
### React

When developing locally, use the `amazon/dynamodb-local` Docker image to run a local instance of DynamoDB:
To install the React dependencies, use [nvm](https://github.com/nvm-sh/nvm) and [npm](https://www.npmjs.com/):

```bash
docker pull amazon/dynamodb-local # If you haven't already
docker run -d -p 8000:8000 amazon/dynamodb-local # Start the container in the background
cd frontend
nvm use 20.10.0
npm install
```

Initialize the test databases by running the creation script:
To serve the React frontend in development mode:

```bash
python -m store.app.db
npm start
```

### Miscellaneous
To build the React frontend for production:

#### DynamoDB Admin
```bash
npm run build
```

DynamoDB Admin is a GUI that allows you to visually see your tables and their entries. To install, run
To run code formatting:

```bash
npm i -g dynamodb-admin
npm run format
```

To run, **source the same environment variables that you use for FastAPI** and then run
#### Environment Variables

You will need to set `REACT_APP_GOOGLE_CLIENT_ID`. To do this, first create a Google client id (see [this LogRocket post](https://blog.logrocket.com/guide-adding-google-login-react-app/)). Then create a `.env.local` file in the `frontend` directory and add the following line:

```bash
dynamodb-admin
```
REACT_APP_GOOGLE_CLIENT_ID=your-client-id
```

Additionally, you should set `REACT_APP_BACKEND_URL` to the URL of the FastAPI backend. This should be `http://127.0.0.1:8080` when developing locally.
2 changes: 1 addition & 1 deletion frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
},
"type": "module",
"scripts": {
"start": "react-scripts start",
"start": "HOST=127.0.0.1 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
Expand Down
18 changes: 17 additions & 1 deletion store/app/db.py
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,23 @@ async def delete_tables(crud: Crud | None = None) -> None:
await crud._delete_dynamodb_table("Parts")


async def populate_with_dummy_data(crud: Crud | None = None) -> None:
"""Populates the database with dummy data.
Args:
crud: The top-level CRUD class.
"""
if crud is None:
async with Crud() as crud:
await populate_with_dummy_data(crud)

else:
raise NotImplementedError("This function is not yet implemented.")


async def main() -> None:
parser = argparse.ArgumentParser()
parser.add_argument("action", choices=["create", "delete"])
parser.add_argument("action", choices=["create", "delete", "populate"])
args = parser.parse_args()

async with Crud() as crud:
Expand All @@ -108,6 +122,8 @@ async def main() -> None:
await create_tables(crud)
case "delete":
await delete_tables(crud)
case "populate":
await populate_with_dummy_data(crud)
case _:
raise ValueError(f"Invalid action: {args.action}")

Expand Down

0 comments on commit 5fd0f43

Please sign in to comment.