hackernews react graphql
1.0.0
Este proyecto es un clon de Hacker News reescrito con Universal JavaScript, utilizando React y GraphQL. Está destinado a ser un ejemplo o una caldera para ayudarlo a estructurar sus proyectos utilizando tecnologías listas para la producción.
Demostración en vivo
React - (marco de la interfaz de usuario)
GraphQL - (API de datos web)
Apollo - (Cliente/servidor GraphQL)
SIGUIENTE - (Enrutamiento, SSR, recarga del módulo Hot, División de código, Build Tool utiliza Webpack)
TypeScript - (tipos estáticos)
Webpack - (Bundler del módulo)
PostCSS - (procesamiento CSS)
Node.js - (servidor web)
Express - (servidor de aplicaciones web)
Pasaporte - (autenticación)
Eslint - (Muestras de codificación/resaltado de código)
Jest - (pruebas)
Docker - (implementación del contenedor)
Opcional - Administrador de paquetes de hilo o PNPM - (mejores dependencias)
Interfaz
react )typescript )@apollo/client )next )Servidor
node & express )apollo-server )apollo-server-express )apollo-server-express )apollo-server-express )passport )next )next )next )docker )Dev/prueba
next )jest )apollo-server-express )pnpm / yarn )eslint )
server.ts es el punto de entrada. Utiliza solicitudes express y pasa a Siguiente. A continuación, la SSR representa las páginas usando getServerSideProps() gancho de Apollo Helper. Por lo tanto, la aplicación realiza solicitudes GraphQL en el cliente o servidor.
Cuando el cliente carga la página, se precede al siguiente código de las páginas desde cualquier <Link href="/"> . Cuando el cliente navega a la página siguiente, solo necesita hacer una consulta GraphQL para renderizar. ¡Excelente!
Ver más: Next.js, Apollo Graphql Client
GraphQL: Graphql-Tools de Apollo o Graphql Docs
Cada página web tiene un componente React en pages . El código del servidor está en server . El código compartido que se ejecuta en el cliente o servidor está en src . No importe del server o pages en src para evitar ejecutar el código en el entorno incorrecto.
La raíz del proyecto contiene archivos de configuración como TypeScript, Babel, Eslint, Docker, Flow, NPM, Yarn, Git.
Puede descargar y ejecutar el repositorio con un comando para gobernarlos a todos:
git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start
Ejecutar la aplicación en modo dev se aparece en pleno derecho, incluida la recarga del módulo caliente :
npm install
npm start
Para ejecutar en modo de producción:
npm run build:prod && npm run start:prod
El proyecto se ejecuta fuera del cuadro con la configuración predeterminada ( /src/config.ts ). Puede incluir un archivo .env en su proyecto root para configurar la configuración (este es el paquete ' Dotenv ' NPM). El archivo .env se incluye en .gitignore .
npm test
Este proyecto usa broma y puede hacer pruebas de instantáneas de componentes React. Cada vez que se cambia un componente, actualice las instantáneas con npm test -- -u o npx jest --updateSnapshot .
npm run build:prod : Aplicación NextJS con server.ts de punto de entrada.ts que usa Node.js/Express. Utiliza el compilador TypeScript para transmisar el proyecto SRC para construir.
O
npm run build-docker Docker Container: construye un contenedor Docker usando DockerFile.
NextJS nos permite hacer un poderoso sitio web estático poderoso, pero debe considerar si necesita representación en el lado del servidor.
npm run build-static-website : Builts estáticos Sitio web a /build/static . Use un servidor web estático, por ejemplo. Páginas Nginx/GitHub.
Las solicitudes de extracción son bienvenidas. Presentar un problema para ideas, conversación o comentarios.
Después de que ★ estrella este proyecto, siga @ClIntondannolfo en Twitter.
