Slawomir Koszewski
393c798080
- Remove Containerfile and .containerignore (Apple container specific) - Update package.json to remove Apple container scripts - Replace macOS-specific build scripts with Docker-focused versions - Update README to prioritize Docker over Apple container - Update DEVELOPMENT.md to remove macOS-first approach - Update demo script to remove Apple container references - Update workflow to remove Containerfile path triggers - Simplify project to be Docker-first for cross-platform compatibility
226 lines
6.6 KiB
Markdown
226 lines
6.6 KiB
Markdown
# JMESPath Testing Tool
|
|
|
|
A React-based web application for testing and validating JMESPath expressions against JSON data in real-time. This interactive tool provides a user-friendly interface to experiment with JMESPath queries and see results instantly.
|
|
|
|
|
|
|
|
|
|
|
|
## Features
|
|
|
|
- 🎯 **Real-time Evaluation**: JMESPath expressions are evaluated instantly as you type
|
|
- 📝 **JSON Validation**: Built-in JSON syntax validation and error reporting
|
|
- 🎨 **Bootstrap UI**: Clean, responsive interface with Bootstrap styling
|
|
- 🔄 **Sample Data**: Pre-loaded examples to get started quickly
|
|
- 📱 **Responsive Design**: Works on desktop, tablet, and mobile devices
|
|
- 🐳 **Docker Ready**: Containerized for easy deployment
|
|
- ✅ **Error Handling**: Clear error messages for both JSON and JMESPath syntax issues
|
|
- 🚀 **CI/CD Ready**: GitHub Actions workflow for automated container builds
|
|
|
|
## Application Layout
|
|
|
|
The application is divided into three main sections:
|
|
|
|
1. **Top Section**: Title and description of the tool
|
|
2. **Middle Section**: Input area for JMESPath expressions
|
|
3. **Bottom Sections**:
|
|
- **Left**: JSON data input area
|
|
- **Right**: Query results output area
|
|
|
|
## Quick Start
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 24 LTS or higher
|
|
- npm or yarn package manager
|
|
|
|
### Local Development
|
|
|
|
1. **Clone the repository**:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd jmespath-playground
|
|
```
|
|
|
|
2. **Install dependencies**:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Start the development server**:
|
|
```bash
|
|
npm start
|
|
```
|
|
|
|
4. **Open your browser** and navigate to `http://localhost:3000`
|
|
|
|
### Container Deployment
|
|
|
|
#### Docker
|
|
|
|
```bash
|
|
# Build the Docker image
|
|
docker build -t jmespath-playground .
|
|
|
|
# Run the container
|
|
docker run -p 3000:3000 jmespath-playground
|
|
|
|
# Using npm scripts
|
|
npm run docker:build
|
|
npm run docker:run
|
|
```
|
|
|
|
## Usage
|
|
|
|
1. **Enter a JMESPath expression** in the top input field (e.g., `people[*].name`)
|
|
2. **Paste or type JSON data** in the bottom-left textarea
|
|
3. **View the results** in the bottom-right output area
|
|
4. **Use the toolbar buttons** to:
|
|
- Load sample data
|
|
- Format JSON
|
|
- Clear all inputs
|
|
|
|
### Example JMESPath Expressions
|
|
|
|
Try these examples with the sample data:
|
|
|
|
- `people[*].name` - Get all names
|
|
- `people[0]` - Get the first person
|
|
- `people[?age > 30]` - Filter people older than 30
|
|
- `people[*].skills[0]` - Get the first skill of each person
|
|
- `length(people)` - Count the number of people
|
|
|
|
## Available Scripts
|
|
|
|
In the project directory, you can run:
|
|
|
|
### `npm start`
|
|
|
|
Runs the app in development mode. The page will reload when you make edits.
|
|
|
|
### `npm test`
|
|
|
|
Launches the test runner in interactive watch mode.
|
|
|
|
### `npm run build`
|
|
|
|
Builds the app for production to the `build` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
|
|
|
|
### `npm run serve`
|
|
|
|
Serves the production build locally on port 3000.
|
|
|
|
### Docker Scripts
|
|
|
|
### `npm run docker:build`
|
|
|
|
Builds a Docker container.
|
|
|
|
### `npm run docker:run`
|
|
|
|
Runs the Docker container.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
jmespath-playground/
|
|
├── .github/
|
|
│ ├── workflows/
|
|
│ │ └── build-container.yml # CI/CD pipeline
|
|
│ └── copilot-instructions.md # AI agent instructions
|
|
├── public/
|
|
│ ├── index.html
|
|
│ ├── manifest.json
|
|
│ └── favicon.ico
|
|
├── src/
|
|
│ ├── App.js # Main application component
|
|
│ ├── App.css # App-specific styles
|
|
│ ├── App.test.js # App tests
|
|
│ ├── index.js # React entry point
|
|
│ ├── index.css # Global styles
|
|
│ ├── setupTests.js # Test configuration
|
|
│ └── reportWebVitals.js
|
|
├── scripts/
|
|
│ ├── build.sh # Build script
|
|
│ └── dev.sh # Development script
|
|
├── Dockerfile # Docker container
|
|
├── Dockerfile.dev # Development container
|
|
├── docker-compose.yml # Container orchestration
|
|
├── package.json # Dependencies and scripts
|
|
├── README.md # Comprehensive documentation
|
|
├── DEVELOPMENT.md # Developer guide
|
|
└── demo.sh # Demo script
|
|
```
|
|
|
|
## Technology Stack
|
|
|
|
- **React 18.2.0**: Frontend framework
|
|
- **Bootstrap 5.3.2**: CSS framework for styling
|
|
- **JMESPath 0.16.0**: JMESPath expression evaluation
|
|
- **Node.js 24 LTS**: Runtime environment
|
|
- **Docker**: Containerization
|
|
- **GitHub Actions**: Automated CI/CD pipeline
|
|
|
|
## CI/CD Pipeline
|
|
|
|
The project includes a GitHub Actions workflow that automatically:
|
|
|
|
- 🔍 **Triggers** on pushes to `main` or `develop` branches when `src/` directory changes
|
|
- 📦 **Builds** the React application with Node.js 24 LTS
|
|
- 🧪 **Runs** the test suite with coverage reporting
|
|
- 🐳 **Creates** container image using Docker
|
|
- ✅ **Tests** the container by starting it and verifying HTTP response
|
|
- 🏗️ **Builds** multi-platform images (amd64/arm64) for main branch
|
|
- 📤 **Uploads** build artifacts for later use
|
|
|
|
The workflow uses Docker for containerization and is optimized for cross-platform deployment.
|
|
|
|
## Deployment
|
|
|
|
### Docker Deployment
|
|
|
|
The application is containerized and ready for deployment:
|
|
|
|
1. **Build the Docker image**:
|
|
```bash
|
|
docker build -t jmespath-playground .
|
|
```
|
|
|
|
2. **Deploy to your container platform** (Docker Swarm, Kubernetes, etc.)
|
|
|
|
### Static Hosting
|
|
|
|
You can also deploy the built application to static hosting services:
|
|
|
|
1. **Build the application**:
|
|
```bash
|
|
npm run build
|
|
```
|
|
|
|
2. **Deploy the `build` folder** to services like:
|
|
- Netlify
|
|
- Vercel
|
|
- GitHub Pages
|
|
- AWS S3 + CloudFront
|
|
- Azure Static Web Apps
|
|
|
|
## Contributing
|
|
|
|
1. Fork the repository
|
|
2. Create a feature branch: `git checkout -b feature/new-feature`
|
|
3. Make your changes and commit them: `git commit -m 'Add new feature'`
|
|
4. Push to the branch: `git push origin feature/new-feature`
|
|
5. Submit a pull request
|
|
|
|
## License
|
|
|
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
|
|
## About JMESPath
|
|
|
|
JMESPath is a query language for JSON. It allows you to declaratively specify how to extract elements from a JSON document. For more information about JMESPath syntax and capabilities, visit the [official JMESPath website](https://jmespath.org/).
|
|
|
|
## Support
|
|
|
|
If you encounter any issues or have questions, please [open an issue](../../issues) on GitHub.
|