Перейти к основному содержимому

Create App

@emd-cloud/create-app — это инструмент для быстрого создания проектов с интеграцией EMD Cloud. Поддерживает различные фреймворки, языки программирования и инструменты разработки.

Быстрый старт​

npm create @emd-cloud/app@latest

Или с указанием имени проекта:

npm create @emd-cloud/app@latest my-emd-app

Другие пакетные менеджеры​

# Yarn
yarn create @emd-cloud/app my-app

# PNPM
pnpm create @emd-cloud/app my-app

# Bun
bun create @emd-cloud/app my-app

Интерактивные опции​

При запуске команды вам будет предложено выбрать:

1. Фреймворк​

Vite + React

  • Легкий и быстрый опыт разработки
  • Hot Module Replacement (HMR)
  • Мгновенный запуск
  • Оптимизированные production сборки с Rollup
  • Лучше всего для SPA и библиотек компонентов

Next.js 15+

  • Full-stack возможности с серверными и клиентскими компонентами
  • Встроенные API routes
  • Оптимизация изображений и шрифтов
  • SEO-friendly по умолчанию
  • App Router (новейшая архитектура)

2. Язык​

  • JavaScript — классический выбор
  • TypeScript — типизация для больших проектов

3. Компилятор (для Vite + React)​

  • Standard — использует Babel
  • SWC — Rust-based компилятор, в 20 раз быстрее

4. Стилизация​

Vanilla CSS

  • Чистый CSS без зависимостей
  • Полный контроль над стилями

SCSS/SASS

  • Препроцессор CSS
  • Переменные, миксины, вложенность

Tailwind CSS

  • Utility-first CSS фреймворк
  • Быстрая разработка UI
  • Минимальный размер bundle

Tailwind CSS + shadcn/ui (только TypeScript)

  • Tailwind + готовые компоненты
  • Доступные и настраиваемые компоненты
  • Лучшие практики UI/UX

5. State Management​

None

  • Базовая настройка без state management
  • Используйте React Context или локальное состояние

Redux Toolkit

  • Официальный рекомендуемый способ использования Redux
  • Упрощенная настройка и использование
  • Встроенные best practices

Effector

  • Быстрый и мощный state manager
  • Отличная TypeScript поддержка
  • Реактивное программирование

TanStack Query

  • Управление серверным состоянием
  • Кеширование, синхронизация, обновление
  • Отлично для работы с API

6. Developer Tools​

ESLint

  • Standard — базовые правила
  • Airbnb — строгие правила от Airbnb
  • None — без линтера

Prettier

  • Автоматическое форматирование кода
  • Консистентный стиль

Git

  • Инициализация репозитория
  • Первый коммит

Структура проекта​

Vite + React​

my-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md

Next.js​

my-app/
├── app/
│   ├── layout.tsx
│   ├── page.tsx
│   └── globals.css
├── public/
├── .gitignore
├── next.config.js
├── package.json
├── tsconfig.json
└── README.md

Команды разработки​

Vite + React​

# Запуск dev сервера
npm run dev

# Сборка для production
npm run build

# Предпросмотр production сборки
npm run preview

# Линтинг
npm run lint

Next.js​

# Запуск dev сервера
npm run dev

# Сборка для production
npm run build

# Запуск production сервера
npm start

# Линтинг
npm run lint

Интеграция EMD Cloud​

Все созданные проекты уже включают настроенную интеграцию с EMD Cloud.

ApplicationProvider​

// src/main.jsx (Vite) или app/layout.tsx (Next.js)
import { ApplicationProvider } from '@emd-cloud/react-components';

function App() {
  return (
    <ApplicationProvider
      app={process.env.VITE_EMD_CLOUD_APP_ID} // или NEXT_PUBLIC_EMD_CLOUD_APP_ID
    >
      <YourApp />
    </ApplicationProvider>
  );
}

Environment переменные​

Создайте файл .env.local:

# Vite
VITE_EMD_CLOUD_APP_ID=your-app-id

# Next.js
NEXT_PUBLIC_EMD_CLOUD_APP_ID=your-app-id

Использование хуков​

import { useAuth, useDatabase } from '@emd-cloud/react-components';

function MyComponent() {
  const { user, login } = useAuth();
  const { getRows } = useDatabase('collection-id');
  
  // Ваш код
}

Выбор фреймворка​

Выбирайте Vite + React если нужно:​

  • ✅ Быстрая разработка SPA
  • ✅ Минимальная конфигурация
  • ✅ Максимальная скорость разработки
  • ✅ Библиотека компонентов
  • ✅ Клиентское приложение

Выбирайте Next.js если нужно:​

  • ✅ SEO оптимизация
  • ✅ Server-Side Rendering (SSR)
  • ✅ Static Site Generation (SSG)
  • ✅ API routes на том же сервере
  • ✅ Full-stack приложение
  • ✅ Оптимизация производительности из коробки

Кастомизация​

После создания проекта вы можете:

  • Добавить дополнительные библиотеки
  • Настроить конфигурацию сборки
  • Изменить структуру проекта
  • Добавить свои компоненты и страницы

Примеры проектов​

Простое приложение с авторизацией​

npm create @emd-cloud/app@latest my-auth-app
# Выберите: Vite + React, TypeScript, Tailwind CSS, None

Full-stack приложение​

npm create @emd-cloud/app@latest my-fullstack-app
# Выберите: Next.js, TypeScript, Tailwind + shadcn/ui, TanStack Query

Библиотека компонентов​

npm create @emd-cloud/app@latest my-components
# Выберите: Vite + React, TypeScript, SCSS, None

Обновление зависимостей​

# Проверить устаревшие пакеты
npm outdated

# Обновить все зависимости
npm update

# Обновить EMD Cloud пакеты
npm install @emd-cloud/sdk@latest @emd-cloud/react-components@latest

Поддержка​

Если у вас возникли проблемы:

  1. Проверьте документацию
  2. Посмотрите примеры
  3. Создайте issue на GitHub
  4. Спросите в Telegram сообществе

Changelog​

Следите за обновлениями на GitHub Releases

Следующие шаги​

Полезные ссылки​