figma-docker-init
Advanced tools
Quick-start Docker setup for Figma-exported React/Vite/TypeScript projects
Quick-start Docker setup for Figma Make-exported React/Vite/TypeScript projects. This CLI tool generates production-ready Docker configurations tailored for different project types and deployment scenarios.
🎉 STABLE RELEASE: Production-ready Docker setup with zero warnings and optimal developer experience
Key Features:
.figma-docker/ directoryInstallation:
npx figma-docker-init basic
Quick Start:
# Navigate to your React/Vite project
cd your-project
# Initialize Docker configuration
npx figma-docker-init basic
# Start containers in background
cd .figma-docker && docker-compose up -d --build
# View logs if needed
docker-compose logs -f
What's Included:
🧹 CLEANUP: Removed all template warnings for cleaner installation
📝 UX IMPROVEMENT: Docker containers now run in detached mode by default
Fixed Issues:
-d flag to run containers in backgrounddocker-compose logs -fInstallation:
npx figma-docker-init@beta basic
What Changed:
up --build to up -d --build🔧 HOTFIX: Fixed nginx crash loop caused by missing SSL certificates (complete fix)
Fixed Issues:
Installation:
npx figma-docker-init@beta basic
What Changed:
For Production SSL:
ui-heavy template which includes SSL setup instructions🔧 HOTFIX: Fixed nginx crash loop caused by missing SSL certificates
Fixed Issues:
Installation:
npx figma-docker-init@beta basic
What Changed:
For Production SSL:
ui-heavy template which includes SSL setup instructions📝 DOCUMENTATION: Fixed docker-compose instructions
Fixed Issues:
Installation:
npx figma-docker-init@beta basic
What Changed:
cd .figma-docker && docker-compose up --build.figma-docker/ subdirectory🔧 HOTFIX: Resolves npm installation loop caused by unnecessary dependency
Fixed Issues:
Installation:
npx figma-docker-init@beta basic
What Changed:
agentdb dependency that was not used by the CLI toolnpm install on some systems🎯 IMPROVEMENTS: Streamlined setup workflow and simplified Docker configuration
New Features:
.env.example to .envInstallation:
npx figma-docker-init@beta basic
What Changed:
.env from .env.example🔧 HOTFIX: Resolves execution errors in v2.0.0-beta.1
Fixed Issues:
ensureFigmaDockerStructure function that was causing runtime errorsInstallation:
npx figma-docker-init@beta basic
Recommended for: All users experiencing "SyntaxError" or "not defined" errors with beta.1
.figma-docker/ directory in each project.figma-docker/ directorynpm install -g figma-docker-init
npx figma-docker-init [template]
npm install --save-dev figma-docker-init
figma-docker-init ui-heavy
.env.example file and rename it to .envdocker-compose up --build
figma-docker-init [template] [options]
basicMinimal Docker setup with essential configuration:
figma-docker-init basic
ui-heavyOptimized for UI-heavy applications with advanced caching and performance optimizations:
figma-docker-init ui-heavy
# Show help information
figma-docker-init --help
figma-docker-init -h
# Show version
figma-docker-init --version
figma-docker-init -v
# List all available templates
figma-docker-init --list
The CLI generates the following files in your project's .figma-docker/ directory:
your-project/
├── .figma-docker/ # Per-project Docker configuration
│ ├── config.json # Project-specific settings
│ ├── Dockerfile # Multi-stage build configuration
│ ├── docker-compose.yml # Container orchestration
│ ├── .dockerignore # Files to exclude from build context
│ ├── nginx.conf # Nginx server configuration
│ ├── .env.example # Environment variables template
│ └── DOCKER.md # Detailed documentation
├── package.json # Updated with Docker scripts
└── [your project files]
Copy .env.example to .env and customize:
cp .env.example .env
Key variables to configure:
# Application
NODE_ENV=production
REACT_APP_API_URL=https://api.yourdomain.com
# Container Configuration
CONTAINER_PORT=3000
HOST_PORT=80
# Build Configuration
BUILD_TARGET=production
The generated files serve as a starting point. Common customizations include:
# Build and start development environment
docker-compose up --build
# Start with logs
docker-compose up --build --logs
# Background mode
docker-compose up -d --build
# Build production image
docker build --target production -t your-app:latest .
# Run production container
docker run -p 80:80 --env-file .env your-app:latest
# Using docker-compose for production
docker-compose -f docker-compose.yml up -d
# View logs
docker-compose logs -f
# Stop all services
docker-compose down
# Remove volumes (careful!)
docker-compose down -v
# Rebuild without cache
docker-compose build --no-cache
The generated configurations include security best practices:
The generated Docker configuration works with major cloud platforms:
Example GitHub Actions workflow:
name: Build and Deploy
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Build Docker image
run: docker build -t app:latest .
- name: Deploy to production
run: # Your deployment commands
git checkout -b feature-namegit commit -m "feat: add new template"templates/# In your React project
figma-docker-init basic
docker-compose up --build
# App available at http://localhost
# For apps with heavy UI components
figma-docker-init ui-heavy
cp .env.example .env
# Edit .env with your configuration
docker-compose up --build
# Build production image
docker build --target production -t myapp:v1.0.0 .
# Tag for registry
docker tag myapp:v1.0.0 registry.com/myapp:v1.0.0
# Push to registry
docker push registry.com/myapp:v1.0.0
Build fails with permission errors:
# Fix permissions
sudo chown -R $USER:$USER .
Port already in use:
# Change port in docker-compose.yml
ports:
- "8080:80" # Use different host port
Out of disk space:
# Clean up Docker
docker system prune -a
Module not found errors:
# Rebuild without cache
docker-compose build --no-cache
MIT License - see LICENSE file for details.
Made with ❤️ for the Figma developer community
FAQs
Quick-start Docker setup for Figma-exported React/Vite/TypeScript projects
The npm package figma-docker-init receives a total of 9 weekly downloads. As such, figma-docker-init popularity was classified as not popular.
We found that figma-docker-init demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Security News
Two compromised GitHub Actions were re-enabled with malicious tags intact, exposing thousands of downstream repositories to Mini Shai-Hulud.
Research
/Security News
A malicious Firefox extension fetches its payload after installation to evade detection, steal Google session cookies, and automate account takeover.
Research
/Security News
The compromise affects MemTensor's MemOS, an open source memory framework for large language models (LLMs) and AI agents. Both npm package @memtensor/memos-cloud-openclaw-plugin and the PyPI package MemoryOS are compromised. They drop cross-platform Go binaries that exfiltrate developer secrets.