bungie api react scaffold/template/tutorial/whatever

this example of bungie api use in react, explains a few bapi NPM modules and demonstrates their use.

what this doesn't do is teach react. in fact it makes one or two bad-ish react decisions, like using useEffect instead of a smarter way of loading async data. more helper functions for that coming soon.

this is ultimately meant for someone who knows, or is willing to learn from somewhere else, react.

or you can just fiddle with it and customize it a tiny piece at a time :)

easy steps

clone, or download & unzip, this repo
npm install
configure your BUNGIE_APP_INFO in vite.config.ts (using info found at https://www.bungie.net/en/Application)
optionally, configure your app for OAuth at https://www.bungie.net/en/Application
- OAuth Client Type
  - Public or Confidential. Confidential preferred.
- Redirect URL
  - https://localhost:5173/ by default
- Scope
  - Read your Destiny 2 information
- Origin Header
  - https://localhost:5173 by default
npm run dev

from scratch steps

npm create vite@latest
- give it a name
- React
- Typescript
cd to your new app directory
npm install @d2api/httpclient @d2api/manifest-react @d2api/manifest-web @d2api/oauth-react @types/node @vitejs/plugin-basic-ssl bungie-api-ts
add this to src/vite-env.d.ts

declare const BUNGIE_APP_INFO: {
  api_key: string;
  client_id: string;
  client_secret: string;
};

set isolatedModules to false in tsconfig.json. fuck isolatedModules.
overwrite src/App.tsx with the one in this repo
make your vite.config.ts look like this one
configure your BUNGIE_APP_INFO in vite.config.ts (using info found at https://www.bungie.net/en/Application)
optionally, configure your app for OAuth at https://www.bungie.net/en/Application
- OAuth Client Type
  - Public or Confidential. Confidential preferred.
- Redirect URL
  - https://localhost:5173/ by default
- Scope
  - Read your Destiny 2 information
- Origin Header
  - https://localhost:5173 by default
npm run dev

⚠️ :) at some point vscode may start to complain :) ⚠️
because it's still using its outdated typescript 4.
ctrl+shift+p, "select typescript version", use workspace version.

original vite README below, regarding this base app template:

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

   parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
   },

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

nev-r/bungie-api-scaffold

bungie api react scaffold/template/tutorial/whatever

React + TypeScript + Vite

Expanding the ESLint configuration