Please visit another project of mine about the same thing: Project manager, or my blog. See on Youtube
I created this project as a start-kit for projects using: Typescript with Angular7 and Express NodeJS, Webpack, Angular Material and Ag-Grid.
- Use typescript not only on client side, but server side too, and have a shared folder for models and other useful code on both sides.
- Use automatic Node.js server update with nodemon and webpack and use angular live dev server with proxy having separated node modules packages for client and server side. Also create gulp task for production build.
- Has generic classes for Server side (separation of concerns pattern design having generic CRUD operation): Controller, Service, Repository.
- Has generic class for Client side: entity typed generic service.
- Has generic layout for applications with left side slide tree menu.
- Clone this repository.
- Run
npm run install-all script
in project root folder. - Create database with
src/scripts/init-db.sql
(change db name, user and password as desired). - Change extends in root
tslint.json
to your generaltslint.json
file, or delete extend. - Change server port in
src/server/src/ConfigApi.ts
and insrc/client/proxy.conf.json
to the desired one. - Change angular dev server port in
rc/client/angular.json
,serve.port
to the desired one. - Run
npm server:build-dev
. This will createdist/server.js
. - Run
npm server:start-dev
. This will start Node.js api server. - Run
npm client:start-dev
. This will run ng serve with proxy config (src/client/proxy.conf.json
). - View app on http://localhost:4201 (default port).
- For production build run
gulp build-prod
task. This will run build for client and server side and copy source files in dist folder. - For creating a simple page, you must create a template in
src/templates/entity/
. There are some examples to follow. - Run task with
gulp gen:entity --config ./src/templates/entity/templateName.js
for creating entities (users, projects, etc.).