Getting started tweaks to make Trevor feedback (#6779)

Author: rkoron007

docs/source/getting-started.mdx

@@ -1,13 +1,13 @@
 ---
 title: Get started with Apollo Server
-description: ""
+description: ''
 ---
 
 This tutorial helps you:
 
-* Obtain a basic understanding of GraphQL principles
-* Define a GraphQL **schema** that represents the structure of your data set
-* Run an instance of Apollo Server that lets you execute queries against your schema
+- Obtain a basic understanding of GraphQL principles
+- Define a GraphQL **schema** that represents the structure of your data set
+- Run an instance of Apollo Server that lets you execute queries against your schema
 
 This tutorial assumes that you are familiar with the command line and
 JavaScript and have installed a recent Node.js (14+) version. Additionally, for those interested, this tutorial includes an optional section describing how to set up Apollo Server with TypeScript.
@@ -16,24 +16,26 @@ JavaScript and have installed a recent Node.js (14+) version. Additionally, for
 
 1. From your preferred development directory, create a directory for a new project and `cd` into it:
 
-  ```bash
-  mkdir graphql-server-example
-  cd graphql-server-example
-  ```
+```bash
+mkdir graphql-server-example
+cd graphql-server-example
+```
 
 2. Initialize a new Node.js project with `npm` (or another package manager you
-prefer, such as Yarn):
+   prefer, such as Yarn):
 
-  ```bash
-    npm init --yes
-  ```
+```bash
+  npm init --yes
+```
 
 Your project directory now contains a `package.json` file.
 
 ## Step 2: Install dependencies
+
 Applications that run Apollo Server require two top-level dependencies:
