Change TypeScript getting started to use the new TypeScript support from the CLI.

Change-Id: Ic1fc6686dee79aadf4770f08a1b32fd4ae1a7a14

Author: Nicolas Garnier

typescript-getting-started/HOW-TO.md

@@ -3,8 +3,6 @@
 The following steps show how to set up TypeScript yourself starting
 from scratch.
 
-
-
 Steps:
 
 1. Create a project in the [Firebase Console](https://console.firebase.google.com/)
@@ -21,87 +19,21 @@ firebase init
 ```
 3. You will be prompted to select the Firebase project you just created in the
 Console UI and choose which Firebase features you want to use.  Select
-Functions and whatever other features you want to use, then type "n" when
-prompted to install dependencies with npm:
-```
-You're about to initialize a Firebase project in this directory:
-
-  /Users/.../functions-typescript
-
-? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter
- to confirm your choices. Functions: Configure and deploy Cloud Functions
-
-=== Project Setup
-
-First, let's associate this project directory with a Firebase project.
-You can create multiple project aliases by running firebase use --add,
-but for now we'll just set up a default project.
-
-i  .firebaserc already has a default project, skipping
-
-=== Functions Setup
-
-A functions directory will be created in your project with a Node.js
-package pre-configured. Functions can be deployed with firebase deploy.
-
-✔  Wrote functions/package.json
-✔  Wrote functions/index.js
-? Do you want to install dependencies with npm now? No
-
-i  Writing configuration info to firebase.json...
-i  Writing project information to .firebaserc...
-
-✔  Firebase initialization complete!
+Functions and whatever other features you want to use. Choose Typescript as the language you want to use for your functions and then type "n" when
+prompted to install dependencies with npm.
+4. The project will be automatically created with a ready-to-use Typescript enabled project. Your source code will go into the `functions/src` directory and it will be compiled to the `functions/lib` directory when running the Typescript compiler.
+5. To compile your source code you can run `npm run build` from the functions directory. Also note that a pre-deploy trigger has been added so that your source code is automatically compiled before each deployment when running `firebase deploy`.
+6. install dependencies with npm (still in `functions` directory)
 ```
-4. create a `src` directory and move index.js into it (changing the suffix)
-```
-cd functions
-mkdir src
-mv index.js src/index.ts
-```
-5. add the following dev dependencies, scripts, and we'll be compiling the js
-files in a directory called `build`, so we can specify where to start loading
-JavaScript for Cloud Functions as `"main"` in functions/package.json
-```
-  "devDependencies": {
-    "typescript": "^2.3.2"
-  },
-  "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
-    "deploy": "tsc && firebase deploy --only functions"
-  },
-  "main": "build/index.js",
-```
-
-6. install dependencies with yarn (still in `functions` directory)
-```
-yarn install
-```
-7. create a `tsconfig.json` file:
-```
-{
-  "compilerOptions": {
-    "lib": ["es6", "es2015.promise"],
-    "module": "commonjs",
-    "noImplicitAny": false,
-    "outDir": "build",
-    "sourceMap": true,
-    "target": "es6",
-  },
-  "include": [
-    "src/**/*.ts",
-    "spec/**/*.ts"
-  ]
-}
+npm install
 ```
 
 Note: if you want to just start using TypeScript gradually, you can target
 "es5" and the compiler will allow you to intermix old-school JavaScript
 and TypeScript.
 
 
-8. I like to exclude node_modules and compiled js files from git, so
+7. I like to exclude node_modules and compiled js files from git, so
 I add this to a root level `.gitignore` file
 
 ```
@@ -112,25 +44,13 @@ functions/**/*.js
 functions/**/*.js.map
 ```
 
-9. in `index.ts` update the syntax to TypeScript (`require` -> `import` and
-`exports.` -> `export let`)
-
-```
-import * as functions from 'firebase-functions'
-
-export let helloWorld = functions.https.onRequest((request, response) => {
- response.send("Hello from Firebase!\n\n");
-});
-```
-
-9. in `functions` directory, use the npm build script created
-above to build TypeScript files and deploy:
+8. in `functions` directory, use the npm deploy script to deploy your functions:
 ```
 npm run deploy
 ```
 You will see a bunch of output and at the end it will show you the URL for your deployed function.
 
-10. test YOUR function with curl. For mine I can do this:
+9. test YOUR function with curl. For mine I can do this:
 ```
 curl https://us-central1-functions-typescript.cloudfunctions.net/helloWorld
 ```

typescript-getting-started/README.md

@@ -15,7 +15,7 @@ development of JavaScript with optional types. When types are used,
 supported editors provide auto-suggest for methods and properties along
 with syntax highlighting of errors, which speeds development.
 
-TypeScript supports targeting different browsers, and optimizes
+TypeScript supports targeting different browsers or node versions, and optimizes
 the resulting JavaScript. It is much easier to write clean, consistent code
 across a project and development team.  TypeScript offers support for the
 latest and evolving JavaScript features like async functions and decorators,
@@ -25,73 +25,55 @@ For a nice intro to TypeScript, check out the [TypeScript PlayGround](https://ww
 
 ### What is different about TypeScript in this example?
 
-The TypeScript source is in `functions/src` and then we need to do a build
-step before deploying (see steps below).  The main Cloud Function entry
-point is `src/index.ts` which compiled to `src/index.js` and that is specified
+The TypeScript source is in `functions/src` and these files need to be compiled before deploying (see steps below).  The main Cloud Function entry
+point is `src/index.ts` and it compiled to `lib/index.js` which is specified
 in `functions/package.json`.
 
-There are two key differences to the example Cloud Function:
+There are two key differences between the example Cloud Function in Typescript and ES2015:
 
 * `require` -> `import`
-* `exports.` -> `export let`
+* `exports.` -> `export const`
 
 JavaScript:
 ```
