@common-stack/generate-plugin 6.0.6-alpha.5 → 6.0.6-alpha.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/lib/generators/add-backend/files/package.json +1 -1
- package/lib/generators/add-browser-package/files/package.json +1 -1
- package/lib/generators/add-frontend/generator.cjs +1 -1
- package/lib/generators/add-frontend/generator.cjs.map +1 -1
- package/lib/generators/add-frontend/generator.mjs +1 -1
- package/lib/generators/add-frontend/generator.mjs.map +1 -1
- package/lib/generators/add-frontend/templates/package.json +4 -3
- package/lib/generators/add-fullstack/files/package.json +4 -4
- package/lib/generators/add-moleculer/files/package.json +5 -5
- package/lib/generators/add-server-package/files/package.json +3 -3
- package/package.json +2 -2
- package/src/generators/add-frontend/generator.ts +2 -1
- package/src/generators/add-fullstack/files/package.json +4 -4
- package/src/generators/add-moleculer/files/package.json +5 -5
- package/lib/generators/add-fullstack/files/docs/Moleculer.md +0 -10
- package/lib/generators/add-fullstack/files/docs/References.md +0 -13
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Adding_New_Modules.md +0 -84
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Desktop_Setup.md +0 -12
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/DoAndDont.md +0 -35
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/GitHooks.md +0 -3
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/HowToContribute.md +0 -14
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/How_to_Run_Various_Options.md +0 -95
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Known_Issues.md +0 -19
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Lint_And_Formatter.md +0 -9
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Project_Setup.md +0 -159
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Dynamically_Render_Components.md +0 -57
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/HOC_With_Render_Props.md +0 -87
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Mongoose_Connection.md +0 -45
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/React_Componet_Extensions.md +0 -11
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/RxJS_notes.md +0 -3
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Styles_With_Type.md +0 -52
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/Tutorials.md +0 -12
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/faq.md +0 -17
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/installation_issues.md +0 -9
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/lerna-build-tools.md +0 -504
- package/lib/generators/add-fullstack/files/docs/development/CodeContribution/lerna-yarn-workspaces.md +0 -82
- package/lib/generators/add-fullstack/files/docs/development/Database/mongodb-test.md +0 -6
- package/lib/generators/add-fullstack/files/docs/development/Deployment/How_To_Setup_Jenkins.md +0 -60
- package/lib/generators/add-fullstack/files/docs/development/Deployment/JenkinsDeployment.md +0 -16
- package/lib/generators/add-fullstack/files/docs/development/Expo/expo-commands.md +0 -5
- package/lib/generators/add-fullstack/files/docs/development/Mobile/How_To_Make_Expo_Wrok_With_Monorepos.md +0 -9
- package/lib/generators/add-fullstack/files/docs/development/Mobile/React-Native-FAQ.md +0 -4
- package/lib/generators/add-fullstack/files/docs/development/Mobile/Run_mobile.md +0 -9
- package/src/generators/add-fullstack/files/docs/Moleculer.md +0 -10
- package/src/generators/add-fullstack/files/docs/References.md +0 -13
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Adding_New_Modules.md +0 -84
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Desktop_Setup.md +0 -12
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/DoAndDont.md +0 -35
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/GitHooks.md +0 -3
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/HowToContribute.md +0 -14
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/How_to_Run_Various_Options.md +0 -95
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Known_Issues.md +0 -19
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Lint_And_Formatter.md +0 -9
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Project_Setup.md +0 -159
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Dynamically_Render_Components.md +0 -57
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/HOC_With_Render_Props.md +0 -87
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Mongoose_Connection.md +0 -45
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/React_Componet_Extensions.md +0 -11
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/RxJS_notes.md +0 -3
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/React-Patterns/Styles_With_Type.md +0 -52
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/Tutorials.md +0 -12
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/faq.md +0 -17
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/installation_issues.md +0 -9
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/lerna-build-tools.md +0 -504
- package/src/generators/add-fullstack/files/docs/development/CodeContribution/lerna-yarn-workspaces.md +0 -82
- package/src/generators/add-fullstack/files/docs/development/Database/mongodb-test.md +0 -6
- package/src/generators/add-fullstack/files/docs/development/Deployment/How_To_Setup_Jenkins.md +0 -60
- package/src/generators/add-fullstack/files/docs/development/Deployment/JenkinsDeployment.md +0 -16
- package/src/generators/add-fullstack/files/docs/development/Expo/expo-commands.md +0 -5
- package/src/generators/add-fullstack/files/docs/development/Mobile/How_To_Make_Expo_Wrok_With_Monorepos.md +0 -9
- package/src/generators/add-fullstack/files/docs/development/Mobile/React-Native-FAQ.md +0 -4
- package/src/generators/add-fullstack/files/docs/development/Mobile/Run_mobile.md +0 -9
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Hot Reload in Apollo Server 2
|
|
5
|
-
--
|
|
6
|
-
https://github.com/apollographql/apollo-server/issues/1275
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
To update apollo-server
|
|
10
|
-
====
|
|
11
|
-
https://github.com/uzh-bf/klicker-uzh/blob/927512043e8b978c5874bb524eac5c5ff321e28b/apps/backend/src/app.js
|
|
12
|
-
https://github.com/heypoom/eventkit/tree/165eb23dc8f3529b46f2cd1f187e4c592d8c9767
|
|
13
|
-
https://github.com/cerino-ligutom/GraphQL-Starter/blob/master/src/graphql/index.ts
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/Adding_New_Modules.md
DELETED
|
@@ -1,84 +0,0 @@
|
|
|
1
|
-
# Adding Modules with FullStack Pro Kit
|
|
2
|
-
|
|
3
|
-
In this guide, we explain how you can add new modules with FullStack-pro Kit.
|
|
4
|
-
|
|
5
|
-
## Table of Contents
|
|
6
|
-
|
|
7
|
-
* [Add New Modules](#installing-and-importing-dependencies)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
## Add New Modules
|
|
11
|
-
|
|
12
|
-
Adding new modules, usually goes under `packages-modules` folder. For example to create counter module, you create
|
|
13
|
-
|
|
14
|
-
1. From root directory, create following folders by running the commands (in unix).
|
|
15
|
-
```
|
|
16
|
-
mkdir -p packages-modules/counter/browser/src
|
|
17
|
-
mkdir -p packages-modules/counter/servers/src
|
|
18
|
-
|
|
19
|
-
touch packages-modules/counter/browser/src/package.json
|
|
20
|
-
touch packages-modules/counter/servers/src/package.json
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
2. Copy following files from the existing modules,
|
|
24
|
-
|
|
25
|
-
From one of the existing moudles, copy the following files into the new module. Make sure the browser's module are copied from another existing browsers location and similarly for server's module.
|
|
26
|
-
|
|
27
|
-
- webpack.config.js
|
|
28
|
-
- tsconfig.json
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
3. Copy the content of the package.json for both browser and server from the existing modules and change the `name` in the package.json to the specific name of the module you want to create. Please make sure to keep the namespace of the module uniform, if the existing module have `@sample-stack`, your new browser module's `package.json` name would be `@sample-stack/counter-browser`, similarly for server module will have `@sample-stack/counter-server`.
|
|
32
|
-
|
|
33
|
-
```json
|
|
34
|
-
{
|
|
35
|
-
"name": "@sample-stack/counter-module-browser",
|
|
36
|
-
"version": "0.0.1",
|
|
37
|
-
.....
|
|
38
|
-
"publishConfig": {
|
|
39
|
-
"access": "public"
|
|
40
|
-
},
|
|
41
|
-
.....
|
|
42
|
-
|
|
43
|
-
"dependencies": {
|
|
44
|
-
"@sample-stack/platform-browser": "link:../../../packages/sample-platform/browser",
|
|
45
|
-
},
|
|
46
|
-
"peerDependencies": {
|
|
47
|
-
"@common-stack/client-react": ">=0.0.229",
|
|
48
|
-
"@common-stack/core": ">=0.0.229",
|
|
49
|
-
"antd": "^3.26.4"
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
```
|
|
53
|
-
Add any additional dependencies that this module needed.
|
|
54
|
-
|
|
55
|
-
4. Then, to use the new module add to `servers` and main `package.json`
|
|
56
|
-
|
|
57
|
-
a. In root `package.json` file add the new module where you have existing modules
|
|
58
|
-
```json
|
|
59
|
-
"dependencies": {
|
|
60
|
-
.....
|
|
61
|
-
"@sample-stack/counter-module-browser": "link:packages-modules/counter/browser",
|
|
62
|
-
"@sample-stack/counter-module-server": "link:packages-modules/counter/server",
|
|
63
|
-
....
|
|
64
|
-
}
|
|
65
|
-
```
|
|
66
|
-
b. In frontend server `servers/frontend-server` add the browser module with relative path.
|
|
67
|
-
```json
|
|
68
|
-
"dependencies": {
|
|
69
|
-
.....
|
|
70
|
-
"@sample-stack/counter-module-browser": "link:../../packages-modules/counter/browser",
|
|
71
|
-
}
|
|
72
|
-
```
|
|
73
|
-
c. In backend servers `servers/backend-server` add the server module with relative path.
|
|
74
|
-
```json
|
|
75
|
-
"dependencies": {
|
|
76
|
-
....
|
|
77
|
-
"@sample-stack/counter-module-server": "link:../../packages-modules/counter/server",
|
|
78
|
-
....
|
|
79
|
-
}
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
Notes:
|
|
83
|
-
|
|
84
|
-
- You may have to rerun `yarn watch` to pickup new modules
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/Desktop_Setup.md
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
# Follow steps to [install project](./Project_Setup.md)
|
|
3
|
-
|
|
4
|
-
### Start Desktop application
|
|
5
|
-
|
|
6
|
-
Before to start desktop application, make sure to start the backend server of the web application first.
|
|
7
|
-
|
|
8
|
-
`lerna exec --scope=*backend-server yarn watch`
|
|
9
|
-
|
|
10
|
-
And then start desktop application.
|
|
11
|
-
|
|
12
|
-
`lerna exec --scope=*desktop yarn watch`
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
Don't do it...
|
|
5
|
-
---
|
|
6
|
-
1. `yarn <package>`
|
|
7
|
-
|
|
8
|
-
Do not install dependencies as `yarn <package dependency>`.
|
|
9
|
-
We use `lerna` and the way it works for the project is by installing `dependencies` to the `packages` or `servers` that requires it. In most cases,
|
|
10
|
-
you can just add the package to frontend or backend by running following
|
|
11
|
-
|
|
12
|
-
> to add to the frontend server so browser gets it
|
|
13
|
-
|
|
14
|
-
`lerna add --scope=*fronted-server <package>`
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
> to add to the backend server for nodejs to use it
|
|
18
|
-
|
|
19
|
-
`lerna add --scope=*backend-server <package>`
|
|
20
|
-
|
|
21
|
-
If a dependency is just needed by one package, you can add to that package's package.json file
|
|
22
|
-
|
|
23
|
-
`lerna add --scope=<package name> <package>`
|
|
24
|
-
|
|
25
|
-
Ideally, root `package.json` should have all the `devDependencies` of the project while `packages` & `servers` file references should be under `dependencies` section as shown [here](https://github.com/cdmbase/fullstack-pro/blob/master/package.json#L67-L78).
|
|
26
|
-
|
|
27
|
-
Sometimes we may need to `pin` a package as other dependencies can bring some older versions of the package we want to add. In that case we can pin the required package version by adding to the `pacakge.json`. But make sure you don't have different version of the package in `servers` or `packages` otherwise a duplciate package will be added to its `nodemodules`.
|
|
28
|
-
|
|
29
|
-
Do
|
|
30
|
-
---
|
|
31
|
-
1. Each package version should be uniform across the repository
|
|
32
|
-
|
|
33
|
-
Before adding a `<package dependency>`, see if the package of different version exist. If it exist then update that version to the required version.
|
|
34
|
-
|
|
35
|
-
2. You can edit one of the `packages` or `servers`'s `package.json` file directly to add a `dependencies` and then run `yarn lerna` to install them. This is a easy way to install a known version by adding to the target `pacakage.json` file.
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/HowToContribute.md
DELETED
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
How to contribute as a developer?
|
|
3
|
-
--
|
|
4
|
-
|
|
5
|
-
1. Once you setup the project, switch to `develop` branch.
|
|
6
|
-
2. Create a new branch using `develop` branch as source based on the issue you working.
|
|
7
|
-
3. Update changes to that branch and create a PR agains `develop` branch.
|
|
8
|
-
4. As soon as PR is created, we have a build process that runs in the background to check whether it is successful or failed.
|
|
9
|
-
5. If it successfull you will see a green check otherwise a red cross. When you notice it has red cross then run `yarn build` locally and fix any issues and submit the commit again to check it's updated status.
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
Note: `master` branch is read-only branch and we don't want to merge anything to it other than that from `develop` branch. So please avoid creating PRs agains master branch.
|
|
14
|
-
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
## SETUP and INSTALL
|
|
2
|
-
### To Install the project and build all packages
|
|
3
|
-
|
|
4
|
-
`yarn bootstrap`
|
|
5
|
-
|
|
6
|
-
### To clean install the project of already installed.
|
|
7
|
-
|
|
8
|
-
If you need to do a clean the existing node_modules and take latest changes from the remote head
|
|
9
|
-
|
|
10
|
-
`yarn clean:install`
|
|
11
|
-
|
|
12
|
-
## LINTING
|
|
13
|
-
### To check linting
|
|
14
|
-
|
|
15
|
-
`yarn lint <relative folder>`
|
|
16
|
-
|
|
17
|
-
### To check and auto fix linting
|
|
18
|
-
|
|
19
|
-
`yarn format <relative folder>`
|
|
20
|
-
|
|
21
|
-
## PACKAGES COMMANDS
|
|
22
|
-
### To run build all packages
|
|
23
|
-
|
|
24
|
-
`yarn build`
|
|
25
|
-
|
|
26
|
-
### To run all packages in watch mode
|
|
27
|
-
|
|
28
|
-
`yarn watch`
|
|
29
|
-
|
|
30
|
-
Note: It only run `packages` and `packages-modules` only in watch mode. Servers should be run seperately.
|
|
31
|
-
|
|
32
|
-
Also check out `yarn watch-packages` to run watch on required packages.
|
|
33
|
-
|
|
34
|
-
### To run build with watch for dependent packages
|
|
35
|
-
|
|
36
|
-
For auto reloading changes into the server to be productive during development.
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
yarn watch-packages
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
If you also need to watch along with it, you can as many scopes as required like below.
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
yarn watch-packages -- --scope=@sample-stack/counter-module* --scope=@packageb
|
|
46
|
-
```
|
|
47
|
-
|
|
48
|
-
## TO START SERVERS
|
|
49
|
-
### To run a individual package in watch mode
|
|
50
|
-
|
|
51
|
-
`lerna exec --scope=<package name> yarn watch`
|
|
52
|
-
|
|
53
|
-
More details on how to use [lerna exec](https://github.com/lerna/lerna/tree/master/commands/exec#options)
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
To run any command on a package <package_name>
|
|
57
|
-
|
|
58
|
-
`lerna exec --scope=<package_name> <command>`
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
### How to Start Backend and Frontend seperately.
|
|
62
|
-
|
|
63
|
-
To start the frontend-server
|
|
64
|
-
|
|
65
|
-
`lerna exec --scope=*frontend-server yarn watch`
|
|
66
|
-
|
|
67
|
-
To just start the backend-server
|
|
68
|
-
|
|
69
|
-
`lerna exec --scope=*backend-server yarn watch`
|
|
70
|
-
|
|
71
|
-
### To run both Frontend and Backend Server
|
|
72
|
-
|
|
73
|
-
`yarn start`
|
|
74
|
-
|
|
75
|
-
### To run both Frontend and Backend Server but start frontend in SSR Mode
|
|
76
|
-
|
|
77
|
-
`yarn start:envSSR`
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### To run Frontend with production build in development
|
|
81
|
-
|
|
82
|
-
build the package
|
|
83
|
-
|
|
84
|
-
`lerna exec --scope=*frontend-server yarn build`
|
|
85
|
-
|
|
86
|
-
start the server with `dev` environment file
|
|
87
|
-
|
|
88
|
-
`lerna exec --scope=*frontend-server yarn start:dev`
|
|
89
|
-
|
|
90
|
-
Make sure backend is also running in seperate terminal
|
|
91
|
-
|
|
92
|
-
`lerna exec --scope=*backend-server yarn watch`
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/Known_Issues.md
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
# Kown Issues
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
1. EACCES: permission denied, scandir .....
|
|
7
|
-
|
|
8
|
-
Follow the workaround https://github.com/cdmbase/fullstack-pro/issues/176
|
|
9
|
-
|
|
10
|
-
2. OS X: "Error: EMFILE: too many open files, watch"
|
|
11
|
-
Follow https://github.com/facebook/create-react-app/issues/4540
|
|
12
|
-
|
|
13
|
-
```
|
|
14
|
-
brew install watchman
|
|
15
|
-
```
|
|
16
|
-
|
|
17
|
-
3. Macbook Catalina: `Zsh` latest macos comes with `Zsh` as the default shell. We seeing some issues to start the project with it. Please use `bash` to run project.
|
|
18
|
-
|
|
19
|
-
https://www.howtogeek.com/444596/how-to-change-the-default-shell-to-bash-in-macos-catalina/
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/Lint_And_Formatter.md
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
### Lint and Formatter
|
|
2
|
-
|
|
3
|
-
`eslint` and `prettier` is used along each other. `eslint-config-airbnb-base` (not `eslint-config-airbnb`, which includes `jsx` rules) is used as well. [`eslint-plugin-jest`](https://github.com/jest-community/eslint-plugin-jest/issues) and [`eslint-plugin-markdown`](https://github.com/eslint/eslint-plugin-markdown) (not for markdown itself, but for code block snippet appeared in markdown) are also configured.
|
|
4
|
-
|
|
5
|
-
By configuring `overrides` in `.eslintrc.js`, both of typescript and javascript files are able to be linted by `eslint`. (e.g. So typescript rules are not applied to `.js` files.)
|
|
6
|
-
|
|
7
|
-
[`markdownlint`](https://github.com/DavidAnson/markdownlint) is configured by [`markdownlint-cli`](https://github.com/igorshubovych/markdownlint-cli#readme).
|
|
8
|
-
|
|
9
|
-
[`commitlint`](https://github.com/conventional-changelog/commitlint) is used as commit message linter. You can `yarn lint:md .`, for example. Refer to [conventional commits](https://www.conventionalcommits.org/en/) for more details.
|
package/src/generators/add-fullstack/files/docs/development/CodeContribution/Project_Setup.md
DELETED
|
@@ -1,159 +0,0 @@
|
|
|
1
|
-
## Getting Started
|
|
2
|
-
|
|
3
|
-
If you want to develop FullStack locally you must follow the following instructions:
|
|
4
|
-
|
|
5
|
-
1. Clone fullstack-pro locally
|
|
6
|
-
```
|
|
7
|
-
git clone https://github.com/cdmbase/fullstack-pro
|
|
8
|
-
cd fullstack-pro
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
2. Install dependencies and build packages.
|
|
12
|
-
|
|
13
|
-
a. make sure `python` version `2.7.16` or higher in `^2` version installed.
|
|
14
|
-
|
|
15
|
-
b. install `node-gyp` globally. For installation check [this document](https://github.com/nodejs/node-gyp#installation).
|
|
16
|
-
|
|
17
|
-
c. install `watchman` for macOS users
|
|
18
|
-
|
|
19
|
-
d. Node version supported is `>=12.18.4` and `yarn` version is `1.22`. You can Download Node from [here](https://nodejs.org/dist/v12.18.4/)
|
|
20
|
-
|
|
21
|
-
e. Insall and build packages using following command. Run from the root folder of this project.
|
|
22
|
-
```
|
|
23
|
-
yarn global add lerna
|
|
24
|
-
yarn bootstrap
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
3. Setup environment file
|
|
28
|
-
|
|
29
|
-
You need to have environemnt file before you start the project. There is a sample file exist at `config/development/dev.env.sample` which you can copy as `config/development/dev.env`.
|
|
30
|
-
|
|
31
|
-
```
|
|
32
|
-
cp ./config/development/dev.env.sample ./config/development/dev.env
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
You may need to set personalized values in the `dev.env` file.
|
|
36
|
-
|
|
37
|
-
4. Start server MongoDB and Redis (look for Installation Section)
|
|
38
|
-
|
|
39
|
-
> redis-server
|
|
40
|
-
|
|
41
|
-
> mongod
|
|
42
|
-
|
|
43
|
-
5. Start both client and server together
|
|
44
|
-
```
|
|
45
|
-
yarn start
|
|
46
|
-
```
|
|
47
|
-
Alternatively, if you need to run `backend` and `frontend` on its respective terminal instead of one terminal then follow [How to Start Backend and Frontend seperately](./How_to_Run_Various_Options.md#how-to-start-backend-and-frontend-seperately)
|
|
48
|
-
|
|
49
|
-
### Server Enpoints:
|
|
50
|
-
The graphql server endpoints are
|
|
51
|
-
>http://localhost:8080/graphql
|
|
52
|
-
|
|
53
|
-
The browser server endopoint is
|
|
54
|
-
>http://localhost:3000
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
## How to run with HotReload for live changes both in the server and browser?
|
|
58
|
-
|
|
59
|
-
To run build with watch for dependent packages, for auto reloading changes into the server to be productive during development.
|
|
60
|
-
|
|
61
|
-
```
|
|
62
|
-
yarn watch-packages
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
If you also need to watch along with it, you can use as many scopes as required like below.
|
|
66
|
-
|
|
67
|
-
```
|
|
68
|
-
yarn watch-packages -- --scope=@sample-stack/counter-module* --scope=@packageb
|
|
69
|
-
```
|
|
70
|
-
|
|
71
|
-
To run build with watch for all the packages. Note: This will run watch on all packages under `packages-modules` and may saturate the resources in your laptop instead run above `watch-packages` command.
|
|
72
|
-
|
|
73
|
-
```
|
|
74
|
-
yarn watch
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
Sometimes if we have to run `build` or `watch` you can use the `lerna` [command](https://github.com/lerna/lerna/tree/master/commands/exec#usage) for the targeted packages
|
|
78
|
-
|
|
79
|
-
```
|
|
80
|
-
lerna exec --scope=<package name> yarn watch
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
- here `<package name>` will be the package you working on currently. If you have multiple packages, then you need to run it multiple times for each package in its respective terminal.
|
|
84
|
-
|
|
85
|
-
## How to take changes from the branch?
|
|
86
|
-
|
|
87
|
-
Most of the changes at code level can be taken using `git` command.
|
|
88
|
-
|
|
89
|
-
But in some cases when `lerna's packages` are added or versions in `packages.json` are updated, to avoid getting installed duplicate pacakges due to monrepo architecture you need to first clean existing `node_modules` and reinstall again. This can be done with following command.
|
|
90
|
-
|
|
91
|
-
```
|
|
92
|
-
yarn clean:force && git pull <branch_name> && yarn install && yarn build
|
|
93
|
-
```
|
|
94
|
-
- here <branch_name> should be replaced with the branch you getting updates.
|
|
95
|
-
|
|
96
|
-
## Installation of Prerequisties servers
|
|
97
|
-
|
|
98
|
-
Install redis and mongo and setup an instance with default settings on default port,
|
|
99
|
-
Please check the installation documentation of each one.
|
|
100
|
-
|
|
101
|
-
MongoDB install : https://www.mongodb.com/docs/manual/administration/install-community/
|
|
102
|
-
Redis install: https://redis.io/docs/getting-started/
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
## Advance Options
|
|
106
|
-
### To test Production build and run
|
|
107
|
-
You need to run Frontend and Backend in two seperate servers.
|
|
108
|
-
|
|
109
|
-
to start frontend server
|
|
110
|
-
```
|
|
111
|
-
lerna exec --scope=*frontend-server yarn build
|
|
112
|
-
lerna exec --scope=*frontend-server yarn start:dev
|
|
113
|
-
```
|
|
114
|
-
to start backend server
|
|
115
|
-
```
|
|
116
|
-
lerna exec --scope=*backend-server yarn build
|
|
117
|
-
lerna exec --scope=*backend-server yarn start:dev
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
Note: you can pass `:<env>` next to `start` to use env config.
|
|
121
|
-
- dev: to use `/config/development/dev.env`
|
|
122
|
-
- stage: to use `/config/staging/staging.env`
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
### Docker build and run
|
|
127
|
-
|
|
128
|
-
Build three docker images by following the steps:
|
|
129
|
-
- Frontend Server
|
|
130
|
-
```
|
|
131
|
-
lerna exec --scope=*frontend-server yarn docker:build
|
|
132
|
-
lerna exec --scope=*frontend-server yarn docker:run
|
|
133
|
-
```
|
|
134
|
-
- Backend Server
|
|
135
|
-
```
|
|
136
|
-
lerna exec --scope=*backend-server yarn docker:build
|
|
137
|
-
lerna exec --scope=*backend-server yarn docker:run
|
|
138
|
-
```
|
|
139
|
-
- moleculer-server
|
|
140
|
-
```
|
|
141
|
-
lerna exec --scope=*moleculer-server yarn docker:build
|
|
142
|
-
lerna exec --scope=*moleculer-server yarn docker:run
|
|
143
|
-
```
|
|
144
|
-
|
|
145
|
-
Note: It uses `/config/staging/staging.env` for environment variables.
|
|
146
|
-
|
|
147
|
-
### Environment settings for non-development
|
|
148
|
-
```
|
|
149
|
-
GRAPHQL_URL
|
|
150
|
-
CLIENT_URL
|
|
151
|
-
NATS_URL
|
|
152
|
-
NATS_USER
|
|
153
|
-
NATS_PW
|
|
154
|
-
```
|
|
155
|
-
## Troubleshoot
|
|
156
|
-
To troubleshoot webpack configuration run
|
|
157
|
-
```
|
|
158
|
-
yarn zen:watch:debug
|
|
159
|
-
```
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
Refernce: https://medium.com/@j5bot/react-dynamically-rendering-different-components-without-switch-the-capitalized-reference-e668d89e460b
|
|
3
|
-
|
|
4
|
-
```
|
|
5
|
-
import React from 'react'; // required to use JSX
|
|
6
|
-
|
|
7
|
-
export const CapitalizedReferenceComponentCollectionExternals = (props) => {
|
|
8
|
-
|
|
9
|
-
// get references to all possible components
|
|
10
|
-
// that this component might render,
|
|
11
|
-
// and the collection of dynamic components we need to render,
|
|
12
|
-
// using destructuring
|
|
13
|
-
const { components: Components, collection } = props;
|
|
14
|
-
|
|
15
|
-
// A Capitalized reference to reuse
|
|
16
|
-
let Component;
|
|
17
|
-
|
|
18
|
-
// A reference to the component's props to reuse
|
|
19
|
-
let componentProps;
|
|
20
|
-
|
|
21
|
-
// A function which returns component.props if it exists,
|
|
22
|
-
// and otherwise returns props
|
|
23
|
-
const defaultMapPropsToComponent = function (
|
|
24
|
-
{
|
|
25
|
-
component = {},
|
|
26
|
-
props = {}
|
|
27
|
-
} = {}
|
|
28
|
-
) {
|
|
29
|
-
|
|
30
|
-
return component.props || props;
|
|
31
|
-
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
// render the component collection
|
|
35
|
-
return(
|
|
36
|
-
<div>{
|
|
37
|
-
collection.map(
|
|
38
|
-
( component ) => {
|
|
39
|
-
// Reference the proper component
|
|
40
|
-
Component = Components[ component.type ];
|
|
41
|
-
// Get the props you want to use for this component instance
|
|
42
|
-
// here we are assuming that you can specify a mapping function
|
|
43
|
-
// on the component definition, in props, or use the default
|
|
44
|
-
componentProps = (
|
|
45
|
-
component.mapPropsToComponent ||
|
|
46
|
-
props.mapPropsToComponent ||
|
|
47
|
-
defaultMapPropsToComponent
|
|
48
|
-
)( component, props );
|
|
49
|
-
return (<Component { ...componentProps } />);
|
|
50
|
-
}
|
|
51
|
-
)
|
|
52
|
-
}</div>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
export default CapitalizedReferenceComponentCollectionExternals;
|
|
57
|
-
```
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
Reference: https://gist.github.com/mjackson/a1bee5a8b24a0db7ff29586b124cfb38
|
|
2
|
-
https://www.youtube.com/watch?v=BcVAq3YFiuc&t=1397s
|
|
3
|
-
https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce
|
|
4
|
-
```
|
|
5
|
-
import React from "react";
|
|
6
|
-
import ReactDOM from "react-dom";
|
|
7
|
-
import PropTypes from "prop-types";
|
|
8
|
-
|
|
9
|
-
document.body.style.background = `
|
|
10
|
-
linear-gradient(135deg,
|
|
11
|
-
#1e5799 0%,
|
|
12
|
-
#2989d8 50%,
|
|
13
|
-
#207cca 51%,
|
|
14
|
-
#7db9e8 100%
|
|
15
|
-
)
|
|
16
|
-
`;
|
|
17
|
-
|
|
18
|
-
const getHeaderStyle = y => {
|
|
19
|
-
const pin = y >= 100;
|
|
20
|
-
const top = -y / 2;
|
|
21
|
-
return {
|
|
22
|
-
textTransform: "uppercase",
|
|
23
|
-
textAlign: "center",
|
|
24
|
-
width: "100%",
|
|
25
|
-
margin: 0,
|
|
26
|
-
position: "fixed",
|
|
27
|
-
top: pin ? "0px" : `${top + 50}px`,
|
|
28
|
-
textShadow: pin
|
|
29
|
-
? `0px ${(y - 100) / 5}px ${Math.min(
|
|
30
|
-
(y - 100) / 10,
|
|
31
|
-
20
|
|
32
|
-
)}px rgba(0, 0, 0, 0.5)`
|
|
33
|
-
: "none"
|
|
34
|
-
};
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
class ScrollY extends React.Component {
|
|
38
|
-
state = { y: 0 };
|
|
39
|
-
|
|
40
|
-
handleWindowScroll = () => {
|
|
41
|
-
this.setState({ y: window.scrollY });
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
componentDidMount() {
|
|
45
|
-
this.handleWindowScroll();
|
|
46
|
-
window.addEventListener("scroll", this.handleWindowScroll);
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
componentWillUnmount() {
|
|
50
|
-
window.removeEventListener("scroll", this.handleWindowScroll);
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
render() {
|
|
54
|
-
return this.props.children(this.state.y);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
class App extends React.Component {
|
|
59
|
-
render() {
|
|
60
|
-
const { y } = this.props;
|
|
61
|
-
|
|
62
|
-
return (
|
|
63
|
-
<div style={{ height: "300vh", color: "white" }}>
|
|
64
|
-
<h1 style={getHeaderStyle(y)}>{this.props.message}</h1>
|
|
65
|
-
</div>
|
|
66
|
-
);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
function withScrollY(Component) {
|
|
71
|
-
return class extends React.Component {
|
|
72
|
-
render() {
|
|
73
|
-
return (
|
|
74
|
-
<ScrollY>{y => <Component {...this.props} y={y} />}</ScrollY>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
}
|
|
79
|
-
|
|
80
|
-
const AppWithScrollY = withScrollY(App);
|
|
81
|
-
|
|
82
|
-
ReactDOM.render(
|
|
83
|
-
<AppWithScrollY message="hello" />,
|
|
84
|
-
document.getElementById("app")
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
```
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
Reference:
|
|
3
|
-
https://github.com/barakbd/docker_typescript_debug_vscode/blob/8454ab4bdd9713da373e898e7c606193bfbfc5e2/src/config/mongoose_connection.ts
|
|
4
|
-
|
|
5
|
-
```
|
|
6
|
-
/ https://codingsans.com/blog/mongoose-models-using-typescript-classes
|
|
7
|
-
import * as mongoose from "mongoose";
|
|
8
|
-
var connectionOptions: mongoose.ConnectionOptions | undefined;
|
|
9
|
-
|
|
10
|
-
const uri: string = `mongodb://${process.env.MONGODB_HOST_AND_PORT_LIST}/${
|
|
11
|
-
process.env.MONGODB_DATABASE_NAME
|
|
12
|
-
}`;
|
|
13
|
-
|
|
14
|
-
console.log("uri", uri);
|
|
15
|
-
const mongooseConnectionOptions: mongoose.ConnectionOptions = {
|
|
16
|
-
autoReconnect: true,
|
|
17
|
-
reconnectTries: 3,
|
|
18
|
-
keepAlive: 120,
|
|
19
|
-
user: process.env.MONGODB_DB_USERNAME,
|
|
20
|
-
pass: process.env.MONGODB_DB_PASSWORD,
|
|
21
|
-
authSource: process.env.MONGODB_AUTH_SOURCE,
|
|
22
|
-
replicaSet: process.env.MONGODB_REPLICASET
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
process.env.NODE_ENV === "local"
|
|
26
|
-
? (connectionOptions = undefined)
|
|
27
|
-
: (connectionOptions = mongooseConnectionOptions);
|
|
28
|
-
|
|
29
|
-
console.log("mongoose connectionOptions - ", connectionOptions);
|
|
30
|
-
|
|
31
|
-
mongoose
|
|
32
|
-
.connect(uri, connectionOptions)
|
|
33
|
-
.then(() => {
|
|
34
|
-
console.info("mogoose connect - success");
|
|
35
|
-
// console.info(`uri - ${uri}`);
|
|
36
|
-
// console.info(`connectionOptions - ${connectionOptions}`);
|
|
37
|
-
})
|
|
38
|
-
.catch((err: mongoose.Error) => {
|
|
39
|
-
console.error("mogoose connect - error - ", err);
|
|
40
|
-
// throw err;
|
|
41
|
-
process.kill(process.pid);
|
|
42
|
-
});
|
|
43
|
-
const mongooseConnection: mongoose.Connection = mongoose.connection;
|
|
44
|
-
export { mongooseConnection };
|
|
45
|
-
```
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
https://github.com/superdesk/superdesk-client-core/blob/d5ee7b11dddd2255a77b518e177b7ec33b167311/scripts/apps/extension-points/services/ExtensionPoints.js
|
|
4
|
-
|
|
5
|
-
https://github.com/taskrabbit/react-component-extension
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
https://github.com/camwest/react-slot-fill
|
|
10
|
-
|
|
11
|
-
Reference: https://www.youtube.com/watch?v=395ou6k6C6k
|