Make Docker optional and simplify development setup

- Remove Dockerfile.dev and CI/CD workflow
- Remove Docker-specific npm scripts from package.json
- Update README to prioritize local Node.js development
- Make Docker containerization optional rather than required
- Update build scripts to treat Docker as optional
- Remove GitHub Actions and CI/CD references from documentation
- Add Format JSON button to JMESPath toolbar per copilot instructions
- Simplify development workflow for better accessibility
This commit is contained in:
2026-01-18 14:04:16 +01:00
parent 48d540bd48
commit 557f1b20c9
7 changed files with 19 additions and 231 deletions

View File

@@ -1,114 +0,0 @@
name: Build Container
on:
push:
branches: [ main, develop ]
paths:
- 'src/**'
- 'public/**'
- 'package*.json'
- 'Dockerfile'
pull_request:
branches: [ main ]
paths:
- 'src/**'
- 'public/**'
- 'package*.json'
- 'Dockerfile'
env:
IMAGE_NAME: jmespath-playground
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Node.js 24 LTS
uses: actions/setup-node@v4
with:
node-version: '24'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test -- --coverage --watchAll=false
- name: Build React application
run: npm run build
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Build container image
uses: docker/build-push-action@v5
with:
context: .
file: ./Dockerfile
push: false
load: true
tags: ${{ env.IMAGE_NAME }}:latest
cache-from: type=gha
cache-to: type=gha,mode=max
- name: Test container
run: |
# Start the container
docker run --rm -d -p 3000:3000 --name test-container ${{ env.IMAGE_NAME }}:latest
# Wait for container to be ready
echo "Waiting for container to start..."
for i in {1..30}; do
if curl -f http://localhost:3000 > /dev/null 2>&1; then
echo "Container is responding!"
break
fi
if [ $i -eq 30 ]; then
echo "Container failed to respond within 30 seconds"
docker logs test-container
docker stop test-container
exit 1
fi
echo "Attempt $i/30 - waiting..."
sleep 2
done
# Test successful, stop container
docker stop test-container
- name: Upload build artifacts
uses: actions/upload-artifact@v4
if: success()
with:
name: build-output
path: build/
retention-days: 7
# Optional: Build with multi-platform support for production
build-multiplatform:
runs-on: ubuntu-latest
if: github.ref == 'refs/heads/main'
needs: build
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v3
- name: Build multi-platform image
uses: docker/build-push-action@v5
with:
context: .
file: ./Dockerfile
platforms: linux/amd64,linux/arm64
push: false
tags: ${{ env.IMAGE_NAME }}:latest
cache-from: type=gha
cache-to: type=gha,mode=max

View File

@@ -79,34 +79,6 @@ Built with React 18 and targets:
- Node.js 24 LTS compatibility
- Mobile-responsive design
## CI/CD Pipeline
## License
### GitHub Actions Workflow
The project includes automated container building via GitHub Actions:
**Triggers:**
- Push to `main` or `develop` branches
- Changes in `src/`, `public/`, `package*.json`, or container files
- Pull requests to `main` branch
**Pipeline Steps:**
1. Checkout code and setup Node.js 24 LTS
2. Install dependencies with npm ci
3. Run test suite with coverage
4. Build React production bundle
5. Build and test Docker container
6. Upload build artifacts
7. Create multi-platform images (main branch only)
**Local Testing:**
```bash
# Test the same steps locally
npm ci
npm test -- --coverage --watchAll=false
npm run build
npm run docker:build
npm run docker:run
```
The workflow uses Docker for consistent containerization across all environments.
MIT License - see LICENSE file for details.

View File

@@ -1,20 +0,0 @@
# Development Dockerfile
FROM node:24-alpine
# Set working directory
WORKDIR /app
# Copy package files
COPY package*.json ./
# Install all dependencies (including dev dependencies)
RUN npm install
# Copy application source
COPY . .
# Expose port 3000
EXPOSE 3000
# Start the development server
CMD ["npm", "start"]

View File

@@ -16,7 +16,6 @@ A React-based web application for testing and validating JMESPath expressions ag
- 📱 **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
@@ -55,9 +54,9 @@ The application is divided into three main sections:
4. **Open your browser** and navigate to `http://localhost:3000`
### Container Deployment
### Container Deployment (Optional)
#### Docker
You can optionally run the application in a Docker container:
```bash
# Build the Docker image
@@ -65,10 +64,6 @@ 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
@@ -165,51 +160,7 @@ jmespath-playground/
- **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
- **Docker**: Optional containerization
## Contributing

View File

@@ -8,9 +8,7 @@
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"serve": "serve -s build -l 3000",
"docker:build": "docker build -t jmespath-playground .",
"docker:run": "docker run -p 3000:3000 jmespath-playground"
"serve": "serve -s build -l 3000"
},
"engines": {
"node": ">=24.0.0"

View File

@@ -30,19 +30,20 @@ npm install
echo "🔨 Building production bundle..."
npm run build
# Container build with Docker
# Optional container build with Docker
if command -v docker &> /dev/null; then
echo "🐳 Building Docker container..."
echo "🐳 Building Docker container (optional)..."
docker build -t jmespath-playground .
else
echo "⚠️ Docker not found. Skipping container build."
echo " Install Docker to build containers."
echo "💡 Docker not found. Container build is optional."
echo " Install Docker if you want to build containers."
fi
echo "✅ Build completed successfully!"
echo ""
echo "To run the application:"
echo " npm run serve # Serve production build locally"
echo " docker run -p 3000:3000 jmespath-playground # Run container (if built)"
if command -v docker &> /dev/null; then
echo " docker run -p 3000:3000 jmespath-playground # Run with Docker"
fi

View File

@@ -228,6 +228,13 @@ function App() {
>
Load Sample
</button>
<button
className="btn btn-outline-secondary btn-sm me-2"
onClick={formatJson}
title="Format JSON input for better readability"
>
Format JSON
</button>
<button
className="btn btn-outline-danger btn-sm"
onClick={clearAll}
@@ -257,18 +264,11 @@ function App() {
{/* Bottom Row - JSON Input and Results */}
<div className="col-md-6 mb-3">
<div className="card h-100">
<div className="card-header d-flex justify-content-between align-items-center">
<div className="card-header">
<h5 className="mb-0">
<i className="bi bi-file-code me-2"></i>
JSON Data
</h5>
<button
className="btn btn-outline-secondary btn-sm"
onClick={formatJson}
title="Format JSON"
>
Format JSON
</button>
</div>
<div className="card-body input-section">
<div className="textarea-container">