hackernews react graphql

Hacker News Clone React/GraphQL

Этот проект представляет собой клон хакеровских новостей, переписанных с универсальным JavaScript, используя React и GraphQL. Он предназначен для того, чтобы быть примером или шаблоном, чтобы помочь вам структурировать ваши проекты, используя готовые к производству технологии.

Живая демонстрация

Обзор

С участием

• React - (Framework)

• GraphQL - (API веб -данных)

• Apollo - (GraphQL Client/Server)

• Далее - (Маршрутизация, SSR, Hot Module Reloading, Dlowting, сборка сборки использует WebPack)

• TypeScript - (статические типы)

• WebPack - (модуль Bundler)

• Postcss - (CSS -обработка)

• Node.js - (веб -сервер)

• Express - (сервер веб -приложений)

• Паспорт - (аутентификация)

• Eslint - (лучшие практики кодирования/выделение кода)

• Шутка - (тесты)

• Docker - (развертывание контейнера)

• Необязательно - Диспетчер пакетов пряжи или PNPM - (лучшие зависимости)

Преимущества

Внешний интерфейс

• Декларативный пользовательский интерфейс - ( react )
• Статическое типирование ( typescript )
• Колокация фрагмента GraphQL - ( @apollo/client )
• Предварительные активы страницы - ( next )

Сервер

• Universal JS - ( node & express )
• Декларативная схема графика - ( apollo-server )
• График-запрос пакетирование-( apollo-server-express )
• Graphql сохраняемые запросы-( apollo-server-express )
• Easy Graphiql include-( apollo-server-express )
• Локальная стратегия аутентификации - ( passport )
• Рендеринг на стороне сервера - ( next )
• Разделение кода - ( next )
• Построить на статический веб -сайт - ( next )
• Средство выполнения на основе контейнеров - ( docker )

Разработчик/тест

• Горячий модуль перезагрузка - ( next )
• Тестирование снимка - ( jest )
• GraphQl Playground-( apollo-server-express )
• Установка PACKER - ( pnpm / yarn )
• Лучшие практики JS/TS - ( eslint )

Обзор архитектуры

server.ts - точка входа. Он использует Express и передает запросы на следующий. Далее SSR отображает страницы с использованием крючка getServerSideProps() от Helper Apollo. Поэтому приложение делает запросы GraphQL на клиенте или сервере.

Когда клиент загружает страницу, он предварительно загружает код следующих страниц из любого <Link href="/"> . Когда клиент переходит на следующую страницу, ему нужно сделать только один запрос GraphQL для рендеринга. Большой!

Смотрите больше: Next.js, клиент Apollo GraphQL

GraphQL: GraphQL-Tools от Apollo или GraphQL DOCS

Структура каталога

Каждая веб -страница имеет компонент React на pages . Код сервера находится на server . Общий код, который работает на клиенте или сервере, находится в src . Не импортируйте с server или pages в src , чтобы избежать запуска кода в неправильной среде.

Корень проекта содержит файлы конфигурации, такие как TypeScript, Babel, Eslint, Docker, Flow, NPM, пряжа, git.

Как начать

Один клик скачать и запустить

Вы можете скачать и запустить репо с одной командой, чтобы править их всем:

git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start

Настраивать

Запуск приложения в режиме DEV полностью представлен, включая Hot Module Reloading :

npm install

npm start

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

npm run build:prod && npm run start:prod

Конфигурация

Проект заканчивается из поля с настройками по умолчанию ( /src/config.ts ). Вы можете включить файл .ENV в корневой корневой проекте для настройки настройки (это пакет NPM ' DotEnV ). Файл .env включен в .gitignore .

Как проверить

Шутка

npm test

Этот проект использует Jest и может провести тестирование снимков компонентов React. Всякий раз, когда изменяется компонент, пожалуйста, обновите снимки, используя npm test -- -u или npx jest --updateSnapshot .

Как построить для развертывания

npm run build:prod : приложение NextJS с входной точкой server.ts , который использует node.js/express. Использует компилятор TypeScript для Transpile Project SRC для построения.

ИЛИ

npm run build-docker : строит контейнер Docker с помощью DockerFile.

Статический сайт (необязательно)

NextJS позволяет нам сделать мощный статический веб -сайт, но вам нужно рассмотреть, если вам нужна рендеринг на стороне сервера.

npm run build-static-website : создает статический веб-сайт для /build/static . Используйте статический веб -сервер, например. Nginx/Github Pages.

Внося

Приглашаются запросы. Подайте проблему для идей, разговора или обратной связи.

Сообщество

После того, как вы ★ Сверите этот проект, следите за @clintondannalfo в Твиттере.