
## TypeScript + Node.js + CloudFunction + FireStore

This blog try to demo how to deploy a `Google Cloud Function` that will interact with `fireStore` NOSQL database, and use `TypeScript` for static typing at development, and instead of use CI/CD pipeline will just use `husky` at local to gard and watch the quality of the code and deploy to the Google cloud locally.

## Pre Requirement

Before we start writing the code, there're few pre requirement are not include in this blog but require the application to run.

- GCP Account/Project - make sure has active GCP account and GCP project setup.
- Firebase Account/Project - Your fireBase should connect with GCP, logged on to the Firebase and find the fireStore.
- Run `gcloud config list` - to make sure your local environment are connect to the correct project.

## Setup npm repo

Now, let's get started, first we'll need to initialize the npm repo by run the following command on your local. This will create `package.json` file with default setting.

```
npm init -y
```

## Install dependencies packages

We'll install following dependencies packages since we'll interact with firebase.

```
npm install --save firebase-admin firebase-functions
```

## Install dev dependencies packages

Install following package during the build time, such as typescript for static typing and eslint for syntax analyzer.

```
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-google eslint-plugin-import firebase-functions-test
```

## Update `main` field at `package.json`

Update the `package.json` for start file.

```
"main": "dist/index.js",
```

## Start writing Code `index.ts`

let's create a file `index.ts` under root folder, and add following code. These are import some package we'll use later, the `firebase-functions/v2` will use the Google Cloud Function gen2, which will have better performance.

```Javascript
import * as functions from "firebase-functions/v2";
import {initializeApp} from "firebase-admin/app";
import {getFirestore} from "firebase-admin/firestore";
```

Next, we'll initialize the app, and start use the fireStore, so add following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook with firebase's `functions` to listen to the request, no inside the `onRequest` will be add our main logic, which either get data from fireStore or some update or delete operations.

```Javascript
exports.main = functions
    .https.onRequest(async (request, response) => {

      console.info('on request');

    });
```

### Create `tsconfig.json`

Since we have our first code is ready, let's create our first `tfconfig.json` to compile the typescript into javascript. We'll also add following command to the `package.json`'s `scripts` section.

Once run the `npm run build`, so our code will start to compile the `index.ts` and create javascript file under the `dist/index.js`.

```
"scripts": {
    "build": "tsc"
}
```

### Ready to Deploy Code

So that's all we need for now, we should be able continue adding code to the typescript file `index.ts`, and able to use the simple typescript build to run the `npm run build` to compile the typescript into the javascript and ready to deploy to the production.

### Deploy from Local

In this blog, we don't have lots developer works on the same repo, when many ppl work on the same repository it'll be better to use CI/CD with git pull request so whenever some one create new pull request to the main branch can start continue integration and deploy the latest code to the correct environment.

So instead we'll add following `gcloud` command to the `scripts` section, when you ready to deploy to the google cloud, we can just run the `npm run deploy`, which will set the gcloud project and deploy cloud function.

```JSON
"scripts": {
    "deploy": "npm run deploy:project && npm run deploy:run",
    "deploy:project": "gcloud config set project set-to-the-correct-project-id",
    "deploy:run": "gcloud functions deploy your-cloud-function-name --trigger-http --region=us-central1 --runtime=nodejs16 --gen2 --allow-unauthenticated --entry-point=main --run-service-account=service-account-can-run-the-cloud-function"
}
```

### TypeScript deployment with Cloud Function with fireStore

That'a all for create typescript for cloud function and interact with fireStore and deploy locally.

### Other choice?

Since we use `fireStore`, which is part of `firebase`, we could use firebase's `firebase-tools` to generate list of files to support typescript, now when use with `firebase` tools, to setup the cloud function, few setting you'll have to follow with firebase's setting.

<strong>set node.js version</strong>

```Json
"engines": {
    "node": "16"
}
```

<strong>set region</strong>

```Javascript
functions.setGlobalOptions({
  region: 'us-west1-a'
});
```

