Clarify dev environment setup

megalon commented 5 years ago

Platform

This feature request concerns:

[x] Client
[x] Server

Details

It's unclear how to properly get this project running in a dev environment. It would be helpful to show how to use the typescript dev compiler and then run the server and client locally.

Preferred Solution

Basic instructions for setting up the project should be included in the readme (or perhaps github wiki).

So far I've only been able to get the client webpage running, but not the server.

Steps I've attempted:

Download and install the latest versions of

yarn https://yarnpkg.com/en/
Docker Desktop https://www.docker.com/products/docker-desktop
VS Code https://code.visualstudio.com/ VS Code TSLint extension https://marketplace.visualstudio.com/items?itemName=eg2.tslint VS Code Prettier extension https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Project setup

Clone the beatsaver-reloaded project.
Install Node packages:
- Open a powershell window in the beatsaver-reloaded/client directory and run yarn to install required node packages.
- Open a powershell window in the beatsaver-reloaded/server directory and run yarn to install required node packages.

MongoDB Create a new mongo container in Docker for the mongodb. I followed these instructions: https://blog.jeremylikness.com/mongodb-on-windows-in-minutes-with-docker-3e412f076762 In short: In any powershell window, run docker volume create --name=beatsaverdev docker run --name mongodb -v beatsaverdev:/data/db -d -p 27017:27017 mongo

Attempt to setup server Copy beatsaver-reloaded/.env.example to beatsaver-reloaded/server/.env and fill it out.

Attempt to run the server by running node . in the powershell window that is in the beatsaver-reloaded/server directory. From here I'm stuck. Even if I set CACHE_DRIVER=none in the .env file, when I run the server it says:

PS D:\megalon-github\beatsaver-reloaded\server> node .
[6/11/2019] [6:29:42 AM] » ‼  warning   JWT Secret does not meet security recommendations!
[6/11/2019] [6:29:42 AM] » ‼  warning   Route caching is disabled! This is not recommended for production.
[6/11/2019] [6:29:42 AM] » ‼  warning   Enabling local CDN... Do not use this in production!
[6/11/2019] [6:29:42 AM] » ‼  warning   Running in development environment!
[6/11/2019] [6:29:42 AM] » i  info      Connected to MongoDB Instance
[6/11/2019] [6:29:43 AM] » ×  error     Failed to connect to Ratelimit KV Store

Then the server exits.

Run Client Running the client seems to work just fine. In the powershell window for the client directory, run yarn dev to start the typescript compiler and also serve the webpage locally. I see this in the console

PS D:\megalon-github\beatsaver-reloaded\client> yarn dev
yarn run v1.15.2
$ parcel ./src/index.html
Server running at http://localhost:1234
√  Built in 2.43s.

And visiting that URL shows the BeatSaver webpage as expected.

BaliBalo commented 5 years ago

I know it says it's optional but from what I've seen you need to be running Redis locally (required by the rate limiter). Install redis and simply run redis-server (or if you can't run it on the default port, redis-server --port YOUR_PORT and make sure to change the .env file accordingly). I was able to run the server that way (npm run watch + npm run dev:run).

I'm also hijacking this issue to add a quick note as it's somewhat related: if not too much work it would be great to have some dummy data somewhere that we could use to populate mongodb for dev environments.

luludotdev commented 5 years ago

In the future I'd like to have a full docs site (https://docs.beatsaver.com) that hosts information like this, API documentation etc. Since I'm pressed for time the contribution guide will have to do for now. It's not very hand-holdy and assumes developers are clever enough to figure out setup ;)

This would likely go on there.

n3tman commented 5 years ago

Please add a link to https://docs.beatsaver.com/ to the Readme since it can't be found anywhere except this issue.

Also I think it'll be nice to have a guide how to install the stack without Docker. I personally don't use it because it requires Hyper-V that stops Android emulators from working. Requiring Docker is a step down from previous approach where any developer could easily throw the files on any WAMP. So if you don't want to burn out and drop the project, making clear setup instructions is a must and not something you can just ignore by saying people should be "clever enough".

I assume all the sample data (e.g. beatmaps) is on that Docker image, right? Because this is how far I got with Laragon:

bs-local

luludotdev commented 5 years ago

I'm not adding official beatsaver links to this repo because I'm not associating myself with BeatSaver's operators for legal reasons.

luludotdev / beatsaver-reloaded