ElasticView

English

简体中文

English

简体中文

Appearance

Development Environment Setup ​

Set up your development environment for ElasticView plugin development.

Prerequisites ​

Required Software ​

Node.js and npm ​

  • Node.js: Version 16 or higher
  • npm: Version 8 or higher (comes with Node.js)
bash
# Check versions
node --version
npm --version

# Install Node.js from https://nodejs.org/
# Or use a version manager like nvm

Go Programming Language ​

  • Go: Version 1.19 or higher
bash
# Check Go version
go version

# Install from https://golang.org/dl/
# Or use package manager

Git Version Control ​

bash
# Check Git version
git --version

# Install from https://git-scm.com/

Code Editor ​

Recommended editors:

  • Visual Studio Code: With Go and Vue.js extensions
  • GoLand: JetBrains IDE for Go
  • WebStorm: For frontend development

System Requirements ​

Hardware ​

  • RAM: 8GB minimum, 16GB recommended
  • Storage: 10GB free space
  • CPU: Multi-core processor recommended

Operating Systems ​

  • Linux: Ubuntu 20.04+ or equivalent
  • macOS: 10.15+ (Catalina or later)
  • Windows: Windows 10/11 with WSL2

ElasticView Setup ​

Clone Repository ​

bash
# Clone the main repository
git clone https://github.com/1340691923/ElasticView.git
cd ElasticView

# Or fork and clone your fork
git clone https://github.com/YOUR_USERNAME/ElasticView.git
cd ElasticView

Backend Setup ​

Install Dependencies ​

bash
# Install Go dependencies
go mod download
go mod tidy

Database Setup ​

bash
# Install MySQL (example for Ubuntu)
sudo apt update
sudo apt install mysql-server

# Start MySQL service
sudo systemctl start mysql
sudo systemctl enable mysql

# Create database
mysql -u root -p
CREATE DATABASE elasticview;
CREATE USER 'ev_user'@'localhost' IDENTIFIED BY 'password';
GRANT ALL PRIVILEGES ON elasticview.* TO 'ev_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

Configuration ​

bash
# Copy example configuration
cp config.example.yaml config.yaml

# Edit configuration
nano config.yaml

Example configuration:

yaml
server:
  port: 8080
  host: "0.0.0.0"
  mode: "debug"

database:
  host: "localhost"
  port: 3306
  name: "elasticview"
  user: "ev_user"
  password: "password"
  charset: "utf8mb4"

Run Backend ​

bash
# Development mode with hot reload
go install github.com/cosmtrek/air@latest
air

# Or run directly
go run main.go

Frontend Setup ​

Install Dependencies ​

bash
# Navigate to frontend directory
cd web

# Install npm dependencies
npm install

# Or use yarn
yarn install

Development Server ​

bash
# Start development server
npm run dev

# Or with yarn
yarn dev

The frontend will be available at http://localhost:3000

Elasticsearch Setup ​

Install Elasticsearch ​

bash
# Using Docker (recommended for development)
docker run -d \
  --name elasticsearch \
  -p 9200:9200 \
  -p 9300:9300 \
  -e "discovery.type=single-node" \
  -e "ES_JAVA_OPTS=-Xms512m -Xmx512m" \
  elasticsearch:8.5.0

# Verify installation
curl http://localhost:9200

Sample Data ​

bash
# Create sample index
curl -X PUT "localhost:9200/sample-logs" -H 'Content-Type: application/json' -d'
{
  "mappings": {
    "properties": {
      "timestamp": { "type": "date" },
      "level": { "type": "keyword" },
      "message": { "type": "text" },
      "service": { "type": "keyword" }
    }
  }
}
'

# Add sample data
curl -X POST "localhost:9200/sample-logs/_doc" -H 'Content-Type: application/json' -d'
{
  "timestamp": "2023-12-01T10:00:00Z",
  "level": "INFO",
  "message": "Application started successfully",
  "service": "web-server"
}
'

Development Tools ​

Code Quality Tools ​

Go Tools ​

bash
# Install linting tools
go install golang.org/x/tools/cmd/goimports@latest
go install github.com/golangci/golangci-lint/cmd/golangci-lint@latest

# Format code
gofmt -w .
goimports -w .

# Run linter
golangci-lint run

Frontend Tools ​

bash
# Install ESLint and Prettier
npm install -g eslint prettier

# Run linting
npm run lint

# Format code
npm run format

Testing Setup ​

Backend Testing ​

bash
# Run tests
go test ./...

# Run tests with coverage
go test -cover ./...

# Run specific test
go test -v ./pkg/plugin

Frontend Testing ​

bash
# Run unit tests
npm run test

# Run e2e tests
npm run test:e2e

# Run tests with coverage
npm run test:coverage

Database Tools ​

Migration Tools ​

