Build Reactjs project

• Every nodejs or reactjs generally has package.json file
• we will execute commands from scripts section in the packages.json file to
  • build
  • test
  • run the application
• sample project

Importance of package.json

The package.json file is a fundamental component of Node.js projects, serving as a manifest that holds essential metadata about the project, its dependencies, scripts, and configurations. Understanding its semantics is crucial for effective Node.js development.

Key Components of package.json

1. Metadata Fields

These fields provide basic information about the project:

• name: The name of the project, which should be unique if published on npm. It can include up to 214 URL-friendly characters and must not contain uppercase letters or leading periods/underscores (except for scoped packages) [2][4].
• version: Indicates the current version of the project, typically following Semantic Versioning (e.g., “1.0.0”) [2][4].
• description: A brief summary of what the project does [3].
• main: Specifies the main entry point of the application (e.g., “index.js”), which is the file loaded when the module is required [2][4].
• author: The name of the project’s author [1].
• license: Specifies the license under which the project is distributed (e.g., MIT) [3].

2. Dependency Management

The dependencies and devDependencies fields are crucial for managing external libraries:

• dependencies: Lists packages required for the application to run in production [4][5].
• devDependencies: Contains packages needed only during development (e.g., testing frameworks) [2][4].

3. Scripts Section

The scripts field allows developers to define custom scripts for automating tasks such as starting the application, running tests, or building the project. For example:

"scripts": {
  "start": "node app.js",
  "test": "jest"
}

This section enhances workflow efficiency by enabling quick execution of common commands via npm [4][5].

4. Additional Fields

Other useful fields include:

• keywords: An array of strings that help identify and categorize the project [2][4].
• repository: Indicates where the project’s source code is hosted, typically a URL to a Git repository [4].
• private: When set to true, it prevents accidental publication of private packages to npm [4].

Conclusion

The package.json file is essential for managing Node.js projects effectively. It not only defines the project’s metadata but also facilitates dependency management and automates tasks through scripts. Mastering its structure and semantics is vital for any developer working within the Node.js ecosystem, ensuring better collaboration, maintainability, and scalability of applications.

Citations:
[1] https://www.geeksforgeeks.org/what-is-package-json-in-node-js/
[2] https://nodesource.com/blog/the-basics-of-package-json
[3] https://www.geeksforgeeks.org/node-js-package-json/
[4] https://insights.encora.com/insights/a-developers-guide-to-package.json-best-practices-from-basics-to-mastery
[5] https://javascript.plainenglish.io/mastering-package-json-the-heart-of-every-node-js-project-b665a9cb82ab?gi=5155a05c8894

Reusing Pipeline steps

• Generally every project will have similar steps for the same techincal stack, Writing the pipeline every time works but we can create reusable assets.
• Reusable assets should accept inputs and they should available for other projects.
• To do this we have two options
  • Write reusable pipelines in yaml formats (template/extends)
  • Create custom Azure DevOps tasks

Templates: Writing Reusable pipelines in YAML Format

• Official docs
• Azure DevOps supports templates at following
  • pipeline
  • stage
  • job
  • step
• Azure DevOps Template has two major approaches to use a template
  • include templates:
    • This is used when you want to use the template as it is by passing values (parameters/variables)
  • extend templates:
    • This is used when you want to use the template by changing steps or adding steps (Extending functionality)
• to use templates and configuring templates correctly we need to understand
  • Paramters
  • variables, variable groups and secrets
  • conditionals
  • loops

Parameters

• In Azure Pipelines:
  • Parameters
  • Types
• In Templates

Conditionals

• official docs
• Expressions
• Functions

Example of dotnet build from a template

• In Github

---
pool: Default

trigger: none

pr:
  - develop

# link to github repo
resources:
  repositories:
    - repository: resuabePublicAssets
      type: github
      name: asquarezone/AzureDevOpsTemplates
      refs: 'refs/heads/main'
      endpoint: 'github.com_shaikkhajaibrahim'


steps:
  - template: dotnetcore/dotnetcore-build.yaml@resuabePublicAssets
    parameters:
      mainproject: 'src/Presentation/Nop.Web/Nop.Web.csproj'
      testproject: 'src/Test/Nop.Tests/Nop.Tests.csproj'
      runTests: false

• In Azure DevOps Source Repos

---
pool: Default

trigger: none

pr:
  - develop

# link to github repo
resources:
  repositories:
    - repository: resuabePrivateAssets
      type: git
      name: AzureDevOpsTemplates.git
      refs: 'refs/heads/main'


steps:
  - template: dotnetcore/dotnetcore-build.yaml@resuabePrivateAssets
    parameters:
      mainproject: 'src/Presentation/Nop.Web/Nop.Web.csproj'
      testproject: 'src/Test/Nop.Tests/Nop.Tests.csproj'
      runTests: false