entria/entria-fullstack

Monorepo Playground with GraphQL, React, React Native, Relay Modern, TypeScript and Jest

entria-fullstack's Issues

make typescript work

Add mobile scripts on root

Missing entrypoint when running server package with docker-compose

Tried to run docker-compose up on packages/server and got this error:

graph-api_1  | npm ERR! missing script: watch

Seems that the entrypoint of docker-compose.yml wasn't updated when you guys moved to webpack.

Shared Relay components

Make it possible to relay components interact between packages

add common/shared package

we need a package that should be consumed by other packages

• it should be consumed by react package
• it should be consumed by react native package
• it should be consumed by server package
• it should work on debug mode
• it should also work when transpiling the code to run in production

add scripts to start server and app

i18n

investigate solutions

https://facebookincubator.github.io/fbt/
react-i18next

remote cache react native

check cache store format here https://github.com/facebook/metro/blob/master/packages/metro-cache/src/stores/HttpStore.js

• implement server routes GET/PUT to get cached data

check docs here https://facebook.github.io/metro/docs/en/caching#cache-fetching-saving

rn60

upgrade to rn60

Pre-commit hooks are using tslint for linting typescript files

Since we configurated eslint to lint typescript files, the top level package.json list-staged should be:

"lint-staged": {
    "*.js": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "yarn jest:lint --passWithNoTests",
      "git add"
    ],
    "*.ts": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "eslint --fix",
      "git add"
    ],
    "*.tsx": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "eslint --fix",
      "git add"
    ],
    "*.yml": [
      "prettier --write",
      "git add"
    ]
  },

and not

"lint-staged": {
    "*.js": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "yarn jest:lint --passWithNoTests",
      "git add"
    ],
    "*.ts": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "tslint --fix",
      "git add"
    ],
    "*.tsx": [
      "prettier --write --single-quote true --trailing-comma all --print-width 100",
      "tslint --fix",
      "git add"
    ],
    "*.yml": [
      "prettier --write",
      "git add"
    ]
  },

make test/jest work

Error starting server

fix external imports not being transpiled

check this example: https://github.com/adityak74/babel7-import-example
related: babel/babel#8945

webpack package

remove lerna

yarn workspaces is enough

fix relay HMR

  | warningWithoutStack | @ | react.development.js?72d0:225
-- | -- | -- | --
  | warning | @ | react.development.js?72d0:629
  | createElementWithValidation | @ | react.development.js?72d0:1713
  | React$$1.createElement | @ | react-hot-loader.dev…opment.js?c2cb:1658
  | render | @ | UserList.tsx?6687:52

checkPropTypes.js?a8ee:19 Warning: Failed context type: Invalid prop/context `relay` supplied to `ContainerConstructor`, expected `undefined` to be an object with an `environment` and `variables`.
    in ContainerConstructor (created by HotExportedQueryRendererWrapper)
    in HotExportedQueryRendererWrapper
printWarning @ checkPropTypes.js?a8ee:19
checkPropTypes @ checkPropTypes.js?a8ee:82
getMaskedContext @ react-dom.development.js?61bb:9419
mountIndeterminateComponent @ react-dom.development.js?61bb:14541
beginWork @ react-dom.development.js?61bb:15063
performUnitOfWork @ react-dom.development.js?61bb:17820
workLoop @ react-dom.development.js?61bb:17860
renderRoot @ react-dom.development.js?61bb:17946
performWorkOnRoot @ react-dom.development.js?61bb:18837
performWork @ react-dom.development.js?61bb:18749
performSyncWork @ react-dom.development.js?61bb:18723
requestWork @ react-dom.development.js?61bb:18592
scheduleWork @ react-dom.development.js?61bb:18401
enqueueForceUpdate @ react-dom.development.js?61bb:12352
Component.forceUpdate @ react.development.js?72d0:390
(anonymous) @ react-hot-loader.development.js?c2cb:2356
(anonymous) @ react-hot-loader.development.js?c2cb:2355
setTimeout (async)
updateInstances @ react-hot-loader.development.js?c2cb:2349
(anonymous) @ react-hot-loader.development.js?c2cb:2372
hotSetStatus @ bundle.js:219
hotApply @ bundle.js:601
replace @ client-hmr.js?288e:50
async function (async)
replace @ client-hmr.js?288e:43
socket.addEventListener @ client.js?168d:42
buildReactRelayContainer.js?8912:37 Uncaught TypeError: Cannot read property 'environment' of undefined
    at ContainerConstructor (buildReactRelayContainer.js?8912:37)
    at ProxyFacade (react-hot-loader.development.js?c2cb:791)

