hackernews react graphql

Hacker News Clone React/GraphQL

Este projeto é um clone de notícias de hacker reescrito com JavaScript Universal, usando o React e o GraphQL. Destina-se a ser um exemplo ou caldeira para ajudá-lo a estruturar seus projetos usando tecnologias prontas para produção.

Demoção ao vivo

Visão geral

Apresentando

• React - (estrutura da interface do usuário)

• GraphQL - (API de dados da web)

• Apollo - (cliente/servidor grafql)

• Próximo - (roteamento, SSR, recarregamento do módulo quente, divisão de código, ferramenta de construção usa Webpack)

• TypeScript - (tipos estáticos)

• Webpack - (Module Bundler)

• PostCSS - (processamento CSS)

• Node.js - (servidor da web)

• Express - (Web App Server)

• Passport - (autenticação)

• Eslint - (Codificação de melhores práticas/destaque de código)

• JEST - (Testes)

• Docker - (implantação de contêineres)

• Opcional - Gerenciador de pacotes de fios ou PNPM - (melhores dependências)

Benefícios

Front-end

• UI declarativa - ( react )
• Digição estática ( typescript )
• Fragment Colocation de grafql - ( @apollo/client )
• Ativos de página de pré -busca - ( next )

Servidor

• Universal JS - ( node & express )
• Esquema GraphQL Declarativo - ( apollo-server )
• Batching de consulta GraphQL-( apollo-server-express )
• Consultas armazenadas GraphQL-( apollo-server-express )
• Fácil GraphIQL incluir-( apollo-server-express )
• Estratégia de autenticação local - ( passport )
• Renderização do lado do servidor - ( next )
• Divisão de código - ( next )
• Construa para o site estático - ( next )
• Tempo de execução baseado em contêineres - ( docker )

Dev/teste

• Recarregamento do módulo quente - ( next )
• Teste de instantâneo - ( jest )
• Playground GraphQL-( apollo-server-express )
• Instalação mais rápida do pacote - ( pnpm / yarn )
• JS/TS Melhores Práticas - ( eslint )

Visão geral da arquitetura

server.ts é o ponto de entrada. Ele usa solicitações expressas e passa para a próxima. Em seguida, o SSR renderiza as páginas usando o gancho getServerSideProps() do Apollo Helper. Portanto, o aplicativo faz solicitações grafql no cliente ou servidor.

Quando o cliente carrega a página, ele pré -carrega o código das próximas páginas de qualquer <Link href="/"> . Quando o cliente navega para a próxima página, ele precisa apenas fazer uma consulta grafql para renderizar. Ótimo!

Veja mais: Next.js, Apollo GraphQL Client

GraphQL: GraphQL-Tools por Apollo ou GraphQL Docs

Estrutura de diretório

Cada página da web possui um componente react nas pages . O código do servidor está no server . O código compartilhado é executado no cliente ou no servidor está no src . Não importe do server ou pages no src para evitar a execução do código no ambiente errado.

A raiz do projeto contém arquivos de configuração como TypeScript, Babel, Eslint, Docker, Flow, NPM, Yarn, Git.

Como começar

Um clique download e execute

Você pode baixar e executar o repo com um comando para governar todos eles:

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

Configurar

Executar o aplicativo no modo dev está totalmente apresentado, incluindo o recarregamento do módulo quente :

npm install

npm start

Para executar no modo de produção:

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

Configuração

O projeto sai fora da caixa com configurações padrão ( /src/config.ts ). Você pode incluir um arquivo .env no seu projeto Root para definir configurações (este é o pacote ' dotenv ' npm). O arquivo .env está incluído no .gitignore .

Como testar

Jove

npm test

Este projeto usa JEST e pode fazer testes de instantâneos de componentes do React. Sempre que um componente é alterado, atualize os instantâneos usando npm test -- -u ou npx jest --updateSnapshot .

Como construir para implantação

npm run build:prod : NextJS App com o ponto de entrada server.ts que usa o Node.js/Express. Usa o TypeScript Compiler para transpilar o Projeto SRC para criar.

OU

npm run build-docker Docker Container: Construa um contêiner do Docker usando o Dockerfile.

Site estático (opcional)

NextJs permite fazer um poderoso site estático, mas você precisa considerar se precisar de renderização do lado do servidor.

npm run build-static-website : cria site estático para /build/static . Use um servidor da web estático, por exemplo. Páginas nginx/github.

Contribuindo

Solicitações de tração são bem -vindas. Arquive um problema para idéias, conversas ou feedback.

Comunidade

Depois de ★ Estrear este projeto, siga @clintondannolfo no Twitter.