Use Github Action to deploy React app to Surge

Loading

Reading Time: 2 minutes Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets. Keep the personal access token in a safe place and do not lose it npm script commands Add script commands “build” and “clean” to build application and generate artifacts in dist/ directory Run “npm run build” to build static application before deployment … Read more

Use Github Action to deploy React app to Netlify

Loading

Reading Time: 2 minutes Generate a personal access token and create ACCESS_TOKEN variable under Settings -> Secrets. Keep the personal access token in a safe place and do not lose it Fix 404 not found when page is refreshed My React app uses Reach Router library to route user from root / to /countries/:language. When I refreshes page with … Read more

Add apollo-client to a React project

Loading

Reading Time: < 1 minute Set up Apollo Client for React npm install apollo/client and graphql Create client.tsx file to store configuration of apollo-client react import ApolloClient, InMemoryCache and HttpLink from ‘@apollo/client’ Initialize and export an instance of ApolloClient Test client instance in client.tsx by executing a GraphQL query Create a new folder named graphql and add get-languages.tsx in it … Read more

Set up a React and TypeScript project from scratch

Loading

Reading Time: 2 minutes Create a folder ts-graphql-country and change to directory Generate package.json Add “browserslist”: [ “last 2 Chrome versions” ] in package.json Install react, react-dom and @reach/router Install parcel bundler and prettier Add dev script in package.json to launch web site at http://localhost:1234 Create a blank index.html in src folder Create .prettierrc file to store prettier configurations … Read more