Skip to content

Commit 8e4c7e7

Browse files
Copilotmarkcoleman
Copilot
and
markcoleman
committed
Add ESLint, environment configs, and fix tests
Co-authored-by: markcoleman <[email protected]>
1 parent bf14e30 commit 8e4c7e7

File tree

10 files changed

+2585
-132
lines changed

10 files changed

+2585
-132
lines changed

‎CONTRIBUTING.md‎

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
# Contributing to Grafana-banana
2+
3+
Thank you for your interest in contributing to Grafana-banana! This document provides guidelines and instructions for setting up your development environment.
4+
5+
## Prerequisites
6+
7+
- [.NET 9 SDK](https://dotnet.microsoft.com/download/dotnet/9.0)
8+
- [Node.js 20+](https://nodejs.org/)
9+
- [Git](https://git-scm.com/)
10+
- [Visual Studio Code](https://code.visualstudio.com/) (recommended)
11+
12+
## Getting Started
13+
14+
### Option 1: Using DevContainer (Recommended)
15+
16+
The easiest way to get started is using the provided DevContainer:
17+
18+
1. Install [Docker Desktop](https://www.docker.com/products/docker-desktop)
19+
2. Install the [Dev Containers extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers) for VS Code
20+
3. Clone the repository:
21+
```bash
22+
git clone https://github.com/markcoleman/Grafana-banana.git
23+
cd Grafana-banana
24+
```
25+
4. Open the project in VS Code
26+
5. Press `F1` and select "Dev Containers: Reopen in Container"
27+
6. Wait for the container to build and start
28+
29+
The DevContainer will automatically:
30+
- Install .NET 9 SDK
31+
- Install Node.js 20
32+
- Install all dependencies
33+
- Configure VS Code with recommended extensions
34+
35+
### Option 2: Local Setup
36+
37+
If you prefer to work locally:
38+
39+
1. Clone the repository:
40+
```bash
41+
git clone https://github.com/markcoleman/Grafana-banana.git
42+
cd Grafana-banana
43+
```
44+
45+
2. Install backend dependencies:
46+
```bash
47+
cd backend/GrafanaBanana.Api
48+
dotnet restore
49+
```
50+
51+
3. Install frontend dependencies:
52+
```bash
53+
cd ../../frontend
54+
npm install
55+
```
56+
57+
## Running the Application
58+
59+
### Running Backend and Frontend Separately
60+
61+
**Terminal 1 - Backend:**
62+
```bash
63+
./start-backend.sh
64+
# Or manually:
65+
cd backend/GrafanaBanana.Api
66+
dotnet run
67+
```
68+
69+
The API will be available at http://localhost:5000
70+
71+
**Terminal 2 - Frontend:**
72+
```bash
73+
./start-frontend.sh
74+
# Or manually:
75+
cd frontend
76+
npm start
77+
```
78+
79+
The frontend will be available at http://localhost:4200
80+
81+
### Running Both Together
82+
83+
You can use two terminal windows/tabs to run both services simultaneously. The frontend will automatically connect to the backend API.
84+
85+
## Development Workflow
86+
87+
### Making Changes
88+
89+
1. Create a new branch:
90+
```bash
91+
git checkout -b feature/your-feature-name
92+
```
93+
94+
2. Make your changes to the code
95+
96+
3. Test your changes:
97+
```bash
98+
# Backend tests
99+
cd backend/GrafanaBanana.Api
100+
dotnet test
101+
102+
# Frontend tests
103+
cd frontend
104+
npm test
105+
```
106+
107+
4. Build to ensure everything compiles:
108+
```bash
109+
# Backend
110+
cd backend/GrafanaBanana.Api
111+
dotnet build
112+
113+
# Frontend
114+
cd frontend
115+
npm run build
116+
```
117+
118+
5. Commit your changes:
119+
```bash
120+
git add .
121+
git commit -m "Description of your changes"
122+
```
123+
124+
6. Push to GitHub:
125+
```bash
126+
git push origin feature/your-feature-name
127+
```
128+
129+
7. Create a Pull Request on GitHub
130+
131+
## Code Style
132+
133+
### Backend (.NET)
134+
135+
- Follow standard C# naming conventions
136+
- Use meaningful variable and method names
137+
- Add XML documentation comments for public APIs
138+
- Keep methods small and focused
139+
140+
### Frontend (Angular)
141+
142+
- Follow [Angular Style Guide](https://angular.io/guide/styleguide)
143+
- Use TypeScript strict mode
144+
- Write component tests for new features
145+
- Keep components focused on a single responsibility
146+
147+
## Testing
148+
149+
### Backend Tests
150+
151+
```bash
152+
cd backend/GrafanaBanana.Api
153+
dotnet test
154+
```
155+
156+
### Frontend Tests
157+
158+
```bash
159+
cd frontend
160+
161+
# Run tests once
162+
npm test -- --watch=false --browsers=ChromeHeadless
163+
164+
# Run tests in watch mode
165+
npm test
166+
167+
# Run linting
168+
npm run lint
169+
```
170+
171+
## Building for Production
172+
173+
### Backend
174+
175+
```bash
176+
cd backend/GrafanaBanana.Api
177+
dotnet build --configuration Release
178+
dotnet publish --configuration Release --output ./publish
179+
```
180+
181+
### Frontend
182+
183+
```bash
184+
cd frontend
185+
npm run build
186+
```
187+
188+
The production build will be in `frontend/dist/frontend`
189+
190+
## Continuous Integration
191+
192+
This project uses GitHub Actions for CI/CD. Every push and pull request will:
193+
194+
1. Build the .NET API
195+
2. Run backend tests
196+
3. Build the Angular frontend
197+
4. Run frontend linting
198+
5. Run frontend tests
199+
200+
Make sure all checks pass before merging your pull request.
201+
202+
## Project Structure
203+
204+
```
205+
Grafana-banana/
206+
├── .devcontainer/ # DevContainer configuration
207+
│ └── devcontainer.json
208+
├── .github/
209+
│ └── workflows/ # GitHub Actions CI/CD
210+
│ └── ci.yml
211+
├── backend/
212+
│ └── GrafanaBanana.Api/ # .NET Web API
213+
│ ├── Program.cs # Main entry point
214+
│ ├── Properties/
215+
│ └── appsettings.json
216+
├── frontend/ # Angular application
217+
│ ├── src/
218+
│ │ ├── app/ # App components
219+
│ │ └── environments/ # Environment configs
220+
│ ├── angular.json # Angular configuration
221+
│ └── package.json # npm dependencies
222+
├── start-backend.sh # Helper script for backend
223+
├── start-frontend.sh # Helper script for frontend
224+
└── README.md
225+
```
226+
227+
## Need Help?
228+
229+
- Check the [README.md](README.md) for general information
230+
- Review existing issues on GitHub
231+
- Create a new issue if you find a bug or have a feature request
232+
233+
## License
234+
235+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎frontend/angular.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,8 +85,22 @@
8585
"src/styles.css"
8686
]
8787
}
88+
},
89+
"lint": {
90+
"builder": "@angular-eslint/builder:lint",
91+
"options": {
92+
"lintFilePatterns": [
93+
"src/**/*.ts",
94+
"src/**/*.html"
95+
]
96+
}
8897
}
8998
}
9099
}
100+
},
101+
"cli": {
102+
"schematicCollections": [
103+
"angular-eslint"
104+
]
91105
}
92106
}

‎frontend/eslint.config.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
// @ts-check
2+
const eslint = require("@eslint/js");
3+
const tseslint = require("typescript-eslint");
4+
const angular = require("angular-eslint");
5+
6+
module.exports = tseslint.config(
7+
{
8+
files: ["**/*.ts"],
9+
extends: [
10+
eslint.configs.recommended,
11+
...tseslint.configs.recommended,
12+
...tseslint.configs.stylistic,
13+
...angular.configs.tsRecommended,
14+
],
15+
processor: angular.processInlineTemplates,
16+
rules: {
17+
"@angular-eslint/directive-selector": [
18+
"error",
19+
{
20+
type: "attribute",
21+
prefix: "app",
22+
style: "camelCase",
23+
},
24+
],
25+
"@angular-eslint/component-selector": [
26+
"error",
27+
{
28+
type: "element",
29+
prefix: "app",
30+
style: "kebab-case",
31+
},
32+
],
33+
},
34+
},
35+
{
36+
files: ["**/*.html"],
37+
extends: [
38+
...angular.configs.templateRecommended,
39+
...angular.configs.templateAccessibility,
40+
],
41+
rules: {},
42+
}
43+
);

0 commit comments

Comments
 (0)