57 lines
2.5 KiB
Markdown
57 lines
2.5 KiB
Markdown
# JamKazam new react frontend UI/UX
|
|
|
|
`jam-ui` is a react app created using `create-react-app` utility. to run the app on your development environment you need to `cd jam-ui` and run `npm run start`
|
|
|
|
The changes to the source files are auto-loaded but sometimes you might need to force close it by crtl+c and then start manually.
|
|
|
|
The application files goes under `src` and the react components are placed under `src/components` directory. We have a convention of naming the files using JK prefix in the filename. For example `JKMusicSessions`.
|
|
|
|
The routes are defined in `jam-ui/src/components/dashboard/JKDashboardMain.js`
|
|
|
|
|
|
## Running react app
|
|
|
|
In production this React app is supposed to run on beta.jamkazam.com subdomain which is same origin domain to the production Rails app (www.jamkazam.com). This way we utilize same session based user authentication of Rails web app for authenticating users. (It looks for remember_token session cookie in headers and if it is not availale redirect the user to Rails web app sign in page)
|
|
|
|
The DOMAIN and PORT running this app is defined in env.production file. This file also has env variables for connecting with Rails app. (When setting up in development you can copy the content of env.development.example in to env.development.local and change them according to your host setup)
|
|
|
|
HOST=beta.jamkazam.local
|
|
PORT=4000
|
|
REACT_APP_CLIENT_BASE_URL=http://www.jamkazam.local:3000
|
|
REACT_APP_API_BASE_URL=http://www.jamkazam.local:3000/api
|
|
|
|
## Subdomains setup (development)
|
|
|
|
You need 2 host records created for React and and Rails app. For example
|
|
|
|
127.0.0.1 www.jamkazam.local #for Rails app
|
|
127.0.0.1 beta.jamkazam.local #for React app
|
|
|
|
## Installing npm dependencies
|
|
cd jam-ui
|
|
npm install
|
|
|
|
## Running the app
|
|
|
|
cd jam-ui
|
|
npm run start
|
|
|
|
This will open it in a borwser window at http://beta.jamkazam.local:3000. Of course for it to work you also need Rails (web) app and websocket app (websocket-gateway) running.
|
|
|
|
## Working with JamTracks
|
|
|
|
if you have the latest from develop, you can go:
|
|
```
|
|
cd cicd
|
|
npm install
|
|
./export_personal_jamtracks.sh
|
|
./generate.js
|
|
open http://beta.jamkazam.local:4000/backing-tracks/ac-dc/back-in-black.html
|
|
```
|
|
|
|
You can also do none of the above, and go straight to:
|
|
http://beta.jamkazam.local:4000/public/backing-tracks/ac-dc/back-in-black
|
|
|
|
I tried to make it so the SPA has 'secret routes' to these pages, which is convenient for us dev & testing
|
|
but also tried to make it convenient to run the cicd approach of actually generating separate pages for each landing page (which is what those 5 steps cover)
|