Feature Request: Allow different port for FE.

[ryan-roemer]

I'm testing this out with a different project in an outside repo and 3000 is already in use for the app, so my use case is specifying a different port for the FE to run on.

I had this working in a previous branch, but pulled new release and couldn't get yarn build to work anymore (some error about TS + an experimental decorator), so here's a diff that might point things in the right direction:

diff --git a/dashboard-fe/package.json b/dashboard-fe/package.json
index 0c7b4d0..1c7016f 100644
--- a/dashboard-fe/package.json
+++ b/dashboard-fe/package.json
@@ -3,9 +3,9 @@
   "version": "1.2.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 3000",
+    "dev": "next dev -p ${NEXT_PUBLIC_PORT:-3000}",
     "build": "next build",
-    "start": "next start",
+    "start": "next start -p ${NEXT_PUBLIC_PORT:-3000}",
     "docker:build:ci": "rm -rf node_modules && docker build --build-arg auth0_client_key=$AUTH0_CLIENT_SECRET --build-arg auth0_cookie_secret=$SESSION_COOKIE_SECRET_B64 . -t scriptedalchemy/mf-dashboard:latest",
     "docker:build": "rm -rf node_modules && docker build . -t scriptedalchemy/mf-dashboard:latest",
     "docker:run": "docker run -p 3000:3000 -t scriptedalchemy/mf-dashboard",
diff --git a/dashboard-fe/pages/_app.js b/dashboard-fe/pages/_app.js
index 1342dd4..7de0aa7 100644
--- a/dashboard-fe/pages/_app.js
+++ b/dashboard-fe/pages/_app.js
@@ -4,8 +4,9 @@ import { ApolloProvider } from "@apollo/react-hooks";
 import Head from "next/head";
 import CssBaseline from "@material-ui/core/CssBaseline";
 
+const PORT = process.env.NEXT_PUBLIC_PORT || "3000";
 const client = new ApolloClient({
-  uri: "http://localhost:3000/api/graphql",
+  uri: `http://localhost:${PORT}/api/graphql`,
 });
 
 function MyApp({ Component, pageProps }) {

This uses the special variable NEXT_PUBLIC_{NAME} to allow it to be built in to the frontend from environment. And the diff doesn't handle docker and I haven't really tested it outside of making my app work with the dashboard.

Usage for a non-standard port would then be something like:

Dev:

$ NEXT_PUBLIC_PORT=4000 yarn dev

Prod:

$ NEXT_PUBLIC_PORT=4000 yarn build
$ NEXT_PUBLIC_PORT=4000 yarn start