fix: switch default port to 3030 and fixes for API env vars

.deploy/k8s/k8s-manifest.dev.yaml

@@ -19,7 +19,7 @@ spec:
         - name: http
           protocol: TCP
           port: 443
-          targetPort: 3000
+          targetPort: 3030
 
 ---
 kind: Deployment
@@ -106,5 +106,5 @@ spec:
                         value: '$NEXT_PUBLIC_CAPTCHA_SITE_KEY'
 
                   ports:
-                      - containerPort: 3000
+                      - containerPort: 3030
                         protocol: TCP

.deploy/k8s/k8s-manifest.prod.yaml

@@ -19,7 +19,7 @@ spec:
         - name: http
           protocol: TCP
           port: 443
-          targetPort: 3000
+          targetPort: 3030
 
 ---
 kind: Deployment
@@ -106,5 +106,5 @@ spec:
                         value: '$NEXT_PUBLIC_CAPTCHA_SITE_KEY'
 
                   ports:
-                      - containerPort: 3000
+                      - containerPort: 3030
                         protocol: TCP

.render/render.dev.yaml

@@ -14,7 +14,7 @@ services:
           - key: NEXT_PUBLIC_GAUZY_API_SERVER_URL
             value: https://apidev.ever.team
           - key: GAUZY_API_SERVER_URL
-            value: https://apidev.ever.team/api
+            value: https://apidev.ever.team
           - key: NEXT_PUBLIC_GA_MEASUREMENT_ID
             sync: false
           - key: NEXT_PUBLIC_CAPTCHA_SITE_KEY

Dockerfile

@@ -104,8 +104,8 @@ COPY --from=build /app/apps/web/.next/static ./apps/web/.next/static
 COPY --from=build /app/apps/web/public ./apps/web/public
 
 # Start the server by default, this can be overwritten at runtime
-EXPOSE 3000
+EXPOSE 3030
 
-ENV PORT=3000
+ENV PORT=3030
 
 CMD [ "node", "./apps/web/server.js" ]

Layerfile

@@ -2,18 +2,18 @@ FROM vm/ubuntu:18.04
 
 # install the latest version of Docker, as in the official Docker installation tutorial.
 RUN apt-get update && \
-    apt-get install ca-certificates curl gnupg lsb-release && \
-    sudo mkdir -p /etc/apt/keyrings && \
-    curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg && \
-    echo \
-    "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" |\
-    sudo tee /etc/apt/sources.list.d/docker.list > /dev/null && \
-    apt-get update && \
-    apt-get install docker-ce docker-ce-cli containerd.io
+	apt-get install ca-certificates curl gnupg lsb-release && \
+	sudo mkdir -p /etc/apt/keyrings && \
+	curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg && \
+	echo \
+	"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" |\
+	sudo tee /etc/apt/sources.list.d/docker.list > /dev/null && \
+	apt-get update && \
+	apt-get install docker-ce docker-ce-cli containerd.io
 
 RUN REPEATABLE docker pull everco/ever-teams-webapp
 
 RUN REPEATABLE (docker rm ever-teams --force || true) &&\
-    docker run --name ever-teams -d -p 3000:3000 everco/ever-teams-webapp  && sleep 5
+	docker run --name ever-teams -d -p 3030:3030 everco/ever-teams-webapp  && sleep 5
 
-EXPOSE WEBSITE localhost:3000
+EXPOSE WEBSITE localhost:3030

Layerfile.build

@@ -18,6 +18,6 @@ COPY . .
 RUN REPEATABLE docker build -t ever-teams .
 
 RUN REPEATABLE (docker rm ever-teams --force || true) &&\
-    docker run --name ever-teams -d -p 3000:3000 ever-teams && sleep 5
+    docker run --name ever-teams -d -p 3030:3030 ever-teams && sleep 5
 
-EXPOSE WEBSITE localhost:3000
+EXPOSE WEBSITE localhost:3030

Layerfile.node

@@ -19,4 +19,4 @@ RUN REPEATABLE cd apps/web && yarn install && yarn build
 
 RUN BACKGROUND yarn start:web
 
-EXPOSE WEBSITE localhost:3000
+EXPOSE WEBSITE localhost:3030

README.md