bash
# Install migrate tool
go install -tags 'mysql' github.com/golang-migrate/migrate/v4/cmd/migrate@latest

# Run migrations
migrate -path ./migrations -database "mysql://ev_user:password@tcp(localhost:3306)/elasticview" up

# Create new migration
migrate create -ext sql -dir ./migrations -seq add_plugin_table

Database GUI Tools ​

  • MySQL Workbench: Official MySQL GUI
  • phpMyAdmin: Web-based MySQL administration
  • DBeaver: Universal database tool

Plugin Development Environment ​

Plugin Structure ​

my-plugin/
├── plugin.yaml          # Plugin manifest
├── main.go             # Backend entry point
├── frontend/           # Frontend code
│   ├── src/
│   │   ├── components/
│   │   ├── views/
│   │   └── main.js
│   ├── package.json
│   └── vite.config.js
├── assets/             # Static assets
├── docs/               # Documentation
└── tests/              # Test files

Plugin Development Kit ​

Install PDK ​

bash
# Clone plugin development kit
git clone https://github.com/1340691923/ElasticView-PDK.git
cd ElasticView-PDK

# Install dependencies
npm install
go mod download

Create New Plugin ​

bash
# Use plugin generator
npx create-ev-plugin my-awesome-plugin

# Navigate to plugin directory
cd my-awesome-plugin

# Install dependencies
npm install
go mod download

Hot Reload Setup ​

Backend Hot Reload ​

bash
# Install air for Go hot reload
go install github.com/cosmtrek/air@latest

# Create .air.toml configuration
cat > .air.toml << EOF
root = "."
testdata_dir = "testdata"
tmp_dir = "tmp"

[build]
  args_bin = []
  bin = "./tmp/main"
  cmd = "go build -o ./tmp/main ."
  delay = 1000
  exclude_dir = ["assets", "tmp", "vendor", "testdata"]
  exclude_file = []
  exclude_regex = ["_test.go"]
  exclude_unchanged = false
  follow_symlink = false
  full_bin = ""
  include_dir = []
  include_ext = ["go", "tpl", "tmpl", "html"]
  kill_delay = "0s"
  log = "build-errors.log"
  send_interrupt = false
  stop_on_root = false

[color]
  app = ""
  build = "yellow"
  main = "magenta"
  runner = "green"
  watcher = "cyan"

[log]
  time = false

[misc]
  clean_on_exit = false
EOF

# Start with hot reload
air

Frontend Hot Reload ​

bash
# Vite configuration for hot reload
cat > vite.config.js << EOF
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
})
EOF

# Start development server
npm run dev

IDE Configuration ​

Visual Studio Code ​

json
{
  "recommendations": [
    "golang.go",
    "vue.volar",
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint"
  ]
}

Settings ​

json
{
  "go.useLanguageServer": true,
  "go.lintTool": "golangci-lint",
  "go.lintFlags": ["--fast"],
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  }
}

GoLand Configuration ​

Go Modules ​

Database Integration ​

  • Configure database connection
  • Enable SQL dialect support
  • Set up database console

Debugging Setup ​

Backend Debugging ​

Delve Debugger ​

bash
# Install delve
go install github.com/go-delve/delve/cmd/dlv@latest

# Debug application
dlv debug main.go

# Debug with arguments
dlv debug main.go -- --config=config.yaml

VS Code Debugging ​

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch Package",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "${workspaceFolder}/main.go",
      "args": ["--config=config.yaml"]
    }
  ]
}

Frontend Debugging ​

Browser DevTools ​

  • Use Chrome DevTools
  • Enable Vue.js DevTools extension
  • Set up source maps

VS Code Debugging ​

json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/web/src"
    }
  ]
}

Performance Optimization ​

Development Performance ​

Go Build Optimization ​

bash
# Use build cache
export GOCACHE=$(go env GOCACHE)

# Parallel builds
export GOMAXPROCS=$(nproc)

# Fast builds for development
go build -ldflags="-s -w" -o bin/elasticview main.go

Frontend Optimization ​

javascript
// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          ui: ['element-plus']
        }
      }
    }
  }
})

Troubleshooting ​

Common Issues ​

Port Conflicts ​

bash
# Check port usage
lsof -i :8080
netstat -tulpn | grep :8080

# Kill process using port
kill -9 $(lsof -ti:8080)

Database Connection Issues ​

bash
# Test MySQL connection
mysql -h localhost -u ev_user -p elasticview

# Check MySQL service
sudo systemctl status mysql

Go Module Issues ​

bash
# Clean module cache
go clean -modcache

# Verify modules
go mod verify

# Update dependencies
go get -u ./...

Getting Help ​

  • Documentation: Check the official docs
  • Community: Join the Discord/Slack channel
  • Issues: Report bugs on GitHub
  • Stack Overflow: Tag questions with elasticview

Next Steps ​