hackernews react graphql
1.0.0
Ce projet est un clone de Hacker News réécrit avec Universal JavaScript, en utilisant React et GraphQL. Il est destiné à être un exemple ou un passe-partout pour vous aider à structurer vos projets à l'aide de technologies prêtes à la production.
Démo en direct
React - (Framework UI)
GraphQL - (API de données Web)
Apollo - (GraphQL Client / Server)
Suivant - (routage, SSR, rechargement du module chaud, division de code, outil de construction utilise webpack)
TypeScript - (types statiques)
Webpack - (module bundler)
POSTCSS - (traitement CSS)
Node.js - (serveur Web)
Express - (serveur d'applications Web)
Passeport - (authentification)
ESLINT - (Codage Best Practices / Code Fait en surbrillance)
Jest - (tests)
Docker - (déploiement des conteneurs)
Facultatif - gestionnaire de packages en fil ou PNPM - (meilleures dépendances)
L'extrémité avant
react )typescript )@apollo/client )next )Serveur
node & express )apollo-server )apollo-server-express )apollo-server-express )apollo-server-express )passport )next )next )next )docker )Dev / test
next )jest )apollo-server-express )pnpm / yarn )eslint )
server.ts est le point d'entrée. Il utilise Express et passe les demandes à Suivant. Le SSR suivant rend les pages à l'aide de getServerSideProps() Hook d'Apollo Helper. Par conséquent, l'application fabrique des demandes GraphQL sur le client ou le serveur.
Lorsque le client charge la page, il précharge les pages suivantes du code à partir de n'importe quel <Link href="/"> . Lorsque le client accédère à la page suivante, il suffit de faire une requête GraphQL à rendre. Super!
Voir plus: Next.js, APOLLO GraphQL Client
GraphQL: GraphQL-Tools par Apollo ou GraphQL Docs
Chaque page Web a un composant React en pages . Le code du serveur est dans server . Le code partagé qui s'exécute sur le client ou le serveur est en src . N'importez pas à partir server ou pages dans src pour éviter d'exécuter du code dans le mauvais environnement.
La racine du projet contient des fichiers de configuration tels que TypeScript, Babel, Eslint, Docker, Flow, NPM, Yarn, Git.
Vous pouvez télécharger et exécuter le dépôt avec une commande pour les gouverner tous:
git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start
L'exécution de l'application en mode Dev est entièrement en vedette, y compris le rechargement du module chaud :
npm install
npm start
Pour fonctionner en mode de production:
npm run build:prod && npm run start:prod
Le projet est à court de la boîte avec les paramètres par défaut ( /src/config.ts ). Vous pouvez inclure un fichier .env dans la racine de votre projet pour configurer les paramètres (il s'agit du package NPM ' Dotenv '). Le fichier .env est inclus dans .gitignore .
npm test
Ce projet utilise une plaisanterie et peut effectuer des tests d'instantané des composants React. Chaque fois qu'un composant est modifié, veuillez mettre à jour les instantanés à l'aide de npm test -- -u ou npx jest --updateSnapshot .
npm run build:prod : NextJS App avec Sput Point server.ts qui utilise Node.js / Express. Utilise le compilateur TypeScript pour transpiler le projet SRC pour construire.
OU
npm run build-docker Docker Container: construit un conteneur Docker à l'aide de DockerFile.
NextJS nous permet de créer un site Web statique puissant, mais vous devez considérer si vous avez besoin de rendu côté serveur.
npm run build-static-website : construit un site Web statique vers /build/static . Utilisez un serveur Web statique, par exemple. Pages nginx / github.
Les demandes de traction sont les bienvenues. Déposez un problème pour des idées, une conversation ou des commentaires.
Après avoir ★ Jouez ce projet, suivez @Clintondannolfo sur Twitter.