@@ -91,25 +91,25 @@ Please refer to our official [Platform Documentation](https://docs.ever.team) (W
 
 <https://app.ever.team>
 
-### Quick Start with our live APIs
+### Quick Start with our public live APIs
 
 1. Clone this repo
 2. Run `yarn install`
-3. Run `yarn build:web`
-4. Run `yarn start:web`
+3. Run `yarn build:web && yarn start:web` OR `yarn start:web:dev`
+4. Open in <http://localhost:3030> in your Browser
 
 Notes:
 
--   by default, Ever Teams web frontend will be connected to our production [Ever Gauzy API](https://github.com/ever-co/ever-gauzy) API endpoint <https://api.ever.team/api>. You can change it in environment variables `GAUZY_API_SERVER_URL` and `NEXT_PUBLIC_GAUZY_API_SERVER_URL`, see below how to run with a Self-hosted Backend.
+-   by default, Ever Teams web frontend will be connected to our production [Ever Gauzy API](https://github.com/ever-co/ever-gauzy) API endpoint <https://api.ever.team>. You can change it in environment variables `GAUZY_API_SERVER_URL` and `NEXT_PUBLIC_GAUZY_API_SERVER_URL`, see below how to run with a Self-hosted Backend.
 
 ### Run with a Self-hosted Backend
 
 1. Download and run the Ever Gauzy Server setup (<https://gauzy.co/downloads>) or run the server manually (see <https://github.com/ever-co/ever-gauzy/tree/develop/apps/server>). You can also run only Ever Gauzy APIs (manually), see <https://github.com/ever-co/ever-gauzy/tree/develop/apps/api>. For getting starting instructions, it's best to check the Ever Gauzy [README](https://github.com/ever-co/ever-gauzy/blob/develop/README.md) file.
 2. Clone this repo
-3. After you get the API or Server running, make sure you set the environment variables `GAUZY_API_SERVER_URL` and `NEXT_PUBLIC_GAUZY_API_SERVER_URL` in Ever Teams .env file (see <https://github.com/ever-co/ever-teams/blob/develop/web/.env.sample> for example).
+3. After you get the API or Server running, make sure you set the environment variables `GAUZY_API_SERVER_URL` and `NEXT_PUBLIC_GAUZY_API_SERVER_URL` in Ever Teams .env file (see <https://github.com/ever-co/ever-teams/blob/develop/web/.env.sample>). For example, you can set those env vars to <http://localhost:3000> if Gauzy API running on that host & port.
 4. Run `yarn install`
-5. Run `yarn build:web`
-6. Run `yarn start:web`
+5. Run `yarn build:web && yarn start:web` OR `yarn start:web:dev`
+6. Open in <http://localhost:3030> in your Browser
 
 #### Notes
 
@@ -159,7 +159,7 @@ WIP
 
 ### Koyeb
 
-[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=ever-teams&type=docker&builder=dockerfile&image=ghcr.io/ever-co/ever-teams-webapp:latest&env[PORT]=3000&ports=3000;http;/)
+[![Deploy to Koyeb](https://www.koyeb.com/static/images/deploy/button.svg)](https://app.koyeb.com/deploy?name=ever-teams&type=docker&builder=dockerfile&image=ghcr.io/ever-co/ever-teams-webapp:latest&env[PORT]=3030&ports=3030;http;/)
 
 ### Northflank
 

apps/web/.env

@@ -1,7 +1,7 @@
 RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false
 
-GAUZY_API_SERVER_URL=https://api.ever.team/api
-NEXT_PUBLIC_GAUZY_API_SERVER_URL=https://api.ever.team
+GAUZY_API_SERVER_URL=https://api.ever.team # http://localhost:3000
+NEXT_PUBLIC_GAUZY_API_SERVER_URL=https://api.ever.team # http://localhost:3000
 NEXT_PUBLIC_GA_MEASUREMENT_ID=
 
 # CAPTCHA Settings

apps/web/README.md

@@ -10,20 +10,20 @@ npm run dev
 yarn dev
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Open [http://localhost:3030](http://localhost:3030) with your browser to see the result.
 
 You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
 
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3030/api/hello](http://localhost:3030/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
 
 The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
 
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+-   [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+-   [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 

apps/web/app/constants.ts

@@ -37,7 +37,9 @@ export const RECAPTCHA_SITE_KEY = getNextPublicEnv(
 export const RECAPTCHA_SECRET_KEY = process.env.CAPTCHA_SECRET_KEY;
 
 // Gauzy Server URL
-export const GAUZY_API_SERVER_URL = process.env.GAUZY_API_SERVER_URL || 'https://api.ever.team/api';
+export const GAUZY_API_SERVER_URL = process.env.GAUZY_API_SERVER_URL
+	? process.env.GAUZY_API_SERVER_URL.replace('/api', '') + '/api'
+	: 'https://api.ever.team' + '/api';
 
 export const GAUZY_API_BASE_SERVER_URL = getNextPublicEnv(
 	'NEXT_PUBLIC_GAUZY_API_SERVER_URL',

apps/web/app/services/server/fetch.ts

@@ -33,7 +33,7 @@ export function serverFetch<T>({
 		datas['body'] = JSON.stringify(body);
 	}
 
-	return fetch((GAUZY_API_SERVER_URL || '') + path, {
+	return fetch(GAUZY_API_SERVER_URL + path, {
 		...datas,
 		...(init || {}),
 		headers: {

apps/web/env.js

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+require('dotenv').config();
+
+const port = process.env.PORT || 3030;
+
+console.log(`NextJs is starting on Port 3030. You can open https://localhost:${port} to view it in the browser.`);
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const isSentryEnabled = isProduction && process.env.SENTRY_DSN;
+
+console.log(`isProduction: ${isProduction}`);
+
+console.log(`isSentryEnabled: ${isSentryEnabled}`);
+
+if (process.env.GAUZY_API_SERVER_URL) {
+	console.log(
+		`Using Gauzy API from NextJs backend defined by GAUZY_API_SERVER_URL: ${process.env.GAUZY_API_SERVER_URL}`
+	);
+} else {
+	console.warn(`GAUZY_API_SERVER_URL not defined`);
+}
+
+if (process.env.NEXT_PUBLIC_GAUZY_API_SERVER_URL) {
+	console.log(
+		`Using Gauzy API directly from frontend defined by NEXT_PUBLIC_GAUZY_API_SERVER_URL: ${process.env.NEXT_PUBLIC_GAUZY_API_SERVER_URL}`
+	);
+} else {
+	console.warn(`Using Gauzy API via backend API 'proxy' because env NEXT_PUBLIC_GAUZY_API_SERVER_URL not defined`);
+}

apps/web/next.config.js

@@ -2,10 +2,10 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path');
 const withNextIntl = require('next-intl/plugin')();
-
-console.log(`NEXT_PUBLIC_GAUZY_API_SERVER_URL: ${process.env.NEXT_PUBLIC_GAUZY_API_SERVER_URL}`);
+const { withSentryConfig } = require('@sentry/nextjs');
 
 const isProduction = process.env.NODE_ENV === 'production';
+
 const isSentryEnabled = isProduction && process.env.SENTRY_DSN;
 
 const sentryConfig = isSentryEnabled && {
@@ -62,25 +62,23 @@ const nextConfig = {
 };
 
 // Injected content via Sentry wizard below
-// const { withSentryConfig } = require('@sentry/nextjs');
-
-// const sentryWebpackPluginOptions = {
-// 	org: process.env.SENTRY_ORG || 'ever-co',
-// 	project: process.env.SENTRY_PROJECT || 'ever-teams-web',
+const sentryWebpackPluginOptions = {
+	org: process.env.SENTRY_ORG || 'ever-co',
+	project: process.env.SENTRY_PROJECT || 'ever-teams-web',
 
-// 	// An auth token is required for uploading source maps.
-// 	authToken: process.env.SENTRY_AUTH_TOKEN,
+	// An auth token is required for uploading source maps.
+	authToken: process.env.SENTRY_AUTH_TOKEN,
 
-// 	silent: true, // Suppresses all logs
+	silent: true, // Suppresses all logs
 
-// 	dryRun: process.env.NODE_ENV !== 'production'
+	dryRun: process.env.NODE_ENV !== 'production'
 
-// 	// Additional config options for the Sentry Webpack plugin.
-// 	// Keep in mind that https://github.com/getsentry/sentry-webpack-plugin#options.
-// };
+	// Additional config options for the Sentry Webpack plugin.
+	// Keep in mind that https://github.com/getsentry/sentry-webpack-plugin#options.
+};
 
 // Make sure adding Sentry options is the last code to run before exporting
-// module.exports = process.env.NODE_ENV === "production" && process.env.SENTRY_DSN
-// 	? withSentryConfig(nextConfig, sentryWebpackPluginOptions) : nextConfig
-
-module.exports = withNextIntl(nextConfig);
+module.exports =
+	process.env.NODE_ENV === 'production' && process.env.SENTRY_DSN
+		? withSentryConfig(withNextIntl(nextConfig), sentryWebpackPluginOptions)
+		: withNextIntl(nextConfig);

apps/web/package.json

@@ -9,9 +9,9 @@
 	},
 	"private": true,
 	"scripts": {
-		"dev": "yarn next dev",
+		"dev": "yarn node env.js && yarn next dev -p 3030",
 		"build": "yarn next build",
-		"start": "yarn next start",
+		"start": "yarn node env.js && yarn next start -p 3030",
 		"lint": "yarn next lint"
 	},
 	"dependencies": {
@@ -112,6 +112,7 @@
 		"@types/react-google-recaptcha": "^2.1.5",
 		"eslint": "^8.28.0",
 		"eslint-config-next": "^14.0.4",
+		"dotenv": "^16.4.1",
 		"typescript": "^4.9.4"
 	},
 	"prettier": {

apps/web/project.json

@@ -21,7 +21,7 @@
 			"options": {
 				"buildTarget": "web:build",
 				"dev": true,
-				"port": 3000,
+				"port": 3030,
 				"hostname": "localhost"
 			},
 			"configurations": {

fly.toml

@@ -12,7 +12,7 @@ kill_timeout = "5m0s"
   image = "ghcr.io/ever-co/ever-teams-webapp:latest"
 
 [http_service]
-  internal_port = 3000
+  internal_port = 3030
   force_https = true
   auto_stop_machines = true
   auto_start_machines = true