Merge pull request #64 from icgc-argo/rc/0.5.0

rc/0.5.0

.env

@@ -10,10 +10,12 @@ NEXT_PUBLIC_REGION=Germany
 NEXT_PUBLIC_PLATFORM_UI_ROOT=
 
 ######### Ego
-NEXT_PUBLIC_EGO_API_ROOT=http://localhost:8081
-EGO_CLIENT_ID=rdpc-ui-local
-EGO_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0lOqMuPLCVusc6szklNXQL1FHhSkEgR7An+8BllBqTsRHM4bRYosseGFCbYPn8r8FsWuMDtxp0CwTyMQR2PCbJ740DdpbE1KC6jAfZxqcBete7gP0tooJtbvnA6X4vNpG4ukhtUoN9DzNOO0eqMU0Rgyy5HjERdYEWkwTNB30i9I+nHFOSj4MGLBSxNlnuo3keeomCRgtimCx+L/K3HNo0QHTG1J7RzLVAchfQT0lu3pUJ8kB+UM6/6NG+fVyysJyRZ9gadsr4gvHHckw8oUBp2tHvqBEkEdY+rt1Mf5jppt7JUV7HAPLB/qR5jhALY2FX/8MN+lPLmb/nLQQichVQIDAQAB\n-----END PUBLIC KEY-----"
+NEXT_PUBLIC_EGO_API_ROOT=
+NEXT_PUBLIC_EGO_CLIENT_ID=
+NEXT_PUBLIC_EGO_PUBLIC_KEY="-----BEGIN PUBLIC KEY-----\nMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA0lOqMuPLCVusc6szklNXQL1FHhSkEgR7An+8BllBqTsRHM4bRYosseGFCbYPn8r8FsWuMDtxp0CwTyMQR2PCbJ740DdpbE1KC6jAfZxqcBete7gP0tooJtbvnA6X4vNpG4ukhtUoN9DzNOO0eqMU0Rgyy5HjERdYEWkwTNB30i9I+nHFOSj4MGLBSxNlnuo3keeomCRgtimCx+L/K3HNo0QHTG1J7RzLVAchfQT0lu3pUJ8kB+UM6/6NG+fVyysJyRZ9gadsr4gvHHckw8oUBp2tHvqBEkEdY+rt1Mf5jppt7JUV7HAPLB/qR5jhALY2FX/8MN+lPLmb/nLQQichVQIDAQAB\n-----END PUBLIC KEY-----"
 
 # Recaptcha
 NEXT_PUBLIC_RECAPTCHA_SITE_KEY=
 
+
+NEXT_PUBLIC_RUNTIME_CONFIG_URL=http://localhost:3000/api/config

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18.2.0-alpine
+FROM node:18.17-alpine3.17
 
 ENV APP_UID=9999
 ENV APP_GID=9999 
@@ -12,7 +12,7 @@ WORKDIR /appDir
 
 COPY . .
 RUN npm ci
-RUN npx next build
+RUN npm run build
 
 EXPOSE 3000
-CMD ["npx", "next", "start", "--", "-p", "3000"]
+CMD ["npm", "run", "start", "--", "-p", "3000"]

README.md

@@ -20,6 +20,13 @@ This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-opti
 
 ## Env vars
 
+Hosting environments that use runtime variables need to be able to send public client env vars to the client.
+To do this we create an api route which provides a config `/src/app/api/config/config.ts`
+This creates a config object based on a priority of `server process vals` , then `client build time vals` and finally a hardcoded default.
+
+In our UI we provide values via a context provider `AppConfigProvider`. This means that accessing app config variables needs to be done in a "react way" - using context and hooks correctly. Importing from a regular function in a module does not work.
+
+Build time variables are inlined and "frozen" at build time. They are explained here:
 https://nextjs.org/docs/pages/building-your-application/configuring/environment-variables
 
 ## Local dev

package.json

@@ -1,10 +1,10 @@
 {
   "name": "rdpc-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "NEXT_IS_BUILDING=true next build",
     "start": "next start",
     "lint": "next lint",
     "prepare": "husky install",
@@ -17,7 +17,7 @@
     "@types/url-join": "^4.0.1",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
-    "next": "^13.4.4",
+    "next": "^13.4.12",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-google-recaptcha": "^3.1.0",

src/app/App.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright (c) 2023 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ *  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+// all our context providers won't work server side, beacuse React.Context is client side
+'use client';
+
+import { AuthProvider } from '@/global/utils/auth';
+import { css } from '@/lib/emotion';
+import { ReactNode } from 'react';
+import { QueryClient, QueryClientProvider } from 'react-query';
+import { AppConfigProvider } from './components/ConfigProvider';
+import Footer from './components/Footer';
+import Header from './components/Header';
+import ThemeProvider from './components/ThemeProvider';
+
+const queryClient = new QueryClient();
+
+const App = ({ children, config }: { children: ReactNode; config: any }) => (
+	<ThemeProvider>
+		<QueryClientProvider client={queryClient}>
+			<AppConfigProvider config={config}>
+				<AuthProvider>
+					<div
+						css={css`
+							display: grid;
+							grid-template-rows: 58px 1fr 59px; /* header + content + footer*/
+							min-height: 100vh;
+						`}
+					>
+						<Header />
+						{children}
+						<Footer />
+					</div>
+				</AuthProvider>
+			</AppConfigProvider>
+		</QueryClientProvider>
+	</ThemeProvider>
+);
+
+export default App;