<strong>set gen2</strong>

```Javascript
import * as functions from "firebase-functions/v2";
```

<strong>set function name</strong>

Now, following is how you set the function name, once I don't like is that `exports.main` limit the name can be define, use `glcoud` to define the function name, entry point, or gen2 are much more easlier than the `firebase`'s settings.

```Javascript
exports.main = functions
```

### Conclusion

Use `firebase`'s `firebase-tools` could simply setup typescript for firebase cloud function, and after tried a while use `gcloud` has maximum flexibility compare with `firebase-tools`, it could be improve but at this point I feel just use the `typescript` is much more easier.


This blog show how to setup TypeScript with CloudFunction and Deploy to Google Cloud locally

Use TypeScript with Google CloudFunction and Deploy locally


<ul>
  <li>
    <a
      href="https://www.typescriptlang.org/index.html#download-links"
      target="_blank"
      >URL where to download TypeScript</a
    >
  </li>
  <li>
    <a href="https://www.npmjs.com/package/gulp-typescript" target="_blank"
      >gulp-typescript</a
    >
  </li>
  <li>
    <a href="https://www.npmjs.com/package/grunt-typescript" target="_blank"
      >grunt-typescript</a
    >
  </li>
  <li>
    <a href="https://www.typescriptlang.org/docs/tutorial.html" target="_blank"
      >TypeScript Document</a
    >
  </li>
  <li>
    <a href="https://github.com/Microsoft/TypeScript/releases" target="_blank"
      >TypeScript Release Note</a
    >
  </li>
  <li>
    <a
      href="http://weblogs.asp.net/dwahlin/creating-a-typescript-workflow-with-gulp"
      target="_blank"
      >Use TypeScript with Gulp</a
    >
  </li>
</ul>
<h3>TypeScript Version</h3>
<p>
  How to check TypeScript's version by MS Command. Type
  <code>tsc -v</code> will show TypeScript's version.
</p>
<pre class="language-javascript">
tsc -v
Version 1.0.3.0
</pre>
<p>
  If you're in windows enviroment, above command line might not give you the
  latest version of TypeScript, because the command line is probably use the
  windows enviroment's default path for TypeScript to check the version. That's
  probably why it's return <code>1.0.3.0</code>, but you have already install
  <code>1.7</code>. For change this, you can try following different things,
</p>
<h6>Change windows enviroment path for TypeScript.</h6>
<p>
  Or install the Visual Studo 2015 version 2, becausae this version of visual
  studio will contains TypeScrit Build on the Visual Studio and if you already
  installed latest version of TypeScript, it'll warn you and will update the
  visaul studio for you.
</p>
<blockquote>
  TypeScript Visual Studio 2015 Update 2 includes TypeScript 1.8, which includes
  the following new and improved features. Support for string literal types,
  F-bounded polymorphism, 'this'-based type guards, and improved union type
  inference. The compiler now highlights common bugs such as unreachable code,
  missing return statements, and unused labels. JSX support has been updated to
  recognize and colorize the latest changes in the JSX syntax. Improved
  tsconfig.json support for better control over build configurations. Ability to
  design more modular libraries using module augmentation. JavaScript source
  files can be included as input to the TypeScript compiler. For more
  information, see the TypeScript blog on MSDN.
</blockquote>
<h3>Install TypeScript</h3>
<p>
  You can install TypeScript by either
  <code>npm install -g typescript</code> if you have NPM installed, or you can
  download TypeScritp Executable file to windows and install.
</p>
<h3>Create TypeScript file</h3>
<p>
  TypeScript end up extension with <code>*.ts</code>, let's say you create file
  like following.
</p>
<pre class="language-javascript">
function appendName(name) {
	return "Hi, " + name;
}
</pre>
<p>
  Go to the location at that file at your command line, type
  <code>tsc {your file}.ts</code>, then you should get a javascript generate by
  TypeScript command, {your file}.js.