-* [`graphql`](https://npm.im/graphql) (also known as `graphql-js`) is the library that implements the core GraphQL parsing and execution algorithms.
-* [`@apollo/server`](https://www.npmjs.com/package/@apollo/server) is the main library for Apollo Server itself. Apollo Server knows how to turn HTTP requests and responses into GraphQL operations and run them in an extensible context with support for plugins and other features.
+
+- [`graphql`](https://npm.im/graphql) (also known as `graphql-js`) is the library that implements the core GraphQL parsing and execution algorithms.
+- [`@apollo/server`](https://www.npmjs.com/package/@apollo/server) is the main library for Apollo Server itself. Apollo Server knows how to turn HTTP requests and responses into GraphQL operations and run them in an extensible context with support for plugins and other features.
 
 Run the following command to install both of these packages and save them in
 your project's `node_modules` directory:
@@ -55,10 +57,10 @@ mkdir src
 touch src/index.ts
 ```
 
-2. Run the following command to install the `typescript` package into your project's dev dependencies:
+2. Run the following command to install the `typescript` and `@types/node` packages into your project's dev dependencies:
 
 ```bash
-npm install --save-dev typescript
+npm install --save-dev typescript @types/node
 ```
 
 3. Next, create a `tsconfig.json` file in your project:
@@ -74,25 +76,29 @@ touch tsconfig.json
   "compilerOptions": {
     "rootDirs": ["src"],
     "outDir": "dist",
-    "lib": ["es2019"],
-    "target": "es2019",
+    "lib": ["es2020"],
+    "target": "es2020",
     "module": "esnext",
     "moduleResolution": "node",
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "types": ["node"]
   }
 }
 ```
 
 For more information on the compiler options above, see the [TypeScript Compiler docs](https://www.typescriptlang.org/tsconfig).
 
 5. Finally, replace the default `scripts` entry in your `package.json` file with the following `type` and `scripts` entries:
+
 ```json title="package.json"
 {
   // ...etc.
   "type": "module",
   "scripts": {
-    "start": "tsc && node ./dist/index.js"
-  },
+    "compile": "tsc",
+    "postinstall": "npm run compile",
+    "start": "npm run compile && node ./dist/index.js"
+  }
   // other dependencies
 }
 ```
@@ -103,7 +109,7 @@ The above `start` script tells TypeScript to compile your code into JavaScript b
 
 ```
 > [email protected] start
-> tsc && node ./dist/index.js
+> npm run compile && node ./dist/index.js
 ```
 
 </ExpansionPanel>
@@ -119,13 +125,14 @@ If you are using JavaScript, create a `index.js` file that will contain **all**
 ```
 
 Now replace the default `scripts` entry in your `package.json` file with these `type` and `scripts` entries:
+
 ```json title="package.json"
 {
   // ...etc.
   "type": "module",
   "scripts": {
     "start": "node index.js"
-  },
+  }
   // other dependencies
 }
 ```
@@ -171,7 +178,6 @@ const typeDefs = `#graphql
 
 </MultiCodeBlock>
 
-
 > Adding `#graphql` to the beginning of a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) provides GraphQL syntax highlighting in supporting IDEs.
 
 This snippet defines a simple, valid GraphQL schema. Clients will be able to execute a query named `books`, and our server will return an array of zero or more `Book`s.
@@ -279,14 +285,14 @@ We can now execute GraphQL queries on our server. To execute our first query, we
 
 Visit `http://localhost:4000` in your browser, which will open the Apollo Sandbox:
 
-<img class="screenshot" src="./images/sandbox.jpeg" alt="Apollo Sandbox"/>
+<img class="screenshot" src="./images/sandbox.jpeg" alt="Apollo Sandbox" />
 
 The Sandbox UI includes:
 
-* An Operations panel for writing and executing queries (in the middle)
-* A Response panel for viewing query results (on the right)
-* Tabs for schema exploration, search, and settings (on the left)
-* A URL bar for connecting to other GraphQL servers (in the upper left)
+- An Operations panel for writing and executing queries (in the middle)
+- A Response panel for viewing query results (on the right)
+- Tabs for schema exploration, search, and settings (on the left)
+- A URL bar for connecting to other GraphQL servers (in the upper left)
 
 Our server supports a single query named `books`. Let's execute it!
 
@@ -303,7 +309,12 @@ query GetBooks {
 
 Paste this string into the Operations panel and click the blue button in the upper right. The results (from our hardcoded data set) appear in the Response panel:
 
-<img class="screenshot" src="./images/sandbox-response.png" width="400" alt="Sandbox response panel"/>
+<img
+  class="screenshot"
+  src="./images/sandbox-response.png"
+  width="400"
+  alt="Sandbox response panel"
+/>
 
 > **Note:** If Apollo Sandbox can't find your schema, ensure you have introspection enabled by passing `introspection: true` to the `ApolloServer` constructor. We recommend disabling introspection when using Apollo Server in a production environment.
 
@@ -314,7 +325,10 @@ One of the most important concepts of GraphQL is that clients can choose to quer
 You can view and fork the complete example on Github:
 
 <div align="left">
-  <ButtonLink href="https://github.com/apollographql/docs-examples/tree/main/apollo-server/v4/getting-started" size="lg">
+  <ButtonLink
+    href="https://github.com/apollographql/docs-examples/tree/main/apollo-server/v4/getting-started"
+    size="lg"
+  >
     See the full example!
   </ButtonLink>
 </div>
@@ -331,10 +345,8 @@ This example application is a great starting point for working with
 Apollo Server. Check out the following resources to learn more about the basics
 of schemas, resolvers, and deployment:
 
-* [Schema basics](/apollo-server/schema/schema/)
-* [Resolvers](/apollo-server/data/resolvers/)
-* [Deploying with Heroku](/apollo-server/deployment/heroku/)
-
-Want to learn how to modularize and scale a GraphQL API?  Check out the [Apollo Federation Docs](/federation) to learn how a federated architecture can create a unified *supergraph* that combines multiple GraphQL APIs.
-
+- [Schema basics](/apollo-server/schema/schema/)
+- [Resolvers](/apollo-server/data/resolvers/)
+- [Deploying with Heroku](/apollo-server/deployment/heroku/)
 
+Want to learn how to modularize and scale a GraphQL API? Check out the [Apollo Federation Docs](/federation) to learn how a federated architecture can create a unified _supergraph_ that combines multiple GraphQL APIs.