# Angular - include basic git details

In this article, I'll show you how to include basic GIT data in the Angular application. The data will be dumped to `src/assets/version.json` file and will consist of:

* short hash
    
* long hash
    
* branch name
    
* commit date
    

# Set up the app

Init the test app with default settings:

```shell
ng new app --defaults=true
```

Navigate to the app directory:

```shell
cd app
```

Install the dependencies. I'll be using the `git-rev-sync` library.

```shell
npm i git-rev-sync
```

# Implement the solution

Create a `.gitignore` file the `src/assets` directory and add the following content. This will prevent the file from being included in the repository.

```bash
version.json
```

Create the script file `dump-git-info.js` in the app's main directory. The flow is quite simple:

* import the libraries
    
* read git data
    
* write file
    

```javascript
// dump-git-info.js

const git = require('git-rev-sync');
const { writeFileSync } = require('fs');

const version = {
  short: git.short(),
  long: git.long(),
  branch: git.branch(),
  date: git.date(),
};

writeFileSync('./src/assets/version.json', JSON.stringify(version));
```

You can run the script with the following command:

```shell
npm i git-rev-sync
```

Check the file `./src/assets/version.json` and you should see output similar to:

```json
{"short":"386e4a5","long":"386e4a55e9e96018465754de172c351c68f7ff1f","branch":"master","date":"2023-04-15T13:45:30.000Z"}
```

Add the script to `package.json`:

```json
{
  "scripts": {
    "dump-git-info": "node dump-git-info.js",
...
```

Also, add `prebuild` hook to run it automatically:

```json
{
  "scripts": {
    "prebuild": "npm run dump-git-info",
...
```

From now on, whenever you run `npm run build` the `version.json` will be also created and accessible through `/assets/version.json` url in the browser.

```shell
$ npm run build

> app@0.0.0 prebuild
> npm run dump-git-info


> app@0.0.0 dump-git-info
> node dump-git-info.js


> app@0.0.0 build
> ng build

> Generating browser application bundles (phase: setup)...
```

# Source code

https://gitlab.com/barcioch-blog-examples/007-angular-include-git-info