Skip to content

update #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 45 commits into from
Dec 29, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
45 commits
Select commit Hold shift + click to select a range
0cec294
fix typo
backmeupplz Jul 13, 2017
d6d880c
fix: copying issues
kevguy Jul 19, 2017
5472454
fix: fix for tslint
kevguy Jul 19, 2017
bb5281e
Merge pull request #26 from cobola/master
Jul 20, 2017
5c796ca
port changes from PR #11
Jul 20, 2017
9601c65
Merge pull request #30 from Microsoft/testing
Jul 20, 2017
6d9fee1
Merge pull request #24 from kevguy/fix-copy
Jul 20, 2017
38be103
Merge pull request #22 from backmeupplz/patch-1
Jul 20, 2017
a50b2a9
Added survey links that I forgot ><
Jul 20, 2017
c80e236
fix: fix lint warnings for test files
kevguy Jul 23, 2017
da5b277
Bump tasks.json version from 0.10 to 2.00. Add default build task.
fpoumian Jul 23, 2017
32f4302
Merge pull request #32 from fpoumian/fix-vscode-tasks-version
Jul 25, 2017
3f1c52a
updating package-lock
Jul 20, 2017
684e4a3
looks like new version of npm adds a blank line after each npm instal…
Jul 20, 2017
9592b03
updated specific .d.ts files to point to definitely typed file. Also …
Jul 25, 2017
9710a63
update to node 8 on travis
Jul 25, 2017
ac3c52c
removed yarn as npm 5 makes it mostly unneccesary and it's causing so…
Jul 25, 2017
0026e88
Merge pull request #33 from Microsoft/removeYarn
Jul 25, 2017
08e570e
add attach debug configuration
Jul 27, 2017
d559bac
fix: word
Jul 27, 2017
49bb4c1
.
Jul 27, 2017
f9eae65
Merge pull request #34 from thanhtdt/master
Jul 31, 2017
c8dbb29
Update build task
lostintangent Jul 31, 2017
5cd9602
Merge pull request #35 from lostintangent/master
Jul 31, 2017
ed149eb
Merge pull request #31 from kevguy/test-fix
Aug 1, 2017
0acc845
change tests to not always pass
dmt Aug 9, 2017
8946ae7
separate server binding to port from other app config
dmt Aug 19, 2017
9d8741e
might as well also add the change for issue #41
dmt Aug 19, 2017
534cd4a
Update README.md
nmchaves Oct 8, 2017
d151ad7
feat(*): update several dependencies
alan-agius4 Oct 29, 2017
4066839
Removed extra "s" in sourceMap compilerOptions
sebastianseilund Nov 18, 2017
0dddad0
Merge pull request #56 from sebastianseilund/sourcemaps-typo
Dec 11, 2017
9c8f67f
Merge pull request #50 from nmchaves/patch-1
Dec 11, 2017
aa75060
Merge pull request #53 from alan-agius4/feature/bump=deps
Dec 12, 2017
7631ad5
Update README.md
nmchaves Oct 8, 2017
f80b88c
feat(*): update several dependencies
alan-agius4 Oct 29, 2017
365b4b7
Removed extra "s" in sourceMap compilerOptions
sebastianseilund Nov 18, 2017
58eb768
change tests to not always pass
dmt Aug 9, 2017
b3eddf3
separate server binding to port from other app config
dmt Aug 19, 2017
3f1c47e
fix conflicts
Dec 14, 2017
98d1641
fix up tests
Dec 14, 2017
ca7c9e5
Merge pull request #38 from dmt/master
Dec 14, 2017
a040f51
update repo field
Dec 14, 2017
e8ecc30
made some changes to mongo connection
Dec 19, 2017
40bdb4e
Merge pull request #63 from Microsoft/connectionRework
Dec 19, 2017
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 1 addition & 23 deletions .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,5 @@ MONGOLAB_URI=mongodb://localhost:27017

SESSION_SECRET=ashdfjhasdlkjfhalksdjhflak

MAILGUN_USER=postmaster@sandbox697fcddc09814c6b83718b9fd5d4e5dc.mailgun.org
MAILGUN_PASSWORD=29eldds1uri6

SENDGRID_USER=hslogin
SENDGRID_PASSWORD=hspassword00

FACEBOOK_ID=754220301289665
FACEBOOK_SECRET=41860e58c256a3d7ad8267d3c1939a4a

INSTAGRAM_ID=9f5c39ab236a48e0aec354acb77eee9b
INSTAGRAM_SECRET=5920619aafe842128673e793a1c40028

GITHUB_ID=cb448b1d4f0c743a1e36
GITHUB_SECRET=815aa4606f476444691c5f1c16b9c70da6714dc6

TWITTER_KEY=6NNBDyJ2TavL407A3lWxPFKBI
TWITTER_SECRET=ZHaYyK3DQCqv49Z9ofsYdqiUgeoICyh6uoBgFfu7OeYC7wTQKa

GOOGLE_ID=828110519058.apps.googleusercontent.com
GOOGLE_SECRET=JdZsIaWhUFIchmC1a_IZzOHb

