CodeSandbox Cheat Sheet
"Clase de la hoja" id="copy-btn" class="copy-btn" onclick="copyAllCommands()" Copiar todos los comandos id="pdf-btn" class="pdf-btn" onclick="generatePDF()" Generar PDF seleccionado/button ■/div titulada
Sinopsis
CodeSandbox es un entorno de desarrollo basado en la nube que permite el desarrollo web instantáneo en el navegador. Proporciona una experiencia completa de IDE con el apoyo de marcos modernos, colaboración en tiempo real y capacidades de despliegue sin problemas.
NOVEDAD Nota: Tier libre disponible con limitaciones. Los planes Pro ofrecen características adicionales como cajas de arena privadas, dominios personalizados y herramientas de colaboración avanzadas.
Comienzo
Creación de cuentas
# Sign up options:
# - GitHub account (recommended)
# - Google account
# - Email registration
# Visit: https://codesandbox.io
# Click "Sign In" and choose authentication method
Creando sandboxes
# Quick start templates:
# - React
# - Vue
# - Angular
# - Vanilla JavaScript
# - Node.js
# - Next.js
# - Nuxt.js
# - Svelte
# - Gatsby
Selección de plantilla
// Popular starter templates:
// React: https://codesandbox.io/s/new
// Vue: https://codesandbox.io/s/vue
// Angular: https://codesandbox.io/s/angular
// Vanilla: https://codesandbox.io/s/vanilla
// Create from GitHub repository:
// https://codesandbox.io/s/github/username/repository
Interface Overview
Editor Layout
# Left Panel:
# - File Explorer
# - Dependencies
# - GitHub integration
# - Deployment settings
# Center Panel:
# - Code Editor
# - Multiple tabs support
# - Syntax highlighting
# - IntelliSense
# Right Panel:
# - Live Preview
# - Console
# - Tests
# - Problems
Atajos de teclado
# File Operations
Ctrl+N # New file
Ctrl+S # Save (auto-save enabled)
Ctrl+O # Open file
Ctrl+Shift+P # Command palette
# Editor Operations
Ctrl+F # Find
Ctrl+H # Find and replace
Ctrl+G # Go to line
Ctrl+/ # Toggle comment
# Navigation
Ctrl+P # Quick file open
Ctrl+Shift+E # Toggle explorer
Ctrl+` # Toggle terminal
Project Management
Operaciones de archivo
# Create new file:
# Right-click in explorer > New File
# Or use + button in file explorer
# Create folder:
# Right-click in explorer > New Folder
# Upload files:
# Drag and drop files into explorer
# Or right-click > Upload Files
# Delete files:
# Right-click file > Delete
# Or select file and press Delete key
Administración de dependencias
// Add dependencies via package.json
{
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"axios": "^1.4.0",
"styled-components": "^6.0.0"
},
"devDependencies": {
"@types/react": "^18.2.0",
"typescript": "^5.0.0"
}
}
Añadiendo dependencias
# Method 1: Dependencies panel
# Click "Add Dependency" button
# Search for package name
# Click to install
# Method 2: Import statement
# Type import statement in code
# CodeSandbox auto-detects and installs
# Method 3: Package.json
# Manually edit package.json
# Dependencies install automatically
Características marco-específicas
React Development
// Hot reloading enabled by default
import React, { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
return (
<div>
<h1>Counter: {count}</h1>
<button onClick={() => setCount(count + 1)}>
Increment
</button>
</div>
);
}
export default App;
Vue.js Development
<template>
<div>
<h1>{{ message }}</h1>
<button @click="updateMessage">Update</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
updateMessage() {
this.message = 'Updated!';
}
}
}
</script>
<style scoped>
h1 {
color: #42b883;
}
</style>
Node.js Backend
// server.js
const express = require('express');
const app = express();
| const port = process.env.PORT | | 3000; |
app.use(express.json());
app.get('/', (req, res) => {
res.json({ message: 'Hello from CodeSandbox!' });
});
app.post('/api/data', (req, res) => {
const { data } = req.body;
res.json({ received: data, timestamp: new Date() });
});
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
Características de la colaboración
Colaboración en tiempo real
# Share sandbox:
# 1. Click "Share" button
# 2. Copy share URL
# 3. Send to collaborators
# Live collaboration:
# Multiple users can edit simultaneously
# See cursors and selections in real-time
# Chat functionality available
Permissions Management
# Permission levels:
# - View only: Can view but not edit
# - Edit: Can edit files and dependencies
# - Admin: Full control including settings
# Set permissions:
# Share dialog > Advanced > Set permissions
Comentarios y reseñas
# Add comments:
# Select code > Right-click > Add Comment
# Comments appear in sidebar
# Resolve comments when addressed
# Code reviews:
# Share sandbox for review
# Use comments for feedback
# Track changes and discussions
Herramientas de desarrollo
Consola y depuración
# Browser Console:
# Available in preview panel
# Shows console.log output
# Displays errors and warnings
# Network tab:
# Monitor API requests
# View request/response details
# Debug network issues
Pruebas de integración
// Jest testing example
import { render, screen } from '@testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});
// Run tests:
// Tests tab in right panel
// Automatic test discovery
// Real-time test results
Medio ambiente
# Create .env file in root:
REACT_APP_API_URL=https://api.example.com
REACT_APP_API_KEY=your_api_key_here
# Access in code:
const apiUrl = process.env.REACT_APP_API_URL;
const apiKey = process.env.REACT_APP_API_KEY;
Características avanzadas
Plantillas personalizadas
# Create custom template:
# 1. Build your sandbox
# 2. Click "..." menu
# 3. Select "Create Template"
# 4. Configure template settings
# 5. Publish for team use
Integración GitHub
# Import from GitHub:
# New Sandbox > Import from GitHub
# Enter repository URL
# Select branch
# Sandbox created automatically
# Export to GitHub:
# Sandbox menu > Export to GitHub
# Create new repository
# Push changes to GitHub
Opciones de despliegue
# Netlify deployment:
# Deployment tab > Netlify
# Connect account
# Deploy with one click
# Vercel deployment:
# Deployment tab > Vercel
# Automatic deployments
# Custom domain support
# GitHub Pages:
# Export to GitHub first
# Enable GitHub Pages
# Automatic deployment
Container Environments
Docker Support
# Dockerfile example
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]
Custom Environment
# .codesandbox/tasks.json
{
"setupTasks": [
{
"name": "Install Dependencies",
"command": "npm install"
}
],
"tasks": {
"dev": {
"name": "Development Server",
"command": "npm run dev",
"runAtStart": true
},
"build": {
"name": "Build Project",
"command": "npm run build"
}
}
}
API e integraciones
CodeSandbox API
// Embed sandbox in website
<iframe
src="https://codesandbox.io/embed/react-new?fontsize=14&hidenavigation;=1&theme;=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="React Sandbox"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
Opciones de inserción
<!-- Customizable embed parameters -->
<iframe
src="https://codesandbox.io/embed/sandbox-id?
fontsize=14&
hidenavigation=1&
theme=dark&
view=editor&
module=/src/App.js&
hidedevtools=1"
style="width:100%; height:500px;"
></iframe>
REST API
# Get sandbox information
curl -H "Authorization: Bearer YOUR_TOKEN" \
https://codesandbox.io/api/v1/sandboxes/sandbox-id
# Create sandbox
curl -X POST \
-H "Authorization: Bearer YOUR_TOKEN" \
-H "Content-Type: application/json" \
-d '{"files": {...}, "template": "react"}' \
https://codesandbox.io/api/v1/sandboxes
Optimización del rendimiento
Optimización de la construcción
// webpack.config.js customization
module.exports = {
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all',
},
},
},
},
};
Bundle Analysis
# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies
Estrategias de producción
# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support
Gestión del equipo
Espacios de trabajo del equipo
# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions
Plantillas compartidas
# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure
Usage Analytics
# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends
Precios y límites
Tier gratis
# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support
Plan Pro (9 dólares/mes)
# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management
Plan de equipo (15 dólares por usuario/mes)
# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration
Solución de problemas
Cuestiones comunes
# Sandbox not loading:
# 1. Check browser compatibility
# 2. Disable ad blockers
# 3. Clear browser cache
# 4. Try incognito mode
# Dependencies not installing:
# 1. Check package.json syntax
# 2. Verify package names
# 3. Try manual refresh
# 4. Check network connection
Cuestiones de ejecución
# Slow sandbox performance:
# 1. Reduce bundle size
# 2. Optimize dependencies
# 3. Use code splitting
# 4. Enable production mode
# Memory issues:
# 1. Close unused tabs
# 2. Restart sandbox
# 3. Optimize code
# 4. Check for memory leaks
Debug Information
# Browser developer tools:
# F12 to open dev tools
# Check console for errors
# Monitor network requests
# Analyze performance
# CodeSandbox logs:
# Console tab in preview
# Check for build errors
# Review dependency issues
# Monitor runtime errors
Buenas prácticas
Project Organization
# File structure best practices:
src/
components/
common/
pages/
utils/
hooks/
services/
styles/
tests/
public/
assets/
images/
Código de calidad
# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks
Directrices de colaboración
# Team collaboration tips:
# - Use descriptive commit messages
# - Comment complex code sections
# - Follow consistent naming conventions
# - Regular code reviews
# - Document API changes