The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:
Docker - (Container Deployment)
Optional - Yarn or Pnpm Package Manager - (Better Dependencies)
server.tsis the entry point. It uses Express and passes requests to Next. Next SSR renders the pages using
getServerSideProps()hook from Apollo helper. Therefore the app makes GraphQL requests on the client or server.
When the client loads the page it preloads next pages code from any. When the client navigates to the next page it only needs to make one GraphQL query to render. Great!
Each web page has a React component in
pages. Server code is in
server. Shared code that runs on client or server is in
src. Do not import from
srcto avoid running code in the wrong environment.
The project root contains config files such as TypeScript, Babel, ESLint, Docker, Flow, NPM, Yarn, Git.
You can download and run the repo with one command to rule them all:
git clone https://github.com/clintonwoo/hackernews-react-graphql.git && cd hackernews-react-graphql && npm install && npm start
Running the app in dev mode is fully featured including hot module reloading:
To run in production mode:
npm run build:prod && npm run start:prod
The project runs out of the box with default settings (
/src/config.ts). You can include a .env file in your project root to configure settings (this is the 'dotenv' npm package). The .env file is included in .gitignore.
This project uses Jest and can do snapshot testing of React components. Whenever a component is changed, please update the snapshots using
npm test -- -uor
npx jest --updateSnapshot.
npm run build:prod: NextJS app with entry point
server.tsthat uses Node.js/Express. Uses TypeScript compiler to transpile project src to build.
npm run build-dockerDocker Container: Builds a docker container using Dockerfile.
NextJS lets us make a powerful static website but you need to consider if you need server side rendering.
npm run build-static-website: Builds static website to
/build/static. Use a static web server eg. NGINX/Github Pages.
Pull requests are welcome. File an issue for ideas, conversation or feedback.
After you ★Star this project, follow @ClintonDAnnolfo on Twitter.