</p>
<h3>Use TypeScript Syntax</h3>
<p>
  Let's change the method to <code>appendStringName(name: string)</code>, it is
  TypeScript syntax that it will only take string for the parameter, when you
  run the command <code>tsc {your file}.ts</code>, it will throw error but the
  javascript file will regenerated. I'm kind of not really TypeScript at this
  point already...
</p>
<h3>
  Why? becuase sometime TypeScript will generate Javascript, sometime it doesn't
  generate Javascript.
</h3>
<p>
  Now, following TypeScript will output be second snippet's javascript result.
</p>
<h6>TypeScript example of using Class</h6>
<pre class="language-javascript">
function appendStringName(name: string) {
	return "Hi, " + name;
}

class User {
	name: string;
	age: number;
	constructor (public firstName, public lastName, public age) {
	this.name = firstName + " " + lastName + " " + age;
	
	}
}

// passing number to the string is ok
appendStringName(1);
// passing string to the int is not okay
var user = User("john", "kenny", "1");

</pre>
<h6>TypeScript's output result in Javascript</h6>
<pre class="language-javascript">
function appendStringName(name) {
    return "Hi, " + name;
}

var User = (function () {
    function User(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.name = firstName + " " + lastName + " " + age;
    }
    return User;
})();

// passing number to the string is ok
appendStringName(1);

// passing string to the int is not okay
var user = User("john", "kenny", "1");

</pre>
<h3>How to learn TypeScript</h3>
<p>
  Check&nbsp;<a
    href="https://www.typescriptlang.org/docs/tutorial.html"
    target="_blank"
    >TypeScript Document</a
  >'s all the aspects, and try it out!
</p>


This blog shows how to get started with TypeScript.

Getting Start with TypeScript


<h3>A resource to Learn Angular2</h3>
<p>
  This blog just provides a few links to learn Angular2, I create this page just
  want to memo a few links of how to learn Angular2.