-var functions = require('firebase-functions');
+const functions = require('firebase-functions');
 
 exports.helloWorld = functions.https.onRequest((request, response) => {
- response.send("Hello from Firebase!\n\n");
+ response.send('Hello from Firebase!\n\n');
 });
 ```
 
 TypeScript:
 ```
 import * as functions from 'firebase-functions'
 
-export let helloWorld = functions.https.onRequest((request, response) => {
- response.send("Hello from Firebase!\n\n");
+export const helloWorld = functions.https.onRequest((request, response) => {
+ response.send('Hello from Firebase!\n\n');
 });
 ```
 
 
-
 ### Project Setup
 
-This project was set up using [yarn](https://yarnpkg.com) which will ensure
-that your deployed Cloud Functions are using the exact same versions of
-npm modules that you are running locally. The specific version of each
-dependency is saved in [yarn.lock](functions/yarn.lock)
-
-
 This example has the default sample function. To use this example as a
 starter project:
 
 1. `npm install -g firebase-tools`
-2. `git clone https://github.com/firebase/functions-samples.git`
 3. Create a Firebase Project using the Firebase Developer Console
-4. Make a directory for your project and cd into it. Then initialize
-   the Firebase project and replace the default functions directory with
-   this one. The directory name doesn't have to be the same as your
-   Firebase project name -- that's just common practice. In the following
-   steps a shell variable is used to make it simple to change the first line:
-   ```
-   PROJECT=your-project-name
-   mkdir $PROJECT; cd $PROJECT
-   firebase init
-   firebase use --add $PROJECT
-   rm -rf functions
-   cp -r ../functions-samples/typescript-getting-started/functions functions
-   ```
-5. Install the dependencies and deploy
+2. Download the source code of this sample: `git clone https://github.com/firebase/functions-samples`
+4. Enter the right sample directory: `cd functions-samples/typescript-getting-started`
+5. Configure this project to use the Firebase project you have created: `firebase use --add` and select your project in the list.
+6. Install the dependencies and deploy
    ```
    cd functions
-   yarn     # or npm install
+   npm install
    npm run deploy
    ```
 
 Note: with TypeScript you need to build the JavaScript files before
-deploying, so there's an npm script that does the steps.  You can see
-that and a few other handy shortcuts in [package.json](functions/package.json)
+deploying, so an npm script does this steps.  You can see
+that and a few other handy shortcuts in [package.json](functions/package.json).
+Also a pre-deploy trigger ensures that the code is always transpied before deploying. You can see this in the [firebase.json](firebase.json).
 
 After the deploy is complete, you will see output with the URL of your
 Cloud Function endpoint. You can test the function with curl.  The following

typescript-getting-started/firebase.json

@@ -1 +1,5 @@
-{}
+{
+  "functions": {
+    "predeploy": "npm --prefix functions run build"
+  }
+}

typescript-getting-started/functions/package.json

@@ -1,19 +1,23 @@
 {
   "name": "functions",
-  "description": "Cloud Functions for Firebase",
+  "description": "TypeScript sample Cloud Functions for Firebase",
   "dependencies": {
-    "firebase-admin": "~4.2.1",
-    "firebase-functions": "^0.5.7"
+    "firebase-admin": "~5.5.0",
+    "firebase-functions": "^0.7.1"
   },
   "devDependencies": {
     "@types/express": "^4.0.37",
-    "typescript": "^2.3.2"
+    "tslint": "^5.8.0",
+    "typescript": "^2.6.1"
   },
   "scripts": {
-    "build": "tsc",
-    "watch": "tsc --watch",
-    "deploy": "tsc && firebase deploy --only functions"
+    "build": "./node_modules/.bin/tslint -p tslint.json && ./node_modules/.bin/tsc",
+    "serve": "npm run build && firebase serve --only functions",
+    "shell": "npm run build && firebase experimental:functions:shell",
+    "start": "npm run shell",
+    "deploy": "firebase deploy --only functions",
+    "logs": "firebase functions:log"
   },
-  "main": "build/index.js",
+  "main": "lib/index.js",
   "private": true
 }

typescript-getting-started/functions/src/index.ts

@@ -1,3 +1,20 @@
+/**
+ * Copyright 2017 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+'use strict';
+
 import * as functions from 'firebase-functions'
 
 // if you need to use the Firebase Admin SDK, uncomment the following:
@@ -9,6 +26,6 @@ import * as functions from 'firebase-functions'
 //    cd functions
 //    npm run deploy
 
-export let helloWorld = functions.https.onRequest((request, response) => {
- response.send("Hello from Firebase!\n\n");
+export const helloWorld = functions.https.onRequest((request, response) => {
+ response.send('Hello from Firebase!\n\n');
 });

typescript-getting-started/functions/tsconfig.json

@@ -1,14 +1,14 @@
 {
   "compilerOptions": {
-    "lib": ["es6", "es2015.promise"],
+    "lib": ["es6"],
     "module": "commonjs",
-    "noImplicitAny": false,
-    "outDir": "build",
+    "noImplicitReturns": true,
+    "outDir": "lib",
     "sourceMap": true,
     "target": "es6"
   },
+  "compileOnSave": true,
   "include": [
-    "src/**/*.ts",
-    "spec/**/*.ts"
+    "src"
   ]
-}
+}