How to set up development environment?

[leungbk]

@JakeMiki I encountered an issue that I'd like to fix, but have not figured out how to set up a development environment.

So far, I have

1. run npm i
2. run npm run start
3. registered a new Twitch application with the proper redirect_uri and filled out my .env file with the application's client_id
4. gone to localhost:3000 and clicked the Login with Twitch button, then Authorized the application when prompted
5. received an access_token

I am then stuck at the URI containing the access token (http://localhost:3000/twitch-clip-queue/auth#access_token=vd99yx186iyc7ajzo2yhh43zozj14o&scope=openid+chat%3Aread&state=%2F&token_type=bearer), with the index.html failing to render any of the React-generated elements.

In contrast, the deployed version on the JakeMiki GitHub page redirects to an index.html containing the React-generated elements after authorizing.

[leungbk]

I looked into this a bit more and noticed that on localhost, after I click Login with Twitch, the following eventually appears in the console:

No routes matched location "/twitch-clip-queue/auth#access_token=ojjvibng701rupzum4y4dfssujm6ui&scope=openid+chat%3Aread&state=%2F&token_type=bearer"

I suspect this is because this Route fails to match the path auth#access_token=[...]. I'm not sure why this problem occurs only on localhost and not on the deployed version, though.

[leungbk]

If it matters, my .env is

REACT_APP_TWITCH_CLIENT_ID=<my client id>
REACT_APP_TWITCH_REDIRECT_URI=http://localhost:3000/twitch-clip-queue/auth
REACT_APP_BASEPATH=/

REACT_APP_LOG_LEVEL=warn

[jakemiki]

It seems that I've made a mistake in the sample env file. Change REACT_APP_BASEPATH to /twitch-clip-queue/ and it should work, Let me know if that fixes the issue.

[leungbk]

Thanks, that did the trick!