The above error occurred in the <ContainerConstructor> component:
    in ContainerConstructor (created by HotExportedQueryRendererWrapper)
    in HotExportedQueryRendererWrapper

React will try to recreate this component tree from scratch using the error boundary you provided, HotExportedQueryRendererWrapper.

Errror with styled-components

I have cloned the repository> yarn install> yarn start
and.. =(

PWA Checklist

• web manifest
• workbox

use relay with TS

use this https://github.com/relay-tools/relay-compiler-language-typescript

webpack 5

We should keep on bleeding edge, let's experiment with webpack 5

https://github.com/webpack/webpack/releases/tag/v5.0.0-alpha.3

Tests not passing

  ● Test suite failed to run

    TypeScript diagnostics (customize using `[jest-config].globals.ts-jest.diagnostics` option):
    packages/web/src/UserList.tsx:34:8 - error TS2531: Object is possibly 'null'.

    34       {users.edges.map(({node}) => (
              ~~~~~
    packages/web/src/UserList.tsx:34:26 - error TS2339: Property 'node' does not exist on type '{ readonly node: { readonly id: string; readonly name: string | null; readonly email: string | null; }; } | null'.

    34       {users.edges.map(({node}) => (```

make eslint work

Docker-compose configuration failing

Okay, I'll list the issues:

1. Thinking on monorepo, in the root, I'd like to start the development server with docker-compose. I can't do it.

2. Still in the root path, I'd like to build the server image with Docker and orchestrate the containers by myself. Tried with docker build -f packages/server/Dockerfile . and got this error:

Step 8/9 : RUN npm run build
 ---> Running in 002a83d6bd5c
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2019-08-06T19_31_07_179Z-debug.log
The command '/bin/sh -c npm run build' returned a non-zero code: 1

The top-level package.json doesn't have the build script.

3. In packages/server we have a docker-compose.yml. Updating the entrypoint to npm run start (see #92 ), when we run it:

Step 8/9 : RUN npm run build
 ---> Running in 5536b3fd6b71

> @entria/[email protected] build /app
> npm run clear && babel src --extensions ".es6,.js,.es,.jsx,.mjs,.ts" --ignore *.spec.js --out-dir dist --copy-files


> @entria/[email protected] clear /app
> rimraf ./dist

sh: 1: rimraf: not found

Talking to @sibelius, we thought that Docker context is wrong and isn't recognizing the packages installed on node_modules.

What do need to consider that lerna from readme.md will checked?

In package.json the scripts are using lerna run, there is lerna.json in root of project etc.

I want to understand what missing in project to contribute with you

add web package

babel package/preset

test real world scenario

• form using formik
• form input using material-ui
• form get data from relay fragment and query

test relay with easygraphql

https://gist.github.com/estrada9166/3cc30cece4d159228439298af7b41408

// @flow
/* global __DEV__ */
import fs from'fs';
import path from'path';
import EasyGraphQLTester from 'easygraphql-tester';

import { installRelayDevTools } from 'relay-devtools';
import { Environment, Network, RecordSource, Store } from 'relay-runtime';
import RelayNetworkLogger from 'relay-runtime/lib/RelayNetworkLogger';

import cacheHandler from './cacheHandler';
import { fixtures } from './fixture'

const schema = fs.readFileSync(path.join(__dirname, '..', '..', 'data',  'schema.graphql'), 'utf8');
const tester = new EasyGraphQLTester(schema);

let networkQuery = cacheHandler
if (__DEV__) {
  installRelayDevTools();
  networkQuery = RelayNetworkLogger.wrapFetch(cacheHandler)
}

// If it is a test set this variable or process.env.NODE_ENV === 'test'
if (__TEST__) {
  networkQuery = fetchQuery
}

function fetchQuery(operation, variables) {
  const mockedQuery = tester.mock({
    query: operation.text,
    variables,
    fixture: fixtures[operation.name]
  })
  console.log('Mocked Query: --->', mockedQuery);
  return mockedQuery.json()
}

const network = Network.create(networkQuery);

const source = new RecordSource();
const store = new Store(source);

// export const inspector = new RecordSourceInspector(source);

const env = new Environment({
  network,
  store,
});

export default env;

hooks

use hooks to make relay refetch logic easy

expo app version

create a app with expo to pc weak, expo does that not need of android studio.

https://expo.io/

Tests failing when running tests

Invariant Violation: graphql: Unexpected invocation at runtime. Either the Babel transform was not set up, or it failed to identify this call site. Make sure it is being used verbatim as graphql`.

That happens, although a custom transformer had already being added on #82, but had no success.
If you have any ideas, you can push commits or comment on that PR

Make test helpers work

jest-dom/extend-expect and react-testing-library/cleanup-after-each were commented out during typescript setup on web package. It would be good to make them work with ts.

Maybe this can help

Fix tests on CI

Getting this error on CircleCI test job

yarn run v1.6.0
$ /home/circleci/app/node_modules/.bin/jest --maxWorkers=4 --coverage --forceExit --ci
● Validation Error:

  Preset react-native not found.

  Configuration Documentation:
  https://facebook.github.io/jest/docs/configuration.html

fix server dockerfile

check this approach

https://github.com/slanatech/vue-monorepo-boilerplate

webpack alternative

https://github.com/fuse-box/fuse-box

Apparently faster and better than wp. Worth trying it?

supported node version

which node version is this intended to follow? lts? I'm asking this because we can create a .nvmrc file at the root to help devs.

bring restria here

entria/restria#17

yarn start:ios fails

lerna ERR! yarn run ios stdout:
$ react-native run-ios
Found Xcode project ReactNavigationRelay.xcodeproj
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

lerna ERR! yarn run ios stderr:
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH


Error: Command failed: xcrun instruments -s
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH

    at checkExecSyncError (child_process.js:621:11)
    at Object.execFileSync (child_process.js:639:13)
    at Object.runIOS [as func] (/Users/jabur/foton/entria-fullstack/packages/app/node_modules/react-native/local-cli/runIOS/runIOS.js:76:17)
    at Promise.resolve.then (/Users/jabur/foton/entria-fullstack/packages/app/node_modules/react-native/local-cli/cliEntry.js:117:22)

error Command failed with exit code 1.

lerna ERR! yarn run ios exited 1 in '@entria/app'```

consume schema directly from server instead of copying to app and web

can't find React on app test, maybe because of hoisting

Configuration error:
    
    Could not locate module React mapped as:
    /Users/sibelius/Dev/entria/app/entria-fullstack/packages/app/node_modules/react.
    
    Please check your configuration for these entries:
    {
      "moduleNameMapper": {
        "/^React$/": "/Users/sibelius/Dev/entria/app/entria-fullstack/packages/app/node_modules/react"
      },
      "resolver": null
    }

use bcryptjs instead of bcrypt

bcrypt causes a lot of pain to install in some machines

Not able to start everything (server, app, web)

Was looking around the issues and couldn't see anything related to this, how ever if there is already something like this stated, sorry.
I'm not able to run everything with one command (yarn start)

Node version: v10.15.3
Npm version: v6.4.1
Yarn version: 1.15.2

Context: When I run yarn start, which should start all services (web, server, mobile) it only starts on the server part, I assume it somehow hangs on that because it never proceeds to web or mobile package, here's a screenshot of how it looks after 10 minutes using yarn start command.

babel approaches

check this: MoOx/phenomic@bb0ce41

Suggestions

https://mxstbr.com/thoughts/tech-choice-regrets-at-spectrum/

1. Use react-native-web
2. Use Next.js example of use with RNW

add hygen

Add some _templates that can be shared

add HMR to server

add metro.config.js to work well on workspaces

https://gist.github.com/sibelius/14d0ecdbd917959c0f7b6f1c4f81f850

single binary for server

• ncc
• nexe
• pkg

add fastlane

automate changelog