tiagob / create-full-stack Goto Github PK

Example for web and apollo backend. Only include what's needed

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/client/src",
      "sourceMapPathOverrides": {
        "webpack:///client/src/*": "${webRoot}/*"
      }
    },
    {
      "type": "node",
      "request": "attach",
      "name": "Node: Nodemon",
      "processId": "${command:PickProcess}",
      "restart": true,
      "protocol": "inspector"
    }
  ]
}

A lot of duplicate code across templates. It would be ideal to simplify this with TS macros inside these templates.
microsoft/TypeScript#4892

I spoke with John Boggs. He's interested in this and is down to make his own project to tackle this use case

Becomes a bigger problem with additional templates like chat, maps, pictures which are just added in

https://graphql-code-generator.com/docs/getting-started/development-workflow/#monorepo-and-yarn-workspaces

Need to update the package (bump version in package.json)
https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages

https://classic.yarnpkg.com/en/docs/cli/create/

CRA installs react-scripts on every run which does most of the changes. This is to avoid changes to the global package. Should we do the same or should we check for updates?

https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/packages/create-react-app/createReactApp.js
https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/packages/react-scripts/scripts/init.js

Need to take create-full-stack and eslint-config-full-stack

apollo-server uses /
apollo-server-express uses /graphql

Review how CRA works and test generating all permutations

https://github.com/facebook/create-react-app/tree/master/test

CRA uses lerna and lerna-changelog
https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/lerna.json
https://github.com/facebook/create-react-app/blob/f5c3bdb65480f93b2d4a4c2f3214fc50753de434/package.json#L34-L35

Other options in
https://github.com/lerna/lerna#independent-mode

Include everything a new dev needs to get started.

Ex. install postgres, sync-db, buildNodeBackend etc.

Include in README. Should this be in TS or bash? If it's in bash could install the latest yarn. If it's in TS we have access to a better scripting language and the only thing we're missing is yarn installation (is this true?) which could be included in the README

• Azure
• AWS
• GCP

https://www.apollographql.com/docs/react/caching/cache-configuration/

Currently only using ~half the time. Is this the default?

Right now it's including everything in npm pack under packages/create-full-stack. It only needs to include what tsc compiles into build/ and any templates.

It needs to copy over the templates directory or make templates packages (#49)

Using files in npm package.json like CRA does is confusing because it's in packages/create-full-stack and packages/create-full-stack/build so the filter gets applied twice (ex. if templates is in files it doesn't get included in npm pack)
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json#L22-L23 (this isn't needed because they moved them to packages)

Is there a way to always publish from build/? Could lerna handle this? Trying to overwrite the publish script in package.json with yarn --cwd build/ publish doesn't work

https://github.com/facebook/create-react-app/blob/master/packages/create-react-app/createReactApp.js#L416
https://github.com/facebook/create-react-app/tree/master/packages
cra-template-

https://github.com/expo/expo/tree/master/templates
https://github.com/expo/expo-cli/blob/d1e02e31a4091ec43dd77053758f64c4b83ea00f/packages/expo-cli/src/commands/init.ts#L29
expo-template-

Could do cfs-template-

create-full-stack.com
createfullstack.com (redirect to create-full-stack.com)

https://docusaurus.io/

When you have multiple clients open it would be cool if you update one and the others update. Is this too complicated to include in the example app?

https://www.apollographql.com/docs/react/data/subscriptions/
https://www.apollographql.com/docs/apollo-server/data/subscriptions/
https://hasura.io/docs/1.0/graphql/manual/subscriptions/index.html

Like expo install

https://github.com/SBoudrias/Inquirer.js
https://docs.expo.io/workflow/expo-cli/

Support 2 paths:

1. Any code that can be modified runs locally. Any static code (ex. hasura) runs in docker. Move Postgres to docker so no one needs to install Postgres.

• Dependencies: yarn, node, docker (always) expo-cli, firebase cli, pulumi cli etc. (conditional)
• Check dependencies in the script

2. Fewer dependencies. Everything runs in docker

• Dependencies: yarn, node, docker
• Docker containers have debug tools (ex. vim)

Is path 2 useful? How many dependencies does it really reduce?

Use concurrently. Should this be start (like CRA and expo) or watch (like node)?

Could this solve the single version of react and react-native on web and mobile problem? Blocked on tsc supporting pnp

https://classic.yarnpkg.com/en/docs/pnp/getting-started
microsoft/TypeScript#28289

Something like what's in root but for all template packages. Some of the template packages use prettier instead of eslint.

  "scripts": {
    "lint": "eslint src/**.ts"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**.{ts,tsx}": "eslint --fix"
  }

Should lint-staged include git add? It's some examples.

May want to use prettier on files outside of .ts and .tsx. An example would be .md

https://www.pulumi.com/docs/guides/continuous-delivery/github-actions/

Can we use https://docs.expo.io/guides/authentication/ in conjunction with Firebase?

4 different patterns:

• CRA
• Expo
• Firebase functions
• MS's Node TS starter

Configuration in .env. Both Firebase variables and Google ios and android client ids. Need to add the client ids under the Google whitelist in Firebase itself.

https://docs.expo.io/versions/latest/sdk/google/
https://console.developers.google.com/apis/credentials?project=create-full-stack

Currently explicitly using forward slashes in the path. Windows uses backslashes

https://nodejs.org/api/path.html#path_path_join_paths

New structure. Use copySync on the auth level to the root of the packages. Exclude not flagged clients (ex. for --web exclude mobile/).

• templates/
  • apollo-server-express/
    • firebase-auth/
      • packages/
        • backend/
        • web/
        • mobile/
    • no-auth/
      • packages/
        • backend/
        • web/
        • mobile/
  • hasura/
    • firebase-auth/
      • hasura/
      • packages/
        • firebase-functions/
        • web/
        • mobile/
    • no-auth/
      • hasura/
      • packages/
        • web/
        • mobile/
  • firestore/
    • firebase-auth/
      • packages/
        • web/
        • mobile/
    • no-auth/
      • packages/
        • web/
        • mobile/

Also, rename backend/ to server/ for apollo-server-express/?

Merge dependencies from package.jsons . Verify app name isn't included

https://github.com/tiagob/create-full-stack/blob/master/packages/create-full-stack/src/createReactAppUtils.ts#L30-L31

Could make this change in CRA too