You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Nov 16, 2023. It is now read-only.
Or, if you're using VS Code, you can use `cmd + shift + b` to run the default build task (which is mapped to `npm run build`), and then you can use the command palette (`cmd + shift + p`) and select `Tasks: Run Task` > `npm: start` to run `npm start` for you.
76
76
77
77
> **Note on editors!** - TypeScript has great support in [every editor](http://www.typescriptlang.org/index.html#download-links), but this project has been pre-configured for use with [VS Code](https://code.visualstudio.com/).
78
-
Throughout the README We will try to call out specific places where VS Code really shines or where this project has been setup to take advantage of specific features.
78
+
Throughout the README We will try to call out specific places where VS Code really shines or where this project has been set up to take advantage of specific features.
79
79
80
80
Finally, navigate to `http://localhost:3000` and you should see the template being served and rendered locally!
81
81
82
82
# Deploying the app
83
-
There are many ways to deploy an Node app, and in general, nothing about the deployment process changes because you're using TypeScript.
83
+
There are many ways to deploy a Node app, and in general, nothing about the deployment process changes because you're using TypeScript.
84
84
In this section, I'll walk you through how to deploy this app to Azure App Service using the extensions available in VS Code because I think it is the easiest and fastest way to get started, as well as the most friendly workflow from a developer's perspective.
85
85
86
86
## Prerequisites
@@ -91,11 +91,11 @@ The Azure free tier gives you plenty of resources to play around with including
91
91
-**Create a cloud database** -
92
92
For local development, running MongoDB on localhost is fine, however once we deploy we need a database with high availability.
93
93
The easiest way to achieve this is by using a managed cloud database.
94
-
There are many different providers, but the easiest one to get started with is [MongoLab](#mlab).
94
+
There are many different providers, but the easiest one to get started with is [MongoLab](#Create a managed MongoDB with MongoLab).
95
95
-**SendGrid Account** -
96
-
If you don't have one, you can sign up for free, we will need it to send emails. There are many different providers that Nodemailer supports ([Well-known services](https://nodemailer.com/smtp/well-known/)), we'll be using [SendGrid](#sendgrid).
96
+
If you don't have one, you can sign up for free, we will need it to send emails. There are many different providers that Nodemailer supports ([Well-known services](https://nodemailer.com/smtp/well-known/)), we'll be using [SendGrid](#SendGrid Account).
97
97
98
-
### <aname="mlab"></a> Create a managed MongoDB with MongoLab
98
+
### Create a managed MongoDB with MongoLab
99
99
1. Navigate to [MongoLab's Website](https://mlab.com/), sign up for a free account, and then log in.
100
100
2. In the **MongoDB Deployments** section, click the **Create New** button.
101
101
3. Select any provider (I recommend **Microsoft Azure** as it provides an easier path to upgrading to globally distributed instances later).
@@ -114,7 +114,7 @@ You can test that it works locally by updating `MONGODB_URI_LOCAL` to the same c
114
114
After rebuilding/serving, the app should work, but users that were previously created in local testing will not exist in the new database!
115
115
Don't forget to return the `MONGO_URI_LOCAL` to your local test database (if you so desire).
116
116
117
-
### <aname="sendgrid"></a> SendGrid Account
117
+
### SendGrid Account
118
118
1. Navigate to [SendGrid's Website](https://sendgrid.com/), sign up for a free account, and complete the verification process.
119
119
2. Open your `.env` file and update `SENDGRID_USERNAME` and `SENDGRID_PASSWORD` with your SendGrid username and password respectively.
120
120
@@ -136,7 +136,7 @@ Deploying from VS Code can be broken into the following steps:
136
136
5. Paste in the code that is on your clipboard.
137
137
6. Go back to VS Code, you should now be signed in.
138
138
You can confirm that everything worked by seeing your Azure subscription listed in the Azure App Service section of the explorer window.
139
-
Additionally you should see the email associated with your account listed in the status bar at the bottom of VS Code.
139
+
Additionally, you should see the email associated with your account listed in the status bar at the bottom of VS Code.
140
140
141
141
### Build the app
142
142
Building the app locally is required to generate a zip to deploy because the App Service won't execute build tasks.
@@ -152,10 +152,10 @@ If you haven't changed the name, this will be `TypeScript-Node-Starter`.
152
152
4. Choose the subscription you want this app to be billed to (don't worry, it will be free).
153
153
5. Choose `Create New Web App`
154
154
6. Enter a globally unique name -
155
-
This will be part of the URL that azure generates so it has to be unique, but if you're planning on adding a custom domain later, it's not that important. I usually just add random numbers to the end of the app name, ie. typescript-node-starter-15121214.
155
+
This will be part of the URL that azure generates, so it has to be unique, but if you're planning on adding a custom domain later, it's not that important. I usually just add random numbers to the end of the app name, ie. typescript-node-starter-15121214.
156
156
7. Choose a resource group -
157
157
If you don't know what this is, just create a new one.
158
-
If you have lots of cloud resources that should be logically grouped together (think an app service and a database that supports that app) then you would want to put them in the same resource group.
158
+
If you have lots of cloud resources that should be logically grouped together (think an app service, and a database that supports that app) then you would want to put them in the same resource group.
159
159
This can always be updated later though.
160
160
If you create a new resource group, you'll also be prompted to pick a location for that group.
161
161
Pick something geographically close to where your users are.
@@ -170,15 +170,15 @@ All of this is powered by the [Azure CLI](https://docs.microsoft.com/en-us/cli/a
170
170
This deployment is not the fastest option (but it is the easiest!). We are literally bundling everything in your project (including the massive node_modules folder) and uploading it to our Azure app service. Times will vary, but as a baseline, my deployment took roughly 6 minutes.
171
171
12. Add `NODE_ENV` environment variable - In the App Service section of the explorer window, expand the newly created service, right click on **Application Settings**, select **Add New Settings...**, and add `NODE_ENV` as the key and `production` as the value.
172
172
This setting determines which database to point to.
173
-
If you haven't created a cloud database yet, see [the setup instructions](#mlab).
173
+
If you haven't created a cloud database yet, see [the setup instructions](#Create a managed MongoDB with MongoLab).
174
174
13. Profit! If everything worked you should see a page that looks like this: [TypeScript Node Starter Demo Site](https://typescript-node-starter.azurewebsites.net/)
175
175
176
176
### Troubleshooting failed deployments
177
177
Deployment can fail for various reasons, if you get stuck with a page that says *Service Unavailable* or some other error, [open an issue](https://github.com/Microsoft/TypeScript-Node-Starter/issues/new) and I'll try to help you resolve the problems.
178
178
179
179
# TypeScript + Node
180
180
In the next few sections I will call out everything that changes when adding TypeScript to an Express project.
181
-
Note that all of this has already been setup for this project, but feel free to use this as a reference for converting other Node.js projects to TypeScript.
181
+
Note that all of this has already been set up for this project, but feel free to use this as a reference for converting other Node.js projects to TypeScript.
182
182
183
183
## Getting TypeScript
184
184
TypeScript itself is simple to add to any project with `npm`.
@@ -202,7 +202,7 @@ The full folder structure of this app is explained below:
|**.vscode**| Contains VS Code specific settings |
205
-
|**.github**| Contains GitHub settings and configurations, incuding the GitHub Actions workflows |
205
+
|**.github**| Contains GitHub settings and configurations, including the GitHub Actions workflows |
206
206
|**dist**| Contains the distributable (or output) from your TypeScript build. This is the code you ship |
207
207
|**node_modules**| Contains all your npm dependencies |
208
208
|**src**| Contains your source code that will be compiled to the dist dir |
@@ -309,7 +309,7 @@ Below is a list of all the scripts this template has available:
309
309
## Type Definition (`.d.ts`) Files
310
310
TypeScript uses `.d.ts` files to provide types for JavaScript libraries that were not written in TypeScript.
311
311
This is great because once you have a `.d.ts` file, TypeScript can type check that library and provide you better help in your editor.
312
-
The TypeScript community actively shares all of the most up-to-date `.d.ts` files for popular libraries on a GitHub repository called [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types).
312
+
The TypeScript community actively shares all the most up-to-date `.d.ts` files for popular libraries on a GitHub repository called [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types).
313
313
Making sure that your `.d.ts` files are setup correctly is super important because once they're in place, you get an incredible amount of high quality type checking (and thus bug catching, IntelliSense, and other editor tools) for free.
314
314
315
315
> **Note!** Because we're using `"noImplicitAny": true`, we are required to have a `.d.ts` file for **every** library we use. While you could set `noImplicitAny` to `false` to silence errors about missing `.d.ts` files, it is a best practice to have a `.d.ts` file for every library. (Even if the `.d.ts` file is [basically empty!](#writing-a-dts-file))
@@ -373,7 +373,7 @@ If you're not interested, [you should tell me why](https://www.surveymonkey.com/
373
373
### Summary of `.d.ts` management
374
374
In general if you stick to the following steps you should have minimal `.d.ts` issues;
375
375
1. After installing any npm package as a dependency or dev dependency, immediately try to install the `.d.ts` file via `@types`.
376
-
2. If the library has a `.d.ts` file on DefinitelyTyped, the install will succeed and you are done.
376
+
2. If the library has a `.d.ts` file on DefinitelyTyped, the installation will succeed, and you are done.
377
377
If the install fails because the package doesn't exist, continue to step 3.
378
378
3. Make sure you project is [configured for supplying your own `d.ts` files](#setting-up-typescript-to-look-for-dts-files-in-another-folder)
379
379
4. Try to [generate a `.d.ts` file with dts-gen](#using-dts-gen).
@@ -384,8 +384,8 @@ If not, continue to step 5.
384
384
```ts
385
385
declaremodule"<some-library>";
386
386
```
387
-
7. At this point everything should compile with no errors and you can either improve the types in the `.d.ts` file by following this [guide on authoring `.d.ts` files](http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) or continue with no types.
388
-
8. If you are still having issues, let me know by sending me an email or pinging me on twitter, I will help you.
387
+
7. At this point everything should compile with no errors, and you can either improve the types in the `.d.ts` file by following this [guide on authoring `.d.ts` files](http://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html) or continue with no types.
388
+
8. If you are still having issues, let me know by emailing me or pinging me on twitter, I will help you.
389
389
390
390
## Debugging
391
391
Debugging TypeScript is exactly like debugging JavaScript with one caveat, you need source maps.
@@ -414,7 +414,7 @@ Because we are writing Node.js code, we don't have to worry about this.
414
414
415
415
### Using the debugger in VS Code
416
416
Debugging is one of the places where VS Code really shines over other editors.
417
-
Node.js debugging in VS Code is easy to setup and even easier to use.
417
+
Node.js debugging in VS Code is easy to set up and even easier to use.
418
418
This project comes pre-configured with everything you need to get started.
419
419
420
420
When you hit `F5` in VS Code, it looks for a top level `.vscode` folder with a `launch.json` file.
@@ -611,4 +611,4 @@ A majority of this quick start's content was inspired or adapted from Sahat's ex
611
611
612
612
## License
613
613
Copyright (c) Microsoft Corporation. All rights reserved.
0 commit comments