Skip to content

feat: Add env template, update readme #1567

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
willum070 merged 3 commits into from
Jul 16, 2026
Merged

feat: Add env template, update readme #1567

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9de3ee1
Add .env.template and setup instructions
willum070 Jul 16, 2026
46c994b
docs: add code quality checks section to README.md
willum070 Jul 16, 2026
ca8c369
Merge branch 'main' into add-env-template
willum070 Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .env.template
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
GOOGLE_MAPS_API_KEY=<Insert your own development API key here>
33 changes: 33 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ Try the examples out at [Google Maps JavaScript API documentation](https://devel

Each example is one atomic unit, for which dependencies must be individually set up.

### Environment Setup

1. Copy the `.env.template` file to `.env`:
```bash
cp .env.template .env
```
2. Open `.env` and replace `<Insert your own development API key here>` with your Google Maps API key. The `.env` file is already added to `.gitignore` to prevent accidentally committing your key.

### Build samples

1. Run `npm i` to install dependencies. You only need to do this once, and
Expand All @@ -43,6 +51,31 @@ also contains a `dist/` folder, but this is only used by Vite for live preview.

- To test, navigate to project root and run `npx playwright test`. {# TODO: Expand this section. #}

### Code Quality Checks

This repository strictly enforces code formatting and best practices using ESLint, Prettier, and custom validation scripts.

#### Global Checks (`check-and-fix`)

You can automatically check and fix issues across **all** samples at once from the root directory:

```bash
npm run check-and-fix
```

This command will:
1. Run `eslint --fix` to catch and resolve JavaScript/TypeScript linting errors.
2. Run `prettier -w` to format all files (HTML, CSS, TS, JS, JSON) according to the repository's styling rules.
3. Run `tsc --noEmit` across all samples to verify TypeScript compilation passes.

#### Build-time Checks (`build-single.sh`)

When you build an individual sample using `npm run build`, the build is handled by `samples/build-single.sh`. This script enforces several Google Maps Platform best practices before compilation, including:
- Preventing synchronous `await google` calls in close proximity (suggesting `Promise.all()` instead).
- Verifying that `<script>` tags correctly reside inside `<head>` rather than `<body>`.
- Ensuring the inline bootstrap loader uses the correct format and does not use hardcoded API keys.
- Running Prettier, ESLint, and TSC specifically for that sample to ensure it meets quality standards.

## Contributing

Contributions are welcome! Please see [contributing](../docs/contributing.md) for more information.
Expand Down