This a Vue 3 application that is developed and built with Vite and is deployed as a static website to AWS S3.
node
^14.0.0
to run and deploy the appnpm
to install app dependenciesngrok
or equivalent for http tunnelingnvm
(optional) to install the project’s recommended node versionaws
(optional) for deploying to an AWS account
- Create an app in the Spotify Developer Console
- Create a file in the project’s root –
.env.local
:
VITE_SPOTIFY_CLIENT_ID=<your client id>
- Run
npm install
- Run
npm run dev
- Use an http tunnel such as
ngrok
to expose your localhost port (probably 3000), for example,ngrok http 3000
- Take the HTTP URL it tunnels to and add it as a ‘Redirect URI’ in your Spotify app, appending the path
/auth
. - Navigate to the tunnel’s URL in your browser
- Authenticate your
aws
cli to point to the account and region you would like to deploy to (I usedap-southeast-2
) - Optionally set or pass override env variables to the following command (
STACK_NAME=my-stack
,BUCKET_NAME=my-unique-bucket
) - Run
npm run deploy
- Navigate your browser to
http://<BUCKET_NAME>.s3-website-<your aws region>.amazonaws.com/
Note: after the stack is initialised, subsequent deployments take around 5 seconds.
- Fix the
eslint
config so that my code is more consistently formatted - Add a view that communicates to the user that they need to log in first, rather than simply redirecting
- Use the Spotify Web Player API to preview tracks on hover
- Make longer track/artist names easier to read
- Add infinite scrolling & paging to the lists
- Add internationalisation and region settings so it works for non-NZ or non-English-speakers
- Add Spotify links to items