{"id":15041404,"url":"https://github.com/piyalidas10/ecommerce","last_synced_at":"2025-04-14T20:20:55.095Z","repository":{"id":38700621,"uuid":"196806777","full_name":"piyalidas10/Ecommerce","owner":"piyalidas10","description":"Angular 6 Ecommerce Application POC","archived":false,"fork":false,"pushed_at":"2023-01-07T09:34:47.000Z","size":3711,"stargazers_count":49,"open_issues_count":35,"forks_count":29,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-28T08:35:39.483Z","etag":null,"topics":["angular","angular6","css3","ecommerce","ecommerce-application","highchartjs","highcharts","html5","httpinterceptor","husky","javascript","mlab","mongodb","mongoose","nodejs","sass","sass-framework","typescript"],"latest_commit_sha":null,"homepage":"https://piyali-ecommerce.herokuapp.com","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/piyalidas10.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}},"created_at":"2019-07-14T07:26:44.000Z","updated_at":"2023-07-25T23:19:36.000Z","dependencies_parsed_at":"2023-02-06T19:46:16.467Z","dependency_job_id":null,"html_url":"https://github.com/piyalidas10/Ecommerce","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FEcommerce","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FEcommerce/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FEcommerce/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/piyalidas10%2FEcommerce/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/piyalidas10","download_url":"https://codeload.github.com/piyalidas10/Ecommerce/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248952345,"owners_count":21188427,"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":["angular","angular6","css3","ecommerce","ecommerce-application","highchartjs","highcharts","html5","httpinterceptor","husky","javascript","mlab","mongodb","mongoose","nodejs","sass","sass-framework","typescript"],"created_at":"2024-09-24T20:46:03.998Z","updated_at":"2025-04-14T20:20:55.064Z","avatar_url":"https://github.com/piyalidas10.png","language":"TypeScript","readme":"# Live URL\nhttps://piyali-ecommerce.herokuapp.com\n\n# Admin URL\nhttps://piyali-ecommerce.herokuapp.com/#/admin\n\n# Swagger URL\nhttps://piyali-ecommerce.herokuapp.com/api-docs/\n\nlogin credentails\n```\npiyali@gmail.com / admin123\ndemo@gmail.com / demo123\nadmintest@gmail.com / test123\n```\n\n\n# Run Ecommerce application\nRun these two scripts in two different git bash \nnpm start will start my Angular Application and npm run start:server will start my Node server\n```\nnpm start \nnpm run start:server\n```\n\n# CI/CD (Continuous Integration/Continuous Delivery) with Heroku and GitHub\nhttps://www.youtube.com/watch?v=_tiecDrW6yY\nhttps://www.youtube.com/watch?v=O_xEqtjh1io\nhttps://devcenter.heroku.com/articles/github-integration\n\n# Mockdata\n\n```\nassets/mockdata folder\n```\n\n# PUSH Ecommerce application\nBefore push any code you have to pass in lint and test cases\n\n```\n1. ng lint\n2. ng test\n```\n\n# GIT codes\n\n```\ngit stash ---------- save you local changes\ngit pull ----------- pull the master branch changes\ngit stash apply -------- merge local changes with master branch changes\ngit add .\ngit commit -m \"message“ -------- commit local changes to stage\ngit commit -m \"message\" --no-verify -------- forcefully commit local changes to stage\ngit push -u origin master -------- push local changes to master branch\ngit checkout –b \u003cbranch_name\u003e -------- create new branch and move to that new branch\ngit checkout \u003cbranch_name\u003e -------- move to that branch\ngit merge master -------- merge your changes of master branch to current branch\n```\n## Understanding the Angular CLI Workspace File\nhttps://nitayneeman.com/posts/understanding-the-angular-cli-workspace-file/\nhttps://blog.ninja-squad.com/2018/05/04/angular-cli-6.0/\n```\n@angular-devkit/build-angular: this is the one to build an Angular application, now a required dependency in your CLI projects.\n```\n\n\n# API \n## Authorization using JWT\n```\nhttps://medium.com/@maison.moa/using-jwt-json-web-tokens-to-authorize-users-and-protect-api-routes-3e04a1453c3e\n```\n\n\n# In  API service static JSON files are used which are coming from assets folder\ncategories.json\ncontent.json\nproducts.json\n\n#How do I add Sass compilation in Angular CLI 6: angular.json\n\n```\n\"schematics\": {\n        \"@schematics/angular:component\": {\n          \"styleext\": \"scss\"\n        }\n},\n```\n\n# Changing the CSS Files to Sass\n\n```\n\"styles\": [\n              \"src/styles.scss\"\n          ],\n```\n\n# Angular - tsconfig paths configurations\nhttps://www.youtube.com/watch?v=whRsz7ywYZo\n\nYou can do like this:\n```\n\"compilerOptions\": {\n        \"baseUrl\": \"src\", // This must be specified if \"paths\" is.\n         ...\n        \"paths\": {\n          \"@ecommerce/auth/*\": [\"./app/auth/*\"],\n          \"@ecommerce/service/*\": [\"./app/service/*\"],\n          \"@ecommerce/directives/*\": [\"./app/directives/*\"],\n          \"@ecommerce/constants/*\": [\"./app/constants/*\"],\n          \"@ecommerce/interfaces/*\": [\"./app/interfaces/*\"],\n          \"@ecommerce/settings/*\": [\"./app/settings/*\"],\n          \"@ecommerce/pipe/*\": [\"./app/pipe/*\"],\n          \"@ecommerce/shared/*\": [\"./app/shared/*\"],\n          \"@ecommerce/css/*\": [\"./app/assets/css/*\"],\n          \"@ecommerce/images/*\": [\"./app/assets/images/*\"],\n        },\n```\nHave in mind that the path where you want to refer to, it takes your baseUrl as the base of the route you are pointing to and it's mandatory as described on the doc.\n\nThe character '@' is not mandatory.\n\nAfter you set it up on that way, you can easily use it like this:\n```\nimport { Yo } from '@config/index';\n```\n\n# Package.json\n\nHusky is a really cool npm package that lets you define npm scripts that correlate to local Git events such as a commit or push.\nHusky is a very popular (1 million downloads a month) npm package that allows custom scripts to be ran against your repository. Husky works with any project that uses a package.json file.\n\nThis really reduces the friction of using this feature of Git. So for example, if you install Husky using the command\n\n\n```\nnpm install husky --save-dev\n```\n\n\n```\n\"husky\": {\n    \"hooks\": {\n      \"pre-commit\": \"npm run lint\",\n      \"pre-push\": \"npm run lint\"\n    }\n}\n```\n\n\nAny time you try and commit, the hooks will run your lint command first. The hooks will not allow your commit to pass if the lint are failing.\n\nDon’t worry, you can force a commit with --no-verify if you find yourself in the situation where you just want to commit even though your pre-commit hooks don’t succeed.\n\n```\ngit commit -m \"first commit\" --no-verify\n```\n\n\nI have added the following entries to the package.json\n\n```\n\"precommit\": \"ng lint \u0026\u0026 npm test\",\n\"prepush\": \"ng lint \u0026\u0026 ng build --aot true \u0026\u0026 npm test\"\n```\n\n\n## This sets up means that on a commit we:\n\nlint the code\nthen run tests\nand before pushing to a remote repository we:\n\nperform an optimized build\nthen run unit tests\n\n1. https://www.npmjs.com/package/pre-commit-with-lint\n2. https://www.npmjs.com/package/pre-commit\n3. https://sigmoidal.io/automatic-code-quality-checks-with-git-hooks/\n\n# Angular 6 Http Error Interceptor\n\nThe Error Interceptor intercepts http responses from the api to check if there were any errors. If there is a 401 Unauthorized response the user is automatically logged out of the application, all other errors are re-thrown to be caught by the calling service so an alert can be displayed to the user.\n\nIt's implemented using the HttpInterceptor class that was introduced in Angular 4.3 as part of the new HttpClientModule. By extending the HttpInterceptor class you can create a custom interceptor to catch all error responses from the server in a single location.\n\n## In api.service.ts\n\n\"handleError\" is comment out becuase i have implement api error globally using HttpInterceptor which is written in http-error-interceptor.ts\n\n## if you change the following ------------\n\nAPI_PRODUCT_LIST_PATH = 'assets/product.json' in app.config.ts, you can see error in \"Http failure response for http://localhost:4200/assets/product.json/?cat=: 404 Not Found\" error in products page and also in console.\n\n\n# Service worker using PWA\n\n```\nng add @angular/pwa@v6-lts\n```\n### Build your project\n\n```\nng build --prod\n```\n\n### my npm version is 6.4.1 that's why i am installing http-server version 0.4.1 to make compatible with my npm version. Now run http-server\n\n```\nhttp-server -p 8081 -c-1 dist/ecommerce\n```\n\n## Configure Application Settings\n\n```\nimport { Injectable, isDevMode } from '@angular/core';\n\n@Injectable({\n    providedIn: 'root'\n  })\n\nexport class AppConfig {\n    apiEndpoint: string;\n    API_CATEGORY_PATH: string;\n    API_CONTENT_PATH: string;\n    API_PRODUCT_LIST_PATH: string;\n    API_PRODUCT_DETAILS_PATH: string;\n    API_PRODUCT_ADD_PATH: string;\n    API_PRODUCT_DELETE_PATH: string;\n    API_REGISTER_PATH: string;\n    API_LOGIN_PATH: string;\n    API_CART_PATH: string;\n    API_CART_CHECK_PRODUCT: string;\n    API_CART_ADD_PRODUCT_QUANTITY: string;\n    API_CART_DELETE_PRODUCT_QUANTITY: string;\n    API_CART_REMOVE_PRODUCT: string;\n    API_CUSTOMERSBYYEAR: string;\n    API_CUTOMERSBYGENDER: string;\n    API_PRODUCTSBYCATEGORY: string;\n    IMAGE_PATH: string;\n    ERROR_MSG_PATH: string;\n    VALIDATION_ERROR_MSG_PATH: string;\n\n    envDevMode: Boolean;\n\n    constructor() {\n        console.log('Environment in Development mode =\u003e ', isDevMode());\n        this.envDevMode = isDevMode();\n        if (this.envDevMode) {\n            this.apiEndpoint = 'http://localhost:3000/';\n        } else {\n            this.apiEndpoint = 'https://piyali-ecommerce.herokuapp.com/';\n        }\n        this.API_CATEGORY_PATH = 'api/categories';\n        this.API_CONTENT_PATH = 'api/content';\n        this.API_PRODUCT_LIST_PATH = 'api/products';\n        this.API_PRODUCT_DETAILS_PATH = 'api/products/productdetails';\n        this.API_PRODUCT_ADD_PATH = '';\n        this.API_PRODUCT_DELETE_PATH = '';\n        this.API_REGISTER_PATH = 'api/auth/register';\n        this.API_LOGIN_PATH = 'api/auth/login';\n        this.API_CART_PATH = 'api/cart';\n        this.API_CART_CHECK_PRODUCT = 'api/cart/check';\n        this.API_CART_ADD_PRODUCT_QUANTITY = 'api/cart/addqty';\n        this.API_CART_DELETE_PRODUCT_QUANTITY = 'api/cart/deleteqty';\n        this.API_CART_REMOVE_PRODUCT = 'api/cart/removeprod';\n        this.API_CUSTOMERSBYYEAR = 'api/admin/customersbyyear';\n        this.API_CUTOMERSBYGENDER = 'api/admin/customersbygender';\n        this.API_PRODUCTSBYCATEGORY = 'api/admin/productsbycategory';\n        this.IMAGE_PATH = 'images/products/';\n        this.ERROR_MSG_PATH = 'api/errors';\n        this.VALIDATION_ERROR_MSG_PATH = 'api/validationerrors';\n    }\n}\n\n```\n\n## isDevMode in Angular\n\nAngular CLI projects already use a production environment variable to enable production mode when in the production environment. But Angular also provides us with an utility function called isDevMode that makes it easy to check if the app in running in dev mode:\n\n```\nif (isDevMode()) {\n      console.log('👋 Development!');\n    } else {\n      console.log('💪 Production!');\n    \n    }\n}\n```\n\n## Angular Models and deserialization\nhttps://medium.com/swlh/angular-7-models-cd0cd80f5e33\nhttps://nehalist.io/angular-7-models/\nhttps://nehalist.io/working-with-models-in-angular/\nhttps://github.com/nehalist/angular7-models\n\n## @Inject in Angular\n\nWe are not actually working directly with the global values document and window. Instead, we inject them via Angular’s dependency injection - this keeps our code decoupled and testable, and gives us the option to later inject different values for these Injectables based on the environment.\n\ndocument is injectable via the DOCUMENT Injection Token which is part of Angular.\n\n```\nimport { DOCUMENT } from '@angular/common';\nimport { Component, PLATFORM_ID, Inject } from '@angular/core';\nimport { isPlatformBrowser, isPlatformServer } from '@angular/common';\n\n@Component({ \n    ... \n})\nexport class MyComponent {\n\n    constructor(\n        @Inject(DOCUMENT) private document: Document,\n        @Inject(PLATFORM_ID) private platformId: any,\n        windowRefService: WindowRefService,\n    ) {}\n\n    ngOnInit() {\n        this.scrollToTop();\n    }\n\n    scrollToTop() {\n        if (isPlatformBrowser(this.platformId)) {\n            this.windowRefService.nativeWindow.scrollTo(0);\n        }\n    }\n}\n```\n\n## Prepare your code (isPlatformBrowser is your friend)\n\nThere are a few important changes you need to make to your code if it is to be successfully rendered on the server. Every code base is different and so the specifics will be different. However, you can generally group SSR specific caveats into a few rules.\n1. Don’t access the DOM directly (the document/window is inaccessible without a browser).\n2. Limit/Remove usage of setInterval or similar timing functions\n3. Ensure your dependencies are compatible with SSR.\n4. SSR renders the initial state of your application. So as an example, if your images are loaded lazily, provide an SSR-compatible eager alternative using the next step (5) to ensure the content is there.\n5. If you need to prevent certain code from running on the server, wrap it in isPlatformBrowser(this.platformID) {}\n\n```\nconstructor(@Inject(PLATFORM_ID) private platformID: Object) {\n        \n    // run main initialisation code\n    if (isPlatformBrowser(this.platformID)) {\n       this.observable$ = interval(1000)... // safe to run code\n    }\n    // OR the alternative\n    if (isPlatformServer(this.platformID)) {\n       // run server side code \n    }\n}\n```\n\n## ngsw-config.json\n\n```\n{\n  \"index\": \"/index.html\",\n  \"assetGroups\": [{\n    \"name\": \"ecommerce\",\n    \"installMode\": \"prefetch\",\n    \"resources\": {\n      \"files\": [\n        \"/favicon.ico\",\n        \"/index.html\",\n        \"/*.css\",\n        \"/*.js\"\n      ],\n      \"urls\": [\n        \"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css\",\n        \"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css\",\n        \"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\",\n        \"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js\",\n        \"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\"\n      ]\n    }\n  }, {\n    \"name\": \"assets\",\n    \"installMode\": \"lazy\",\n    \"updateMode\": \"prefetch\",\n    \"resources\": {\n      \"files\": [\n        \"/assets/**\",\n        \"/assets/*.json\",\n        \"/assets/styles/*.scss\",\n        \"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)\"\n      ]\n    }\n  }]\n}\n```\n\n### Reference Videos :\n\n1. https://www.youtube.com/watch?v=5YtNQJQu31Y\n2. https://www.youtube.com/watch?v=f26hgzyGdHM\n\n\n# Sonar / SonarQube / Sonarts with Angular 6\n\nSonarQube is an open-source platform for continuous inspection of code quality which do regular code and generate static analysis of code to detect bugs, code smells, and security vulnerabilities. Soon share each and every part of report like what is code smell, css issues, duplicate code etc\n\n### Install tslint typescript\n\n```\nnpm install tslint typescript --save-dev\n```\n\n# Adding NodeJS to my Ecommerce Project\n\n```\n1. Create server.js in root folder\n2. Create ecommerce_backend folder in root folder\n3. Create app.js file in ecommerce_backend folder\n4. Run \"npm install --save express\" command to install express in your project\n5. npm i --save-dev nodemon\n```\n\nnodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.\n\n\n# RUN server\n\n```\nnpm run start:server\n```\n\n# API create in NODE\n### RUN both angular and nodejs simultaneously\n\n```\nnpm start\nnpm run start:server\n```\n\n\n### app.js\n\n```\nconst express = require('express'); //server starts (express framework for routing all these)\nconst bodyParser = require(\"body-parser\");\n\nconst app = express();\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\n\napp.use((req, res, next) =\u003e {\n  res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n  res.setHeader(\n    \"Access-Control-Allow-Headers\",\n    \"Origin, X-Requested-With, Content-Type, Accept\"\n  );\n  res.setHeader(\n    \"Access-Control-Allow-Methods\",\n    \"GET, POST, PATCH, DELETE, OPTIONS\"\n  );\n  next();\n});\n\napp.use('/api/categories', (req, res, next) =\u003e {\n  const categories = [{\n      \"catId\": \"1\",\n      \"catName\": \"electronics\",\n      \"catDesc\": \"electronics\",\n      \"subCat\": [\"Laptops\"]\n    },\n    {\n      \"catId\": \"2\",\n      \"catName\": \"appliances\",\n      \"catDesc\": \"appliances\",\n      \"subCat\": [\"Television\", \"Microwave\"]\n    },\n    {\n      \"catId\": \"3\",\n      \"catName\": \"home-furniture\",\n      \"catDesc\": \"home \u0026 furniture\",\n      \"subCat\": [\"Kitchen\", \"Furniture\"]\n    }\n  ];\n  res.status(200).json({\n    message: 'Successfully get categories',\n    categories: categories\n  });\n});\n\n// catch 404 and forward to error handler\napp.use((err, req, res, next) =\u003e {\n  next(createError(404));\n});\n\n\n// error handler\napp.use((err, req, res, next) =\u003e {\n  // set locals, only providing error in development\n  res.locals.message = err.message;\n  res.locals.error = req.app.get('env') === 'development' ? err : {};\n\n  // render the error page\n  res.status(err.status || 500);\n  res.render('error');\n});\n\nmodule.exports = app;\n```\n\nRUN the 'http://localhost:3000/api/categories' and get the JSON Static data in written in app.js.\n\nNow if you run http://localhost:4200/ using npm start. You will get CORS error in console.\n\nCors stands for cross origin resource. We have a separated server and client, remember they're running on different domains, localhost 3000 for the server, localhost 4200 for our angular app. Now client and server want to talk to each other and they're not on the same host, if they were, then we could communicate without any issues but if they're on different hosts like in our case, we got 4200 but it doesn't matter, if we have different hosts we're then communicating with such background requests will fail and that's a security mechanism.You should not be able to access the data on a server or its resources in general if you're not running on the same server, so if the request is coming from a different address, this will give us a so-called cors error.\n\nso let's go there to the app.js file and there I will simply add one additional middleware. Now this middleware of course has to run before we handle the response sending here because there after the response is already sent, we can't manipulate it any more and we want to manipulate the response because we need to add headers to it.\n\n```\nnpm install --save body-parser\n```\n\n### You have to write the following code in app.js to prevent from CORS\n\n```\nconst bodyParser = require(\"body-parser\");\n\napp.use(bodyParser.json());\napp.use(bodyParser.urlencoded({ extended: false }));\n\n\napp.use((req, res, next) =\u003e {\n  res.setHeader(\"Access-Control-Allow-Origin\", \"*\");\n  res.setHeader(\n    \"Access-Control-Allow-Headers\",\n    \"Origin, X-Requested-With, Content-Type, Accept\"\n  );\n  res.setHeader(\n    \"Access-Control-Allow-Methods\",\n    \"GET, POST, PATCH, DELETE, OPTIONS\"\n  );\n  next();\n});\n```\n\n\n# Adding Mongoose\n\nMongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB. Object Mapping between Node and MongoDB managed via Mongoose.\n\nhttps://mongoosejs.com/docs/guide.html\nhttps://docs.mongodb.com/manual/reference/operator/aggregation/group/\nhttps://www.mkyong.com/mongodb/mongodb-group-count-and-sort-example/\n\n```\nnpm install --save mongoose\n```\n\non the ecommerce_backend and for that, I'll create a new folder there and I'll name it models too. Model, schema, we'll basically.\n\n```\n1. Create categories.js because here I want to create my categories model using mongoose\n2. mongoose, const mongoose by using that require syntax where I require the mongoose package\n    const mongoose = require('mongoose');\n3. you first of all create a blueprint for how your data should look like.    \n```\n\n```\nconst mongoose = require('mongoose');\n\nconst categoriesSchema = mongoose.Schema({\n    catId: { type: String, required: true },\n    catName:  { type: String, required: true },\n    catDesc: { type: String, required: true },\n    subCat: { type: [], required: true },\n});\n\n/* \n**To use our schema definition, we need to convert our categoriesSchema into a Model we can work with.\nso it's this model which I'll export with the help of the module.exports syntax.\nNow this mongoose model can be used outside of this model file\n*/\nmongoose.exports = mongoose.Model('Categories', categoriesSchema);\n```\n\n# Connecting our Node Express App to MongoDB \n### connect with mLab (mLab is now part of MongoDB, Inc.)\n\nHow will you create a database in mLab : \n1. https://www.linkedin.com/pulse/create-database-mongodb-using-mlabcom-piyali-das/\n2. https://www.youtube.com/watch?v=GrphDM8CJ6Q\n\n1. Create a database ecommerce in mLab\n2. Now you have to create multiple tables in ecommerce database like categories, content, errors, products, validationerrors (see from assets/mockdata)\n3. connection string mongodb://\u003cdbuser\u003e:\u003cdbpassword\u003e.mlab.com:41557/ecommerce which will be use in database.js to connect with nodejs\n4. create a folder config in ecommerce_backend folder\n5. create a database.js file in config folder to build connectivity with mlab using authentication details\n6. create a models folder in ecommerce_backend folder\n7. Create a schema categories.js. You have to create multiple schema for each and every tables\n\n### app.js\n\n```\nconst database = require('./config/database');\nconst mongoose = require('mongoose'); // require mongoose\n\n// MongoDB connection\nmongoose.connect(database.mlab.url, {\n  useMongoClient: true\n});\nmongoose.Promise = global.Promise;\n\n// On connection error\nmongoose.connection.on('error', (error) =\u003e {\n  console.log('Database error: ' + error);\n});\n\n// On successful connection\nmongoose.connection.on('connected', () =\u003e {\n  console.log('Connected to database');\n});\n```\n\n### database.js\n\n```\nmodule.exports = {\n    mlab:\n    {\n        name: \u003cdbuser\u003e,\n        url: \"mongodb://\u003cdbuser\u003e:\u003cdbpassword\u003e.mlab.com:41557/ecommerce\",\n        port: 27017\n    }\n};\n```\n\n### categories.js\n\n```\nconst mongoose = require('mongoose');\n\nconst categoriesSchema = mongoose.Schema({\n    catId: { type: String, required: true },\n    catName:  { type: String, required: true },\n    catDesc: { type: String, required: true },\n    subCat: { type: [], required: true }\n});\n\n/* \n**To use our schema definition, we need to convert our categoriesSchema into a Model we can work with.\nso it's this model which I'll export with the help of the module.exports syntax.\nNow this mongoose model can be used outside of this model file\n*/\nmodule.exports = mongoose.model('Categories', categoriesSchema);\n```\n\n# Fetch data from mLab categories table\n\n### app.js\n\n```\nconst Categories = require(\"./models/categories\");\n\napp.use('/api/categories', (req, res, next) =\u003e {\n  Categories.find().then(cats =\u003e {\n    res.status(200).json({\n      message: \"Categories fetched successfully!\",\n      categories: cats\n    });\n  });\n});\n```\n\n## Enable GZIP to increase Performance in Nodejs\nExpress 4.x provides minimal functionality which can be enhanced with middleware. One of the less obvious missing features is GZIP compression which shrinks the HTTP payload so it can be expanded by the browser on receipt. To add GZIP, install the compression module using npm:\n\n```\nnpm install compression --save\n```\n\n(Depending on your setup, you may need to use sudo on Mac/Linux — there are various ways to fix that.)\n\nIn your main application launch file, include the compression module:\n\n```\nvar compression = require('compression');\n```\n\nthen mount it as the first middleware function (prior to other Express .use methods):\n\n```\n// GZIP all assets\napp.use(compression());\n```\n\n## Highcharts\nhttps://www.tutorialspoint.com/angular_highcharts/angular_highcharts_quick_guide.htm\nhttps://codesandbox.io/s/pk2z0qvk0q\n\n\n```\nnpm install highcharts --save\nnpm install highcharts-angular --save\n```\n\nAdd the following entry in highchartsApp.module.ts file\n\n```\nimport { HighchartsChartComponent } from 'highcharts-angular';\ndeclarations: [\n   ...\n   HighchartsChartComponent    \n],\n```\n\nFollowing is the content of the modified HTML host file app.component.html.\n\n```\n\u003chighcharts-chart\n   [Highcharts] = \"highcharts\" \n   [options] = \"chartOptions\" \n   style = \"width: 100%; height: 400px; display: block;\"\u003e\n\u003c/highcharts-chart\u003e\n```\n\n# Swagger tutorials\n\nhttps://www.youtube.com/watch?v=qemG0CWOx1I\nhttps://github.com/Sean-Bradley/Seans-TypeScript-NodeJS-CRUD-REST-API-Boilerplate\nhttps://www.youtube.com/watch?v=PbwQWw7xSOM\nhttp://petstore.swagger.io/\nhttps://itnext.io/setting-up-swagger-in-a-node-js-application-d3c4d7aa56d4\nhttps://www.youtube.com/watch?v=w71TrUUWRDU\nhttps://swagger.io/docs/\nhttp://editor.swagger.io/?_ga=2.212193814.307479361.1574600989-1925759619.1574389229\n\n# Swagger Implementation\n\n```\n1. cd ecommerce_backend\n2. npm run swagger\n3. npm run start:server\n```\n\n\n\n# Stripe payment gateway\n\n\nhttps://angularfirst.com/typescript-string-enums/\n\n\n# Reference Urls\nhttps://nehalist.io/working-with-models-in-angular/\n\n\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fecommerce","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpiyalidas10%2Fecommerce","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpiyalidas10%2Fecommerce/lists"}