CodeSandbox Feuille de chaleur

Copier toutes les commandes Générer PDF

Aperçu général

CodeSandbox est un environnement de développement basé sur le cloud qui permet le développement instantané du web dans le navigateur. Il fournit une expérience IDE complète avec le soutien de cadres modernes, la collaboration en temps réel, et des capacités de déploiement sans faille.

C'est pas vrai. Note: Niveau libre disponible avec limitations. Les plans pro offrent des fonctionnalités supplémentaires comme des bacs à sable privés, des domaines personnalisés et des outils de collaboration avancés.

Commencer

Création de compte

# Sign up options:
# - GitHub account (recommended)
# - Google account
# - Email registration

# Visit: https://codesandbox.io
# Click "Sign In" and choose authentication method

Création de boîtes à sable

# Quick start templates:
# - React
# - Vue
# - Angular
# - Vanilla JavaScript
# - Node.js
# - Next.js
# - Nuxt.js
# - Svelte
# - Gatsby
```_

### Sélection du modèle
```javascript
// 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
```_

## Aperçu de l'interface

### Mise en page de l'éditeur
```bash
# 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

Raccourcis clavier

# 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

Gestion de projet

Opérations de fichiers

# 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

Gestion de la dépendance

// 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"
  }
}

Ajout de dépendances

# 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

Caractéristiques spécifiques du cadre

Réagir au développement

// 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 Développement

<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}`);
});

Caractéristiques de la collaboration

Collaboration en temps réel

# 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

Gestion des autorisations

# 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

Commentaires et commentaires

# 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

Outils de développement

Console et débogage

# 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

Tester l'intégration

// 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

Variables d'environnement

# 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;

Caractéristiques avancées

Modèles personnalisés

# Create custom template:
# 1. Build your sandbox
# 2. Click "..." menu
# 3. Select "Create Template"
# 4. Configure template settings
# 5. Publish for team use

Intégration 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

Options de déploiement

# 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

Environnements des conteneurs

Soutien Docker

# Dockerfile example
FROM node:16-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000

CMD ["npm", "start"]

Environnement personnalisé

# .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 et intégrations

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>

Options intégrées

<!-- 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>

API REST

# 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

Optimisation des performances

Optimisation de la construction

// webpack.config.js customization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

Analyse de l'ensemble

# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies

Stratégies de mise en cache

# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support

Gestion d'équipe

Espaces de travail en équipe

# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions

Modèles partagés

# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure

Analyse d'utilisation

# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends

Prix et limites

Niveau libre

# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support

Plan pro (9/mois)

# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management

Plan d'équipe (15$/utilisateur/mois)

# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration

Dépannage

Questions communes

# 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

Problèmes de performance

# 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

Renseignements sur les débogueurs

# 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

Meilleures pratiques

Organisation du projet

# File structure best practices:
src/
  components/
    common/
    pages/
  utils/
  hooks/
  services/
  styles/
  tests/
public/
  assets/
  images/

Qualité du code

# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks

Lignes directrices pour la collaboration

# Team collaboration tips:
# - Use descriptive commit messages
# - Comment complex code sections
# - Follow consistent naming conventions
# - Regular code reviews
# - Document API changes

Ressources

Documentation

• [Documentation de la boîte de codes] (LINK_9)
• [Référence API] (LINK_9)
• [Guide de montage] (LINK_9)

Communauté

• [CodeSandbox Discord] (LINK_9)
• [Répertoire GitHub] (LINK_9)
• [Forum communautaire] (LINK_9)

Modèles et exemples

• [Modèles officiels] (LINK_9)
• [Boîtes de sable communautaires] (LINK_9)
• [Exemples qualitatifs] (LINK_9)