Scheda di Riferimento CodeSandbox

📋 Copy All Commands 📄 Generate PDF

Panoramica

CodeSandbox è un ambiente di sviluppo basato su cloud che consente lo sviluppo web istantaneo nel browser. Fornisce un'esperienza IDE completa con supporto per framework moderni, collaborazione in tempo reale e funzionalità di distribuzione senza soluzione di continuità.

⚠️ Nota: Piano gratuito disponibile con limitazioni. I piani Pro offrono funzionalità aggiuntive come sandbox private, domini personalizzati e strumenti di collaborazione avanzati.

Primi Passi

Creazione dell'Account

Creazione di Sandbox

Selezione del Template

Panoramica dell'Interfaccia

Layout dell'Editor

Scorciatoie da Tastiera

Gestione del Progetto

Operazioni sui File

Gestione delle Dipendenze

Aggiunta di Dipendenze

Funzionalità Specifiche per Framework

Sviluppo React

Sviluppo Vue.js

Backend Node.js

Funzionalità di Collaborazione

Collaborazione in Tempo Reale

Gestione dei Permessi

Commenti e Revisioni

Strumenti di Sviluppo

Console e Debug

Integrazione Test

Variabili di Ambiente

Funzionalità Avanzate

Template Personalizzati

Integrazione GitHub

Would you like me to provide more specific translations for the remaining sections? I can fill in the details for each section if you provide the specific content.```bash

Sign up options:

- GitHub account (recommended)

- Google account

- Email registration

Visit: https://codesandbox.io

Click "Sign In" and choose authentication method

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

Template Selection

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

Keyboard Shortcuts

# 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

File Operations

# 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

Dependency Management

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

Adding Dependencies

# 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

Framework-Specific Features

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

Collaboration Features

Real-time Collaboration

# 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

Comments and Reviews

# 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

Development Tools

Console and Debugging

# 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

Testing Integration

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

Environment Variables

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

Advanced Features

Custom Templates

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

GitHub Integration

# 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
```Translate just the section headers```bash
# 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
```Wait for you to provide the full text content```dockerfile
# Dockerfile example
FROM node:16-alpine

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

COPY . .
EXPOSE 3000

CMD ["npm", "start"]
```Generate sample placeholder text in Italian for each section

Which approach would you prefer?

If you want me to translate the section headers, here's how that would look:
```bash
# .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"
    }
  }
}
```### Opzioni di Distribuzione```javascript
// 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>
```## Ambienti Container```html
<!-- 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>
```### Supporto Docker```bash
# 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
```### Ambiente Personalizzato```javascript
// webpack.config.js customization
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};
```## API e Integrazioni```bash
# Analyze bundle size:
# 1. Build project
# 2. Check bundle analyzer in preview
# 3. Identify large dependencies
# 4. Optimize imports and dependencies
```### API CodeSandbox```bash
# Service worker for caching:
# PWA template includes service worker
# Automatic caching of static assets
# Offline functionality support
```### Opzioni di Incorporamento```bash
# Create team workspace:
# Account settings > Teams
# Create new team
# Invite team members
# Manage permissions
```### API REST```bash
# Team templates:
# Create standardized templates
# Share across team members
# Enforce coding standards
# Consistent project structure
```## Ottimizzazione delle Prestazioni```bash
# Team analytics:
# View team sandbox usage
# Track collaboration metrics
# Monitor resource consumption
# Analyze productivity trends
```### Ottimizzazione della Build```bash
# Free plan includes:
# - Unlimited public sandboxes
# - 3 private sandboxes
# - Basic collaboration features
# - Community support
```### Analisi del Bundle```bash
# Pro features:
# - Unlimited private sandboxes
# - Advanced collaboration
# - Custom domains
# - Priority support
# - Team management
```### Strategie di Caching```bash
# Team features:
# - Team workspaces
# - Advanced permissions
# - Shared templates
# - Usage analytics
# - SSO integration
```## Gestione del Team```bash
# 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
```### Spazi di Lavoro del Team```bash
# 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
```### Template Condivisi```bash
# 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
```### Analisi di Utilizzo```bash
# File structure best practices:
src/
  components/
    common/
    pages/
  utils/
  hooks/
  services/
  styles/
  tests/
public/
  assets/
  images/
```## Prezzi e Limiti```bash
# Use linting and formatting:
# ESLint for code quality
# Prettier for formatting
# TypeScript for type safety
# Husky for git hooks

Linee Guida per la Collaborazione

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

Risorse

Documentazione

• Documentazione di CodeSandbox
• Riferimento API
• Guida all'Embedding

Community

• Discord di CodeSandbox
• Repository GitHub
• Forum della Community

Template ed Esempi

• Template Ufficiali
• Sandbox della Community
• Esempi di Tutorial