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…


What is GraphQL? How can I set it up for my project? And more

React, Apollo, GraphQL. Image courtesy of hackernoon.com

TL;DR:

  • GraphQL is not a database query language. It’s a query language for API data, like REST.
  • Make a single query and get exactly what you asked for, unlike REST.
  • The GitHub repo for this article can…


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…


N/B:

  1. See instructions for Windows here
  2. Tested on Debian based Distros; Linux Mint and Ubuntu
  3. You can only watch FREE TO AIR channels using this method. In Kenya they include channels from Signet, ADN, Pang and Bamba providers.
  4. Excuse my black and white pictures, i had just changed my Linux…


Case in point: A globemax DVB-T2 Tv stick (see the naked hardware tear-down for the panasonic MN88472 here ) and the (hardware tear-down for the MN88473 demodulator version here). There are two variants of the stick with the following components:

Key components:
Realtek RTL2832P USB interface
Panasonic MN88472/MN88473 Demodulator (2013 and 2014…

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