feat: Initial app setup and folder structure

[ashutosh-bisoyi]

• Base angular app with linting setup
• Initial folder structure idea
• Added folder structure info in md doc

[xixas]

@ashutosh-bisoyi Once refer to this to see if you are missing something. Have added comments too.

my-angular-app/
|-- src/                      // Source code directory
|   |-- app/                  // Main app code
|   |   |-- components/       // Reusable UI components
|   |   |   |-- ...
|   |   |
|   |   |-- layouts/          // Layout components for consistent UI structure
|   |   |   |-- header/       // Header layout component
|   |   |   |-- sidebar/      // Sidebar layout component
|   |   |   |-- footer/       // Footer layout component
|   |   |
|   |   |-- shared/           // Shared code and utilities
|   |   |   |-- services/     // Shared services
|   |   |   |-- models/       // Shared data models and interfaces
|   |   |
|   |   |-- feature-modules/  // Feature-specific modules
|   |   |   |-- feature-a/    // Example feature module folder
|   |   |   |   |-- ...
|   |   |   |
|   |   |   |-- feature-b/    // Another feature module folder
|   |   |   |   |-- ...
|   |   |
|   |   |-- app.component.ts  // Main app component class
|   |   |-- app.component.html // Main app template
|   |   |-- app.component.scss // Main app styles
|   |   |-- app.module.ts     // Main app module
|   |
|   |-- assets/               // Static assets
|   |   |-- images/           // Image files
|   |   |   |-- logo.png      // Sample image file
|   |   |   |-- ...
|   |   |
|   |   |-- styles/           // Global styles and assets
|   |   |   |-- _variables.scss // Global style variables. Write Import code in main style file if needed.
|   |   |   |-- _mixins.scss    // Global mixins. Write Import code in main style file if needed.
|   |   |   |-- ...
|   |   |
|   |   |-- fonts/            // Font files
|   |   |   |-- ...
|   |   |
|   |   |-- icons/            // Icon files
|   |   |   |-- ...
|   |   |
|   |   |-- videos/           // Video files
|   |   |   |-- ...
|   |   |
|   |   |-- audio/            // Audio files
|   |   |   |-- ...
|   |   |
|   |   |-- documents/        // Document files (PDFs, etc.)
|   |   |   |-- ...
|   |
|   |-- ...
|
|-- declarations/             // TypeScript declarations for external scripts
|   |-- scripts.d.ts          // Declaration file for external scripts
|
|   |-- environments/         // Environment configuration files
|   |   |-- environment.ts    // Development environment config
|   |   |-- environment.prod.ts // Production environment config
|   |   |-- environment.staging.ts // Staging environment config
|   |   |-- environment.test.ts // Test environment config
|
|-- index.html
|-- main.ts
|-- polyfills.ts // => I believe we need this
|-- styles.scss // => I believe we need this
|
|-- angular.json              // Angular CLI configuration
|-- tsconfig.json             // TypeScript configuration
|-- package.json              // Package dependencies and scripts
|-- README.md                 // Project documentation
|-- tslint.json               // TypeScript linting rules
|-- karma.conf.js             // Karma test runner configuration
|-- protractor.conf.js        // End-to-end testing configuration
|
|-- translations/             // Localization files (if applicable)
|   |-- en.json              // English language translations
|   |-- fr.json              // French language translations
|   |-- es.json              // Spanish language translations
|   |-- ...
|-- scripts/                  // Custom scripts (e.g., setup scripts)
|   |-- setup.sh              // Example setup script
|   |-- third-party/          // Third-party scripts
|   |   |-- jquery.min.js     // Example third-party library
|   |   |-- ...
|   |
|   |-- custom-scripts/       // Other custom scripts
|   |   |-- analytics.js      // Example custom script
|   |   |-- ...
|
|-- node_modules/             // Dependencies installed via npm/yarn
|
|-- dist/                     // Built application files
|
|-- e2e/                      // End-to-end testing
|   |-- protractor.conf.js    // Protractor configuration for e2e testing
|   |-- app.e2e-spec.ts       // e2e testing spec file
|   |-- app.po.ts             // Page object for e2e testing
|
|-- .gitignore                // Git ignore file
|-- .editorconfig             // Editor configuration
|-- .browserslistrc           // Browser compatibility configuration
|-- .prettierrc               // Prettier code formatting configuration
|-- tsconfig.app.json         // TypeScript configuration for app code
|-- tsconfig.spec.json        // TypeScript configuration for tests
|-- tsconfig.e2e.json         // TypeScript configuration for e2e tests
|
|-- jest.config.js            // Jest testing framework configuration
|
|-- nginx.conf                // Sample Nginx configuration for deployment
|-- ecosystem.config.js       // PM2 configuration file

