Add support for now dev (vercel#72)

* Remove hacks to support now dev

* Fix local development for now dev

* Update CONTRIBUTING.md

* Add now dev to package.json

CONTRIBUTING.md

@@ -7,13 +7,13 @@ There are two pieces to `og-image` that are worth noting before you begin develo
 
 The Now 2.0 platform handles [routing](https://github.com/zeit/og-image/blob/master/now.json#L12) in an elegate way for us so deployment is easy.
 
-However, local development requires a few steps.
+To start hacking, do the following:
 
-1. Clone this repo
-2. Run `npm install` to install all dependencies
-3. Run `npm run watch` to get TS to JS compilation file watch running (compiles on save)
-4. Run the backend with `npm start` (you can try it by visiting http://localhost:13463/Nice.png)
-5. Run the frontend with `npx http-server .` and visit http://localhost:8080/public/index.html
-6. If necessary, edit the `exePath` in [options.ts](https://github.com/zeit/og-image/blob/master/src/options.ts) to point to your local Chrome executable
+1. Clone this repo with `git clone https://github.com/zeit/og-image`
+2. Change directory with `cd og-image`
+2. Run `yarn` or `npm install` to install all dependencies
+3. Run  `yarn dev` or `npm run dev` to start the dev server
+4. Visit http://localhost:8080/public/index.html
+5. If necessary, edit the `exePath` in [options.ts](https://github.com/zeit/og-image/blob/master/src/options.ts) to point to your local Chrome executable
 
 Now you're ready to start local development!

package.json

@@ -4,7 +4,7 @@
   "description": "Generate an open graph image for twitter/facebook/etc",
   "main": "dist/card.js",
   "scripts": {
-    "start": "node dist/card.js",
+    "dev": "now dev",
     "build": "tsc",
     "now-build": "tsc",
     "watch": "tsc --watch"

src/browser.ts

@@ -216,7 +216,7 @@ const App = (_: any, state: AppState, setState: SetState) => {
     } = state;
     const mdValue = md ? '1' : '0';
     const imageOptions = theme === 'light' ? imageLightOptions : imageDarkOptions;
-    const url = new URL(window.location.hostname === 'localhost' ? 'http://localhost:13463' : window.location.origin);
+    const url = new URL(window.location.origin);
     url.pathname = `${encodeURIComponent(text)}.${fileType}`;
     url.searchParams.append('theme', theme);
     url.searchParams.append('md', mdValue);

src/card.ts

@@ -1,10 +1,10 @@
-import { createServer, IncomingMessage, ServerResponse } from 'http';
+import { IncomingMessage, ServerResponse } from 'http';
 import { parseRequest } from './parser';
 import { getScreenshot } from './chromium';
 import { getHtml } from './template';
 import { writeTempFile, pathToFileURL } from './file';
 
-const isDev = !process.env.NOW_REGION;
+const isDev = process.env.NOW_REGION === 'dev1';
 const isHtmlDebug = process.env.OG_HTML_DEBUG === '1';
 
 export default async function handler(req: IncomingMessage, res: ServerResponse) {
@@ -31,10 +31,3 @@ export default async function handler(req: IncomingMessage, res: ServerResponse)
         console.error(e);
     }
 }
-
-
-if (isDev) {
-    const PORT = process.env.PORT || 13463;
-    const listen = () => console.log(`Listening on ${PORT}...`);
-    createServer(handler).listen(PORT, listen);
-}