</p>
<ul>
  <li>
    <a
      href="https://github.com/timjacobi/angular2-education"
      target="_blank"
      rel="noopener"
      >BadAssList - Resource of Learn Angular2</a
    >
  </li>
  <ul>
    <li>A very helpful list to learn Angular2</li>
  </ul>
  <li>
    <a
      href="https://books.ninja-squad.com/public/samples/Become_a_ninja_with_Angular2_sample.pdf"
      target="_blank"
      rel="noopener"
      >PDF - Become a Ninja with Angular2</a
    >
  </li>
  <li>
    <a href="https://angular.io/" target="_blank" rel="noopener"
      >Info - Angular2 Home Page</a
    >
  </li>
  <ul>
    <li>Go to the Angular2 home page to check what's the main features.</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/quickstart.html"
      target="_blank"
      rel="noopener"
      >Try 1 - Angular2 Quick Start</a
    >
  </li>
  <ul>
    <li>
      Use this Angular.io's quick start to learn how to build a Hello world by
      Angular2.
    </li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/tutorial/"
      target="_blank"
      rel="noopener"
      >Try 2 - Angular2 Tutorial</a
    >
  </li>
  <ul>
    <li>
      This Angular2.io's tutorial will learn how to use angular2 Components,
      services, Routing, and HTTP.
    </li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/guide/"
      target="_blank"
      rel="noopener"
      >Document - Angular.io's guide</a
    >
  </li>
  <ul>
    <li>A basic guide for the developer</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/guide/attribute-directives.html"
      target="_blank"
      rel="noopener"
      >Document - Angular.io's developer guide</a
    >
  </li>
  <ul>
    <li>More information about Angular2.</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/api/"
      target="_blank"
      rel="noopener"
      >Angular2 API</a
    >
  </li>
  <li>
    <a
      href="https://github.com/x6doooo/generator-gulp-angular2"
      target="_blank"
      rel="noopener"
      >Example - generator-gulp-angular2</a
    >
  </li>
  <ul>
    <li>Yeoman generator's angular2 version</li>
  </ul>
  <li>
    <a
      href="https://github.com/angular/quickstart/blob/master/README.md"
      target="_blank"
      rel="noopener"
      >Angular.io quick start's github location</a
    >
  </li>
  <li>
    <a
      href="http://whatpixel.com/learn-angular2-from-scratch/"
      target="_blank"
      rel="noopener"
      >Blog - how to learn Angular2</a
    >
  </li>
  <li>
    <a
      href="http://thenewstack.io/google-preps-angular-2-final-release/"
      target="_blank"
      rel="noopener"
      >News - Positive - Google Preps Angular 2 for Final Release</a
    >
  </li>
  <li>
    <a
      href="https://www.youtube.com/watch?v=_-CD_5YhJTA"
      target="_blank"
      rel="noopener"
      >Video - Angular2 Tutorial for beginner</a
    >
  </li>
  <li>
    <a
      href="https://egghead.io/courses/angular-2-fundamentals"
      target="_blank"
      rel="noopener"
      >Video - egghead - Learn Angular2</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/angular-2-first-look"
      target="_blank"
      rel="noopener"
      >Video - Angular 2 : First Look</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/angular-2-getting-started"
      target="_blank"
      rel="noopener"
      >Video - Angular 2 - Getting Started</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/play-by-play-angular-typescript-john-papa-christopher-martin"
      target="_blank"
      rel="noopener"
      >Video - Play by Play</a
    >
  </li>
  <li>
    <a href="http://learnangular2.com/" target="_blank" rel="noopener"
      >site - learnangular2.com</a
    >
  </li>
  <ul>
    <li>a website build for people who want to learn angular2</li>
  </ul>
  <li>
    <a href="http://www.angular2.com/" target="_blank" rel="noopener"
      >site - angular2.com</a
    >
  </li>
  <li>
    <a href="https://nodejs.org/en/" target="_blank" rel="noopener"
      >Tool - Node.js - You need this to try angular2</a
    >
  </li>
  <li>
    <a
      href="https://www.typescriptlang.org/index.html"
      target="_blank"
      rel="noopener"
      >Tool - TypeScript - Angular2 could build with TypeScript</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/search?q=angular+2&amp;categories=all"
      target="_blank"
      rel="noopener"
      >Course - Paid to learn Angular2 - Pluralsight</a
    >
  </li>
  <ul>
    <li>If you pay you can take the angular2 course here.</li>
  </ul>
</ul>
<h3>Resource for other languages/tools relative to Angular2</h3>
<ol>
  <li>
    <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener"
      >TypeScript</a
    >
  </li>
  <li>
    <a
      href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md"
      target="_blank"
      rel="noopener"
      >SystemJs</a
    >
  </li>
</ol>
<h3>Environment for start doing Anglar2</h3>
<ul>
  <li>node.js</li>
  <ul>
    <li>http://nodejs.org/</li>
    <li>version: 4.x is better stable than 5.x (7/72016 point)</li>
  </ul>
  <li>npm</li>
  <ul>
    <li>version: 2.x, will come along when installing node.js</li>
  </ul>
  <li>IDE</li>
  <ul>
    <li>Visual Studio Code</li>
    <ul>
      <li>
        <a
          href="https://code.visualstudio.com/Docs/?dv=win"
          target="_blank"
          rel="noopener"
          >https://code.visualstudio.com/Docs/?dv=win</a
        >
      </li>
    </ul>
    <li>Cloud9</li>
    <li>WebStorm</li>
    <li>Sublime</li>
  </ul>
  <li>Git</li>
  <ul>
    <li>
      <a href="http://git-scm.com/" target="_blank" rel="noopener"
        >http://git-scm.com/</a
      >
    </li>
  </ul>