[ashutosh-bisoyi]

@xixas Here's my take on the comment added

1. app folder structure - the app folder looks good to me based on our structure. It explicitly defines the core, shared and feature components.

• Based on suggestions, layout can be a part of our code folder
• Component is already present as a part of shared folder

2. assets -

• based on the comment should we keep styles folder in assets? I guess it will not be bundled then. we have three options for styles folder(which holds not component specific styles but global styles) can be placed inside app folder/ in app folder hierarchy/ in assets folder.
• fonts - on fonts our suggestion should be to use web fonts from cdn that helps caching and decreasing our project size. If we agree on this we'll not have fonts folder in our assets.

3. Declarations and environments - I added those missing folders by keeping them child of src in same hierarchy.
   polyfills - we can safely remove this file for angular 15+ applications. Angular CLI does not include it on new application generation anymore.
4. styles.scss - it is in our styles folder as main.scss
5. translations - this lies in the assets i18n folder
6. browserlist.rc - we can eliminate this too in modern angular applications since they support all modern browsers

other than this

1. scripts - 3rd part scripts I'm not very sure if we'll need this. May be we can consider adding this if we got any requirement while setting up base features.
2. testing files like Karma and protactor - I have not included this since we are not writting testing files nor perofrming any e2e testing or unit testing using them. so should we add them?
3. nginx.conf and ecosystem.config.js - are they applicable and useful in our case?

all of the mentioned are mostly suggestions and not conclusion. We can discuss on them as needed

[xixas]

@ashutosh-bisoyi
Most of the things mentioned are possibilities in case a need arises. So if someone is going to add them, they should know where we are expecting them to place it in.

• Third-party scripts we will be using if needed. It can even just be workers being used for some calculations related to rendering.
• We might require Fonts in some cases. The use of CDN vs static files in the server can vary based on the project. Many services also provide generating fonts/icon files as svgs/tff etc instead of having links. Ex: https://soochna.osmosys.co/books/research-development/page/add-icon-set-for-your-front-end-project
• You can add the karma and protractor config as by default spec.ts files are also auto-generated. We may not write tests but can keep the configs if they need to be included.
• nginx.conf and ecosystem.config.js. These two are also for reference. nginx.conf will be used to deploy with nginx and ecosystem.config.js will be used if we want to run our APP using PM2. They are not necessary.

[ashutosh-bisoyi]

Alright @xixas thanks for the suggestions. So this is what we can do

1. add a script folder so that people can use that if they want to
2. add a fonts folder in assets to cover font use cases
3. On testing - Yes we can go ahead with karma config. But e2e test is a rare case I think, and we'll hardly go for that. So in this case should we consider adding e2e setup and config files? (if there is no plan for e2e testing then it may not be useful)
4. nginx.conf and ecosystem.config.js we'll go for this if we feel its need in our usecase

Put your comments on this as you think will be the right choice for us to go ahead.

[xixas]

@ashutosh-bisoyi
You can keep the e2e config if its auto-generated by Angular if not you can leave it.
nginx.conf and ecosystem.config.js => These are not necessary mostly. You can skip them Maybe we can cover them in deployment documentation of the project if needed.

[ashutosh-bisoyi]

Alright @xixas. Yeah angular does not auto-generate these testing configs by default. If we need customisations we can ask angular to generate that. ex: I generated karma config. If I don't angular handles it in the back. For e2e too it does not generate the configs. Skipping that for now, we can add them when we are ready for it.

Agree on the 2nd point