{"id":24132844,"url":"https://github.com/formcms/react-nest","last_synced_at":"2025-08-24T15:16:23.531Z","repository":{"id":120412635,"uuid":"284689603","full_name":"formcms/react-nest","owner":"formcms","description":null,"archived":false,"fork":false,"pushed_at":"2020-08-29T16:41:18.000Z","size":77,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-10T20:25:18.042Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/formcms.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-03T12:07:23.000Z","updated_at":"2025-01-05T15:06:28.000Z","dependencies_parsed_at":null,"dependency_job_id":"563b3397-2ebf-414b-91db-9158c9c074cb","html_url":"https://github.com/formcms/react-nest","commit_stats":null,"previous_names":["fluent-cms/react-nest","formcms/react-nest"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcms%2Freact-nest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcms%2Freact-nest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcms%2Freact-nest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/formcms%2Freact-nest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/formcms","download_url":"https://codeload.github.com/formcms/react-nest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233546489,"owners_count":18692223,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-11T22:38:36.099Z","updated_at":"2025-01-11T22:38:36.637Z","avatar_url":"https://github.com/formcms.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Description\nThe project is a Signle Page Appliation, it uses react as frontend framework, Nest as backend framework. Both frontend and backend are using typescript. \nThe project is using sqlite as backend database, for demo purpose, to eliminate database configuration.\nIt has the following features:\n\n## Backend \n- JWT authorization and authentication\n- Generaral Entity CRUD Web Api\n- Type Orm as entity framework\n## Frontend\n- User Login and User Profile \n- User CRUD and Client CRUD\n- Material UI Design\n\n# Share code between frontend and backend\nAuthough both frontend and backend are written by typescript, it's tricky to put code in to same repository \nmy ideal strutrue would be like\n- -backend/src\n- -frontend/src\n- -shared/src\nin this way, main.js of the backend need to refrence some file in ../../shared/src, it didn't work after I publish the project production enviroment. \nso share files must reside in backend src directory, so I changed the structure as following\n## the code structure \n- package.json\n- -src\n- -[nest code]\n- -src\\client\n- -scr\\client\\package.json\n- -src\\client\\src\n- -scr\\client\\src\\share //entities, shared utility functions,etc...\n- -src\\client\\src\\[react code]\n\nthe root directory of the project is the backend code, it was generated by nest cli\nthe src\\client direcotry is frontend code, it is a react app  generated by 'create react app'\nboth nest app and react app have their own package.json, so frontend and backend can has their own node_modules.\n\n### some configurations\nadd the following line to src\\client\\.env, otherwise react app won't compile\n```\nSKIP_PREFLIGHT_CHECK=true\n```\nalso set baseUrl to src in both package.json and src/client/package.json\n```\n    \"baseUrl\": \"./src\",\n```\nadd src/client to tsconfig.build.json\n```\n\"exclude\": [\"node_modules\", \"test\", \"dist\",\"src/client\", \"**/*spec.ts\"]\n```\n## run both frontend and backend in development mode\n- start backend first \n```\nyarn start:dev\n```\n- start the frontend\n```\ncd /src/clinet\nyarn start\n```\nthe headend is listening to port 4000, the frontend is listening to port 3000\nadd the following code to src/client/package.json, so if the frontend requests to a backend webapi, eg 'api/sign/sign', it would send the request to 'http://localhost:4000/api/sign/sign' \n```\n  \"proxy\": \"http://localhost:4000/\",\n```\n\n## the file structure of the published\nfrontend and backend can be put to seperate app service, I prefered to put them in the same app service to save costs, also I don't need to enable cros.\n\nAfter deploy to app service, the structure is like\n- main.js\n- client //here is all react code\n- client/src/share  //the code shared between frontend and backend\n- other headend code\n- node_modules\n\n### let nest to Serve Static\na client request was handled by nest router first, if nest router find the url match a controller, then it calls the web api, otherwise it looks if there is a static file in the client directory\n```\n ServeStaticModule.forRoot({\n      rootPath: join(__dirname, 'client')\n    }),\n```\n\n## share the entity code\ntypeorm require add decorator @entity to class, and add @column decorator to class properies.\nalso I want to use a lib 'class-validator' to validate form inputs.\nso the entity code ends up as the following\n```\nimport { Entity, Unique,Column, ManyToOne } from 'decorators/myTypeOrmDecorator';\nimport { IsEmail, IsString, MinLength, MaxLength, Matches} from 'class-validator';\n@Entity('user')\n@Unique(['username'])\nexport class User extends MyBaseEntity {\n  @IsEmail()\n  @Column()\n  username: string = '';\n\n  @MinLength(1)\n  @Column()\n  firstname: string ='';\n    ...\n```\nFor the backend project, I can import @Entity(), @Column() from typeorm, but I don't want to do that for frontend project.\nso instead of import Entity, Column from typeorm directly, I import the decorators from myTypeOrmDecorator\n```\nimport { Entity, Unique,Column, ManyToOne } from 'decorators/myTypeOrmDecorator';\n```\nbecause in both package.json and src/client/package.json, I set baseUrl to 'src', 'decorators/myTypeOrmDecorator' refrence to diffrent files for frontend project and backend project\n- for frontend project, it refrence to 'src/client/src/decorators/myTypeOrmDecorator'\n- for backend project, it refrence to 'src/decorators/myTypeOrmDecorator'\n\nin 'src/decorators/myTypeOrmDEcorator', I export * from typeorm\n```\nexport * from \"typeorm\";\n```\nin 'src/client/src/decorators/myTypeOrmDecorator', I create some dummy decorators, the decorators do nothing, just to let frontend code be compiled\n\n\ntodo: when create use, if validate fail, it clear the form, maybe useMemory?\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformcms%2Freact-nest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fformcms%2Freact-nest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fformcms%2Freact-nest/lists"}