</ul>
<h3>Angular2 Tags</h3>
<ul>
  <li>TypeScript</li>
  <li>SystemJs</li>
  <li>Single Responsibility Principle</li>
  <li>dash case (aka kebab-case)</li>
  <li>decorator</li>
  <li>Injectable</li>
  <li>@Injectable()</li>
  <li>Dependency Injection</li>
  <li>Promise</li>
  <li>ngOnInt</li>
  <li>Angular Lifecycle Hook</li>
  <li>Pipes</li>
  <li>interpolation</li>
  <li>one-way data binding</li>
  <li>two-way data binding</li>
  <li>Multi-line template strings</li>
  <li>template strings feature in ES2015</li>
  <li>double curly braces of interpolation</li>
  <li>ngFor</li>
  <ul>
    <li>build-in directive</li>
  </ul>
  <li>ngIf&nbsp;</li>
  <li>Structural Directives</li>
  <li>property binding</li>
  <li>Attribute Directives</li>
  <li>@Input()</li>
  <li>angular2 promise service</li>
  <li>Async Angular Service with Promises</li>
  <li>ES2015 Promises</li>
  <li>ES2015 arrow function</li>
  <li>Angular2 base href</li>
  <li>component-relative paths</li>
  <li>parent component property binding</li>
  <li>ActivateRoute</li>
  <li>ngOnDesroy</li>
  <li>angular2's subscribe -&gt; params.subscribe</li>
  <li>angular2's unsubscribe -&gt; this.sub.unsubscribe();</li>
  <li>Javascript(+) operator</li>
  <li>CanDeactivate guard</li>
  <li>routerLinkActive</li>
</ul>
<h3>Angular2 Coding Styles</h3>
<ul>
  <li>service</li>
  <ul>
    <li>.service</li>
    <li>MyGreateService -&gt; my-greate.service.ts</li>
  </ul>
</ul>
<h3>How to Learn Angular2</h3>
<ol>
  <li>Angular2</li>
  <ul>
    <li>
      First, learn basic angular2, tutorial, read documentation, build a
      prototype.
    </li>
  </ul>
  <li>TypeScript</li>
  <ul>
    <li>Learn basic with angular2, also dive deep into TypeScript</li>
  </ul>
  <li>Visual Studio Code</li>
  <li>SystemJs</li>
  <li>Npm</li>
  <li>Grunt/Gulp</li>
  <li>Visual Studio</li>
  <ul>
    <li>
      How to integrate the above technology into visual studio, let's say,
      ASP.NET MVC, MVC5
    </li>
  </ul>
</ol>
<h3>Question for Angular2</h3>
<ol>
  <li>When should we use Angular2?</li>
  <li>Angular2 for SEO?</li>
  <li>Why need to unsubscribe()? -&gt; this.sub.unsubscribe();</li>
  <li>
    The angular component could add CSS URLs, but how to work with SASS or
    minified CSS?
  </li>
</ol>


Start Angular2 - Resources


### Introduction

This blog shows how to get start use TypeScript to write code and also write in Jest.

### Install Packages

If you have not use Jest, can reference this to get start with Jest with JavaScript, [Get Start with Jest](/blog/post/start-setup-jest).

At here, we'll start install necessary NPM packages for use TypeScript at Jest and the code.

```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @jest/globals @types/jest babel-jest ts-jest ts-node typescript
```

### Create `babel.config.js`

```JavaScript
module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };
```

### Create `jest.config.ts`

```JavaScript
export default {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage"
}
```

### Change the Code `sample.js` to TypeScript `sample.ts`

### Change the Jest `sample.test.js` to TypeScript `sample.test.ts`

```JavaScript
import {exponent, subtraction, sum} from '../src/sample';
import {describe, expect, test} from '@jest/globals';

describe('calculator', () => {
    test('test sum', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('test subtraction', () => {
        expect(subtraction(10, 2)).toBe(8);
    });

    test('test exponent', () => {
        expect(exponent(5, 2)).toBe(25);
    });
})
```

### Run `npm run test`

Now, if run `npm run test` and if everything works, should see test all passed and 100% coverage.


This blog shows how to get start use TypeScript to write code and also write in Jest.

Category TypeScript

Use TypeScript with Google CloudFunction and Deploy locally

Getting Start with TypeScript

Start Angular2 - Resources

How to use TypeScript with Jest