rurumimic / react-ts

React.js + Koa.js with TypeScript

React.js with TypeScript

Contents

Koa + React

1. Start with Yarn: Javascript package manager.
   • node, npm, git
2. Koa.js with TypeScript: Web Framework for Node.js.
   • koa, typescript, gulp
3. React.js with TypeScript: Web Application Javascript library.
   • create-react-app
4. koa-static: Send static files to client.
5. koa-router: Router middleware. Connect the koa server to the react app in development environment using proxy settings.
   • server: dotenv, ts-node
   • client: axios
6. concurrently: Development environment automation.

Lint

1. ESLint: Linter for the Javascript/TypeScript language.
2. Prettier: Code Formatter.

Test-driven development

1. React test: Jest.
   • axios-mock-adapter
2. Node test: Mocha, Chai, Supertest.

Database

1. Database: MariaDB with Docker.
2. Sequelize: Promise-based Node.js ORM
   • mariadb

OAuth2

1. GitHub OAuth Apps: Register a new GitHub OAuth application.
2. Passport: Get a GitHub user profile.
   • passport-github2, koa-passport, koa-bodyparser, koa-session
3. Sign up: Save a user profile in the database.
4. Sign in/out: Koa.js authentication.

React.js

Home

1. Favicon: Web app manifests.
2. Font: Web fonts.
3. Home page
   • node-sass, react-bootstrap, react-router
4. Sign in page

Login

1. Redux: store: Setting up the redux store.
   • @reduxjs/toolkit, react-redux
2. Redux: reducer: Creating the initial state slices.
3. Redux: sign in/out: Fetch a user data. Store in the redux store.
4. Web storage: Keep data in local.
   • redux-persist

Writings

1. Write diary: Save and erase a diary to database.
   • react-helmet, react-js-pagination

Deployment

1. AWS RDS
2. AWS Beanstalk
3. AWS Route 53

---

ECMA

• ES2019: ES10.
• ES2018: ES9. ...identifier
• ES2017: ES8.
• ES2016: ES7. await, async
• ES2015: ES6. import, export
• ES2009: ES5

react-ts's Issues

Upgrade repo `react-ts`

• yarn classic → yarn berry 3
• react 16 → 18
• create-react-app → vite

Not an issue, a thank you

Hi, I wanted to thank you :

• I am working on setting up Github authentication using passport-github2
• Many examples are on the web for pure node JS, very few are there in Typescirpt.

I found one example in your repository, and wanted to thank you about it :)

One question though : I could ot find the source code of the Profile type, which I suppose is an interface, have I missed it ?

Oh yeah, just found it import { Profile } from 'passport-github2'

Note that you have a small issue :

• this :

      const verify = (
        accessToken: string,
        refreshToken: string,
        profile: passport_github2.Profile, // type was Profile, but well, I don't have a Profile interface or class
        done: OAuth2Strategy.VerifyCallback
      ): void => {
        console.log('hugo-express accessToken : ', accessToken)
        console.log('hugo-express refreshToken : ', refreshToken)
        console.log('hugo-express profile : ', profile)
        return done(null, profile.id)

• should be :

      const verify = (
        accessToken: string,
        refreshToken: string,
        profile: passport_github2.Profile, // type was Profile, but well, I don't have a Profile interface or class
        done: OAuth2Strategy.VerifyCallback
      ): void => {
        console.log('hugo-express accessToken : ', accessToken)
        console.log('hugo-express refreshToken : ', refreshToken)
        console.log('hugo-express profile : ', profile)
        // return done(null, profile.id)
        return done(null, profile)