### NPM Commands for Local Development and Building

Source: https://context7.com/sourcecraft/s3-static-site.git/llms.txt

This section outlines essential npm commands for managing the React application locally. It covers dependency installation (`npm ci`), starting the development server (`npm run dev`), building the production version (`npm run build`), previewing the build (`npm run preview`), and running the linter (`npm run lint`). These commands are crucial for the development and deployment workflow.

```bash
# Установка зависимостей
cd react-sample-app
npm ci

# Запуск dev-сервера для локальной разработки
npm run dev

# Сборка продакшн версии
npm run build

# Предпросмотр собранной версии
npm run preview

# Проверка кода линтером
npm run lint
```

--------------------------------

### Manually Create Yandex Cloud Storage Bucket (YAML)

Source: https://context7.com/sourcecraft/s3-static-site.git/llms.txt

This workflow allows for the manual creation of a Yandex Cloud Object Storage bucket configured for static website hosting. It takes a bucket name as input and uses Yandex Cloud CLI to set up the bucket with public access and an index document.

```yaml
workflows:
  create-bucket-manual-workflow:
    inputs:
      bucket-name:
        type: string
        required: true
    tasks:
      - name: create-bucket-task
        env:
          BUCKET_NAME: ${{ inputs.bucket-name }}
        cubes:
          - name: get-iam-token
            env:
              ID_TOKEN: ${{ tokens.SERVICE_CONNECTION.id_token }}
              YC_SA_ID: ${{ tokens.SERVICE_CONNECTION.service_account_id }}
            image: cr.yandex/sourcecraft/yc-iam:latest

          - name: create-bucket
            env:
              YC_FOLDER_ID: ${{ tokens.SERVICE_CONNECTION.folder_id }}
              YC_IAM_TOKEN: ${{ cubes.get-iam-token.outputs.IAM_TOKEN }}
            image: cr.yandex/sourcecraft/yc-cli:latest
            script:
              - |
                yc config set folder-id $YC_FOLDER_ID
                yc storage bucket create \
                  --name $BUCKET_NAME \
                  --default-storage-class standard \
                  --max-size 1073741824 \
                  --public-read \
                  --public-list \
                  --public-config-read
                yc storage bucket update \
                  --name $BUCKET_NAME \
                  --website-settings '{"index": "index.html"}'
```

--------------------------------

### Build and Deploy React App to Yandex Cloud Object Storage (YAML)

Source: https://context7.com/sourcecraft/s3-static-site.git/llms.txt

This workflow defines the CI/CD process for building a React application using Node.js and deploying its static assets to Yandex Cloud Object Storage. It includes tasks for building the app, obtaining IAM tokens, and uploading files with specified content types.

```yaml
on:
  push:
    - workflows: build-and-deploy-workflow

tokens:
  SERVICE_CONNECTION:
    service_connection: default-service-connection
    scope: org

workflows:
  build-and-deploy-workflow:
    tasks:
      - name: build-task
        cubes:
          - name: build-reactapp
            image: node:latest
            script:
              - |
                cd ./react-sample-app
                npm ci
                npm run build
            artifacts:
              paths:
                - react-sample-app/dist.zip

      - name: deploy-task
        env:
          BUCKET_NAME: "your-bucket-name"
        needs:
          - build-task
        cubes:
          - name: get-iam-token
            env:
              ID_TOKEN: ${{ tokens.SERVICE_CONNECTION.id_token }}
              YC_SA_ID: ${{ tokens.SERVICE_CONNECTION.service_account_id }}
            image: cr.yandex/sourcecraft/yc-iam:latest

          - name: deploy-reactapp
            env:
              YC_FOLDER_ID: ${{ tokens.SERVICE_CONNECTION.folder_id }}
              YC_IAM_TOKEN: ${{ cubes.get-iam-token.outputs.IAM_TOKEN }}
            image: cr.yandex/sourcecraft/yc-cli:latest
            script:
              - |
                yc config set folder-id $YC_FOLDER_ID
                cd ./react-sample-app
                DIST_DIR="./dist"

                # Загрузка HTML файлов
                find $DIST_DIR -name "*.html" -type f | while read file; do
                  key="${file#$DIST_DIR/}"
                  yc storage s3api put-object --bucket $BUCKET_NAME --key "$key" --body "$file" --content-type "text/html"
                done

                # Загрузка JavaScript файлов
                find $DIST_DIR -name "*.js" -type f | while read file; do
                  key="${file#$DIST_DIR/}"
                  yc storage s3api put-object --bucket $BUCKET_NAME --key "$key" --body "$file" --content-type "application/javascript"
                done

                # Загрузка CSS файлов
                find $DIST_DIR -name "*.css" -type f | while read file; do
                  key="${file#$DIST_DIR/}"
                  yc storage s3api put-object --bucket $BUCKET_NAME --key "$key" --body "$file" --content-type "text/css"
                done
```

--------------------------------

### Configure Vite for React App Base Path (TypeScript)

Source: https://context7.com/sourcecraft/s3-static-site.git/llms.txt

This TypeScript configuration file sets up Vite for building a React application. It ensures the correct base path is configured for the application to function properly when deployed as a static site.

```typescript
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/'
})
```

--------------------------------

### React App Structure with TypeScript and State Hooks

Source: https://context7.com/sourcecraft/s3-static-site.git/llms.txt

This snippet showcases the main component of a React application built with TypeScript. It utilizes the `useState` hook for managing component state and imports necessary assets and styles. The component renders a basic UI with logos, a title, and a counter button.

```tsx
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import srcLogo from './assets/sourcecraft.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vite.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://sourcecraft.dev" target="_blank">
          <img src={srcLogo} className="logo react" alt="SourceCraft logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React + SourceCraft</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and commit to deploy
        </p>
      </div>
    </>
  )
}

export default App
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.