Hello! 👋 This repo serves as an organization of some thoughts I've been having over the past few months regarding how I would like to structure certain types of client-side JavaScript applications.
The case study for this is using the Spotify API as a base service.
Here is a high level view of how this is structured across the client and server:
- create-react-app base template for the setup. Currently it is non-ejected.
- @reach/router routing
- react-copy-write state management
- typescript type system
- Spotify Web Playback SDK
- Node.js server platform
- GraphQL data transport
- Spotify API Spotify Web API
- typescript type system
- MongoDB database local
- mLab database cloud
Initially I had the environment variables stored in a .env file. After some more research, and wanting to have this setup to deploy to services such as now and reading 12factor, I moved them out and will load them into the environment manually on whichever platform. Below is a documentation of which environment variables this app uses.
DEBUG=false
PROD_HOST=http://localhost
DEV_HOST=http://localhost
PROD_PORT=3000
DEV_PORT=3004
SESSION_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_CLIENT_ID=XXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_CLIENT_SECRET=XXXXXXXXXXXXXXXXXXXXXXXXXXXXX
SPOTIFY_REDIRECT=/auth/callbackThis can be deployed using a service such as now:
git clone https://github.com/mjw56/spotify
cd spotify
now -e SESSION_SECRET="thisisasecret" -e SPOTIFY_CLIENT_ID=XXXXXXX -e SPOTIFY_CLIENT_SECRET=XXXXXXX -e SPOTIFY_REDIRECT=XXXXXXX -e JWT_SECRET="XXXXXXX" -e MONGO_DB_URI_PROD="XXXXXXX" -e JWT_ISSUER=XXXXXXX-e JWT_AUDIENCE=XXXXXXXvoila!
Happy Hacking!