Make hot-reload and go to definition work in a react typescript Monorepo with Lerna , Yarn and Craco using path mapping

vscode screenshot with Go to definition option on a code import
Go to definition option in vscode
  1. The ability to jump through code implementation in dev mode makes it easy to debug and/or…

Set up your Next.js project with TypeScript, Tailwind, React Testing Library, Jest, Prettier, and ESlint.

human hand rising from the ocean
Photo by nikko macaspac on Unsplash
  1. Official Next.js starter templates here
  2. Github repo for this tutorial here

There’s a directory in the nextjs GitHub repo that most people ignore, the example’s directory! It contains numerous nextjs starter templates with various partner technologies. Some of these include nextjs with: typescript, tailwind, apollo, urql, relay, redux, chakra ui…

Banner image with GraphQL Logo and written “GraphQL”

Generate GraphQL Schema From Endpoint. Generate GraphQL Queries,Mutations,Subscriptions from GraphQL Schema.

Lets cut to the chase, shall we?

  1. Run get-graphql-schema remotely with npx. Replace the URL obviously 🤷🏿‍♂️
npx get-graphql-schema https://countries.trevorblades.com > schema.graphql

2. A file named schema.graphql is generated in your current working directory.

  1. Run gql-generator remotely with npx
npx gqlg --schemaFilePath schema.graphql --destDirPath ./queries-mutations_subscriptions --depthLimit 5

2. A folder named queries-mutations_subscriptions is created in your current working directory with queries,mutations, and subscriptions sub-folders inside

c). It’s Done!

What are tests. Why test. What to test. What to use to test. How to test.

How to test react applications with jest and react testing library. Image courtesy of morioh.com
  1. TL;DR:
  2. Why Write Tests?
  3. Types of Testing
  4. Which Tests Should I Write?
  5. Which Testing Library/Framework Should I Use?
  6. React Testing Library vs Enzyme
  7. What Should We Test?
  8. Testing Terminology
  9. Test Anatomy
  10. Setup React With…

Containerization on the front-end with React and docker in development and production, and deployment of a React application with docker and nginx

Deploy react app with docker and nginx. Image rights https://www.hkinfosoft.com
  1. The github repo -> https://github.com/machariamuguku/Docker-React-Nginx
  2. Steps:

a) Create a react app

b) Install docker and docker compose

c) Create a dockerfile (with a node image for building and an nginx image for deployment)

d) Create docker compose file

e) deploy the container

Imagine you want to import a laptop¹ from…

Macharia Muguku

A student of the world ; My brain has too many tabs open ; 🇰🇪; www.muguku.co.ke

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store