diff --git a/README.md b/README.md index 12edc7cf..41ca962c 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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: @@ -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. diff --git a/frontend/package.json b/frontend/package.json index 8842e720..18052fc6 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -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", diff --git a/store/app/db.py b/store/app/db.py index 2aca899f..28a7d1e3 100644 --- a/store/app/db.py +++ b/store/app/db.py @@ -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: @@ -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}")