hackernews react graphql

해커 뉴스 클론 React/GraphQL

이 프로젝트는 React 및 GraphQL을 사용하여 Universal JavaScript로 다시 작성한 해커 뉴스의 클론입니다. 생산 준비 기술을 사용하여 프로젝트를 구성하는 데 도움이되는 예 또는 보일러 플레이트입니다.

라이브 데모

개요

특징

• React- (UI 프레임 워크)

• GraphQL- (웹 데이터 API)

• Apollo- (GraphQL 클라이언트/서버)

• 다음 - (라우팅, SSR, 핫 모듈 재 장전, 코드 분할, 빌드 도구 사용 웹 팩)

• TypeScript- (정적 유형)

• Webpack- (Module Bundler)

• Postcss- (CSS 처리)

• node.js- (웹 서버)

• Express- (웹 앱 서버)

• 여권 - (인증)

• eslint- (코딩 모범 사례/코드 강조 표시)

• 농담 - (테스트)

• Docker- (컨테이너 배포)

• 선택적 - 원사 또는 PNPM 패키지 관리자 - (더 나은 종속성)

이익

프론트 엔드

• 선언적 UI- ( react )
• 정적 타이핑 ( typescript )
• GraphQL Fragment CoLocation- ( @apollo/client )
• 프리 페치 페이지 자산 - ( next )

섬기는 사람

• Universal JS- ( node & express )
• 선언적 그래프 QL 스키마 - ( apollo-server )
• GraphQL 쿼리 배치-( apollo-server-express )
• GraphQL 저장 쿼리-( apollo-server-express )
• Easy Graphiql 포함-( apollo-server-express )
• 지역 인증 전략 - ( passport )
• 서버 측 렌더링 - ( next )
• 코드 분할 - ( next )
• 정적 웹 사이트 구축 - ( next )
• 컨테이너 기반 런타임 - ( docker )

Dev/Test

• 핫 모듈 새로 고침 - ( next )
• 스냅 샷 테스트 - ( jest )
• GraphQL Playground- ( apollo-server-express )
• 더 빠른 패키지 설치 - ( pnpm / yarn )
• JS/TS 모범 사례 - ( eslint )

아키텍처 개요

server.ts 는 진입 점입니다. Express를 사용하고 요청을 다음으로 전달합니다. 다음 SSR은 Apollo Helper의 getServerSideProps() 후크를 사용하여 페이지를 렌더링합니다. 따라서 앱은 클라이언트 또는 서버에서 GraphQL 요청을 만듭니다.

클라이언트가 페이지를로드하면 <Link href="/"> 에서 다음 페이지 코드를 예압합니다. 클라이언트가 다음 페이지로 탐색하면 하나의 그래프 QL 쿼리 만 렌더링하기 만하면됩니다. 엄청난!

자세한 내용 : Next.js, Apollo GraphQL 클라이언트

GraphQL : Apollo 또는 GraphQL Docs의 GraphQL-Tools

디렉토리 구조

각 웹 페이지에는 pages 에 반응 구성 요소가 있습니다. 서버 코드는 server 에 있습니다. 클라이언트 또는 서버에서 실행되는 공유 코드는 src 입니다. 잘못된 환경에서 코드를 실행하지 않도록 src 의 server 나 pages 에서 가져 오지 마십시오.

프로젝트 루트에는 TypeScript, Babel, Eslint, Docker, Flow, NPM, Yarn, 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 파일을 포함하여 설정을 구성 할 수 있습니다 ( ' dotenv'NPM 패키지입니다). .env 파일은 .gitignore 에 포함되어 있습니다.

테스트 방법

농담

npm test

이 프로젝트는 Jest를 사용하고 React 구성 요소의 스냅 샷 테스트를 수행 할 수 있습니다. 구성 요소가 변경 될 때마다 npm test -- -u 또는 npx jest --updateSnapshot 사용하여 스냅 샷을 업데이트하십시오.

배포를위한 구축 방법

npm run build:prod : node.js/expres를 사용하는 Entry Point server.ts 가있는 Nextjs 앱. TypeScript 컴파일러를 사용하여 프로젝트 SRC를 트랜스 파일로 만들어 빌드합니다.

또는

npm run build-docker Docker Container : Dockerfile을 사용하여 Docker 컨테이너를 작성합니다.

정적 웹 사이트 (선택 사항)

다음 JS를 사용하면 강력한 정적 웹 사이트를 만들 수 있지만 서버 측 렌더링이 필요한 경우 고려해야합니다.

npm run build-static-website : 정적 웹 사이트를 /build/static 으로 빌드합니다. 정적 웹 서버를 사용하십시오 . nginx/github 페이지.

기여

풀 요청을 환영합니다. 아이디어, 대화 또는 피드백에 대한 문제를 제기하십시오.

지역 사회

이 프로젝트를 시작한 후 트위터에서 @ClintondAnnolfo를 팔로우하십시오.