Add comprehensive Getting Started guide to frontend README
This PR addresses issue #XXX by adding a comprehensive Getting Started section to the frontend README, making it easier for new contributors to set up and start developing with the Disfactory frontend.
What's Added
The new Getting Started section includes:
Prerequisites - Clear requirements for Node.js 16+, npm, and Git with helpful download links and version manager recommendations
Quick Start Guide - A streamlined 4-step process to get developers from zero to running:
- Clone the repository
- Install dependencies with
npm install - Set up environment variables using the provided
.env.example - Start the development server with
npm run serve
Available Scripts Table - Documentation of all npm commands with clear descriptions:
-
npm run serve- Development server with hot-reload -
npm run build- Production build -
npm run test- Unit tests -
npm run test:watch- Tests in watch mode -
npm run lint- Code linting -
npm run typecheck- TypeScript type checking
Project Structure - Visual overview of key directories (src/, docs/, public/) and their purposes
Development Environment - Summary of the tech stack including Vue.js 2.7, Vuetify 2.x, OpenLayers, TypeScript, and Jest
Troubleshooting Section - Practical solutions for common setup issues:
- Node.js version conflicts
- Port already in use errors
- Build and dependency problems
Contributing Guidelines - Step-by-step workflow for new contributors including branching, testing, and PR submission
Testing
All commands and instructions have been thoroughly tested to ensure they work correctly:
- ✅ Development server starts successfully on
http://localhost:8080 - ✅ Production build completes without errors
- ✅ All npm scripts execute as documented
- ✅ Environment setup process works end-to-end
The documentation maintains consistency with the existing structure while providing everything a new developer needs to quickly get started with the Disfactory frontend project.
Fixes Disfactory/frontend#70
✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.