Indicate local development mode in UI
- Dominant language
- JavaScript
- Stars
- 19.4k
- Forks
- 3.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 9
Description
**Is your feature request related to a problem? Please describe.**
It isn't obvious when the the CMS is running in local development mode.
**Describe the solution you'd like**
From #2335, but exact approach is up for discussion:
This could change, but the UI will likely consist of a conspicuous switch in the top right corner, near the user avatar, perhaps showing green when live and red when local. To make local development mode more conspicuous, another indicator like a color bar and notice at screen top may also be added.
This switch will only be visible if local_backend is configured, which will happen by default only for users of the netlify-cms package.
It will probably happen often that a user hits the local development switch and the server isn't running. We should anticipate this by first ensuring the server is reachable when the switch is flipped, and if it isn't, switch back off and provide notification that the local development server isn't reachable.
**Additional context**
Epic: #3285
Contributor guide
Research direction
Start by reading the requirements in this issue and the related epic #3285, then review the existing UI around the top-right user avatar and the local_backend configuration. Define the indicator, server-reachability check, fallback notification, and completion criteria with maintainers before changing code.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100