TWILIO_SID=AC6f0edc4c47becc6d0a952536fc9a6025
TWILIO_TOKEN=a67170ff7afa2df3f4c7d97cd240d0f3

FACEBOOK_SECRET=41860e58c256a3d7ad8267d3c1939a4a
2 changes: 1 addition & 1 deletion .travis.yml
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

{
"language": "node_js",
"node_js": "6",
"node_js": "8",
"services": [
"mongodb"
],
Expand Down
6 changes: 6 additions & 0 deletions .vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"recommendations": [
"eg2.tslint",
"streetsidesoftware.code-spell-checker"
]
}
8 changes: 7 additions & 1 deletion .vscode/launch.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,12 @@
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "Attach",
"port": 9229
},
{
"type": "node",
"request": "launch",
Expand All @@ -13,7 +19,7 @@
"outFiles": [
"../dist/**/*.js"
],
"preLaunchTask": "build",
"preLaunchTask": "npm: build",
"protocol": "inspector"
}
]
Expand Down
14 changes: 7 additions & 7 deletions .vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "npm",
"isShellCommand": true,
"showOutput": "always",
"suppressTaskName": true,
"version": "2.0.0",
"tasks": [
{
"taskName": "build",
"args": ["run", "build"]
"type": "npm",
"script": "build",
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
35 changes: 20 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ Navigate to `http://localhost:3000`

# TypeScript + Node
The main purpose of this repository is to show a good end-to-end project setup and workflow for writing Node code in TypeScript.
I will try to keep this as up-to-date as possible, but community contributions and recommendations for improvements are encourage and will be most welcome.
I will try to keep this as up-to-date as possible, but community contributions and recommendations for improvements are encouraged and will be most welcome.

In the next few sections I will call out everything that changes when adding TypeScript to an Express project.
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 project to TypeScript.
Expand All @@ -48,13 +48,13 @@ For other editors, make sure you have the corresponding [TypeScript plugin](http

## Project Structure
The most obvious difference in a TypeScript + Node project is the folder structure.
In a TypeScript project, you it's best to have separate _source_ and _distributable_ files.
In a TypeScript project, it's best to have separate _source_ and _distributable_ files.
TypeScript (`.ts`) files live in your `src` folder and after compilation are output as JavaScript (`.js`) in the `dist` folder.
The `test` and `views` folders remain top level as expected.

The full folder structure of this app is explained below:

> **Note!** Make sure you have already built the app using `npm run build` or `yarn run build`
> **Note!** Make sure you have already built the app using `npm run build`

| Name | Description |
| ------------------------ | --------------------------------------------------------------------------------------------- |
Expand All @@ -66,7 +66,7 @@ The full folder structure of this app is explained below:
| **src/controllers** | Controllers define functions that respond to various http requests |
| **src/models** | Models define Mongoose schemas that will be used in storing and retrieving data from MongoDB |
| **src/public** | Static assets that will be used client side |
| **src/types** | Holds .d.ts files not found on DefinitelyTyped. Covered more in this [section](#) |
| **src/types** | Holds .d.ts files not found on DefinitelyTyped. Covered more in this [section](#type-definition-dts-files) |
| **src**/server.ts | Entry point to your express app |
| **test** | Contains your tests. Seperate from source because there is a different build process. |
| **views** | Views define how your app renders on the client. In this case we're using pug |
Expand All @@ -77,7 +77,6 @@ The full folder structure of this app is explained below:
| tsconfig.json | Config settings for compiling server code written in TypeScript |
| tsconfig.tests.json | Config settings for compiling tests written in TypeScript |
| tslint.json | Config settings for TSLint code style checking |
| yarn.lock | Contains same dependency version info as package.json, but used with yarn |

## Building the project
It is rare for JavaScript projects not to have some kind of build pipeline these days, however Node projects typically have the least amount build configuration.
Expand Down Expand Up @@ -138,7 +137,7 @@ All the different build steps are orchestrated via [npm scripts](https://docs.np
Npm scripts basically allow us to call (and chain) terminal commands via npm.
This is nice because most JavaScript tools have easy to use command line utilities allowing us to not need grunt or gulp to manage our builds.
If you open `package.json`, you will see a `scripts` section with all the different scripts you can call.
To call a script, simply run `npm run <script-name>` (or `yarn run <script-name` if using yarn) from the command line.
To call a script, simply run `npm run <script-name>` from the command line.
You'll notice that npm scripts can call each other which makes it easy to compose complex builds out of simple individual build scripts.
Below is a list of all the scripts this template has available:

Expand Down Expand Up @@ -188,6 +187,7 @@ In the `tsconfig.json` for this project you'll see the following:
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
Expand All @@ -205,7 +205,7 @@ The [README](https://github.com/Microsoft/dts-gen#dts-gen-a-typescript-definitio
In this project, `bcrypt-nodejs.d.ts`, `fbgraph.d.ts`, and `lusca.d.ts` were all generated using `dts-gen`.

#### Writing a `.d.ts` file
If generating a `.d.ts` using `dts-gen` isn't working, [you should tell me about it first](TODO-survey-link), but then you can create your own `.d.ts` file.
If generating a `.d.ts` using `dts-gen` isn't working, [you should tell me about it first](https://www.surveymonkey.com/r/LN2CV82), but then you can create your own `.d.ts` file.

If you just want to silence the compiler for the time being, create a file called `<some-library>.d.ts` in your `types` folder and then add this line of code:
```ts
Expand All @@ -219,7 +219,7 @@ The reason it's so easy to get great `.d.ts` files for most libraries is that de
Contributing `.d.ts` files is a great way to get into the open source community if it's something you've never tried before, and as soon as your changes are accepted, every other developer in the world has access to your work.

If you're interested in giving it a shot, check out the [guidance on DefinitelyTyped](https://github.com/definitelyTyped/DefinitelyTyped/#how-can-i-contribute).
If you're not interested, [you should tell me why](TODO-survey-link) so we can help make it easier in the future!
If you're not interested, [you should tell me why](https://www.surveymonkey.com/r/LN2CV82) so we can help make it easier in the future!

### Summary of `.d.ts` management
In general if you stick to the following steps you should have minimal `.d.ts` issues;
Expand Down Expand Up @@ -253,7 +253,7 @@ The best part of source maps is when configured correctly, you don't even know t
First you need to make sure your `tsconfig.json` has source map generation enabled:
```json
"compilerOptions" {
"sourceMaps": true
"sourceMap": true
}
```
With this option enabled, next to every `.js` file that the TypeScript compiler outputs there will be a `.map.js` file as well.
Expand Down Expand Up @@ -291,7 +291,7 @@ This is mostly identical to the "Node.js: Launch Program" template with a couple
| `"program": "${workspaceRoot}/dist/server.js",` | Modified to point to our entry point in `dist` |
| `"smartStep": true,` | Won't step into code that doesn't have a source map |
| `"outFiles": [...]` | Specify where output files are dropped. Use with source maps |
| `"protocol": inspector,` | Use the new Node debug protocal because we're on the latest node|
| `"protocol": inspector,` | Use the new Node debug protocol because we're on the latest node|

With this file in place, you can hit `F5` to serve the project with the debugger already attached.
Now just set your breakpoints and go!
Expand All @@ -300,6 +300,11 @@ Now just set your breakpoints and go!
VS Code will try to launch on the same port and error out.
Likewise be sure to stop the debugger before returning to your normal `npm start` process.

#### Using attach debug configuration
VS Code debuggers also support attaching to an already running program. The `Attach` configuration has already configured, everything you need to do is change `Debug Configuration` to `Attach` and hit `F5`.

> Tips! Instead of running `npm start`, using `npm run debug` and `Attach Configuration` that make you don't need to stop running project to debug.

## Testing
For this project, I chose [Jest](https://facebook.github.io/jest/) as our test framework.
While Mocha is probably more common, Mocha seems to be looking for a new maintainer and setting up TypeScript testing in Jest is wicked simple.
Expand Down Expand Up @@ -340,7 +345,7 @@ This all happens in memory when you run the tests, so there are no output `.js`

### Writing tests
Writing tests for web apps has entire books dedicated to it and best practices are strongly influenced by personal style, so I'm deliberately avoiding discussing how or when to write tests in this guide.
However, if prescriptive guidance on testing is something that you're interested in, [let me know](TODO-survey-link), I'll do some homework and get back to you.
However, if prescriptive guidance on testing is something that you're interested in, [let me know](https://www.surveymonkey.com/r/LN2CV82), I'll do some homework and get back to you.

## TSLint
TSLint is a code linter which mainly helps catch minor code quality and style issues.
Expand Down Expand Up @@ -397,14 +402,14 @@ In that file you'll find two sections:
| Package | Description |
| ------------------------------- | --------------------------------------------------------------------- |
| concurrently | Utility that manages multiple concurrent tasks. Used with npm scripts |
| jest | Reports real-time server metrics for Express. |
| node-sass | GitHub API library. |
| jest | Testing library for JavaScript. |
| node-sass | Allows to compile .scss files to .css |
| supertest | HTTP assertion library. |
| ts-test | Instagram API library. |
| ts-test | A preprocessor with sourcemap support to help use TypeScript wit Jest.|
| tslint | Linter (similar to ESLint) for TypeScript files |
| typescript | JavaScript compiler/type checker that boosts JavaScript productivity |

To install or update these dependencies you can use either `npm` or `yarn`.
To install or update these dependencies you can use `npm install` or `npm update`.

# Other
Here is a section of miscellaneous tips.
Expand Down
6 changes: 3 additions & 3 deletions copyStaticAssets.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
var shell = require('shelljs');

shell.cp('-R', 'src/public/js/lib', 'dist/public/js/lib');
shell.cp('-R', 'src/public/fonts', 'dist/public/fonts');
shell.cp('-R', 'src/public/images', 'dist/public/images');
shell.cp('-R', 'src/public/js/lib', 'dist/public/js/');
shell.cp('-R', 'src/public/fonts', 'dist/public/');
shell.cp('-R', 'src/public/images', 'dist/public/');
Loading