admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: inject enviroment at the ./front deployment phase (#2174) (#2179)

Browse Source 
* chore: inject enviroment at the deployment phase (#2174)

* Dockerfile CMD env.sh
* env.sh generates env-config.js file
* index.html imports env-config.js
* front/src/config/index.ts imports REACT_APP_SERVER_BASE_URL

* Upgrade Dockerfiles

* Add compute pg_database_url for render

* fix tests

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Ruslan
2023-10-22 17:36:36 +07:00
committed by GitHub
parent 1954ed5e3a
commit a5fe256d7e
15 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/package.json
View File

@ -66,7 +66,8 @@
},
"scripts": {
"start": "PORT=3001 craco start --max-warnings=0",
"build": "craco build",
"build:inject-runtime-env": "./scripts/inject-runtime-env.sh",
"build": "craco build && yarn build:inject-runtime-env",
"test": "craco test",
"coverage": "craco test --coverage .",
"lint": "eslint src --max-warnings=0",

3
front/public/env-config.js Normal file
View File

@ -0,0 +1,3 @@
window._env_ = {
// This file should stay empty. It will be overwritten by the build process.
}

1
front/public/index.html
View File

@ -36,6 +36,7 @@
/>
<title>Twenty</title>
<script src="%PUBLIC_URL%/env-config.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

11
front/scripts/inject-runtime-env.sh Executable file
View File

@ -0,0 +1,11 @@
echo "Generating env-config.js file from runtime environment variables..."
BASE_FILENAME="build/env-config.js"
mkdir -p build
rm -rf "./$BASE_FILENAME"
{
echo "window._env_ = {"
echo " REACT_APP_SERVER_BASE_URL: \"$REACT_APP_SERVER_BASE_URL\","
echo "}"
} > "./$BASE_FILENAME"

10
front/src/config/index.ts Normal file
View File

@ -0,0 +1,10 @@
declare global {
interface Window {
_env_?: Record<string, string>;
}
}
export const REACT_APP_SERVER_BASE_URL =
window._env_?.REACT_APP_SERVER_BASE_URL ||
process.env.REACT_APP_SERVER_BASE_URL ||
'http://localhost:3000';

3
front/src/modules/apollo/hooks/useApolloFactory.ts
View File

@ -6,6 +6,7 @@ import { useRecoilState } from 'recoil';
import { tokenPairState } from '@/auth/states/tokenPairState';
import { isDebugModeState } from '@/client-config/states/isDebugModeState';
import { AppPath } from '@/types/AppPath';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { ActivityTarget } from '~/generated/graphql';
import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
import { useUpdateEffect } from '~/hooks/useUpdateEffect';
@ -23,7 +24,7 @@ export const useApolloFactory = () => {
const apolloClient = useMemo(() => {
apolloRef.current = new ApolloFactory({
uri: `${process.env.REACT_APP_SERVER_BASE_URL}/graphql`,
uri: `${REACT_APP_SERVER_BASE_URL}/graphql`,
cache: new InMemoryCache({
typePolicies: {
Activity: {

4
front/src/modules/auth/hooks/useAuth.ts
View File

@ -6,6 +6,7 @@ import {
useRecoilState,
} from 'recoil';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import {
useChallengeMutation,
useCheckUserExistsLazyQuery,
@ -136,8 +137,7 @@ export const useAuth = () => {
const handleGoogleLogin = useCallback((workspaceInviteHash?: string) => {
const authServerUrl =
process.env.REACT_APP_SERVER_AUTH_URL ??
process.env.REACT_APP_SERVER_BASE_URL + '/auth';
REACT_APP_SERVER_BASE_URL ?? REACT_APP_SERVER_BASE_URL + '/auth';
window.location.href =
`${authServerUrl}/google/${
workspaceInviteHash ? '?inviteHash=' + workspaceInviteHash : ''

3
front/src/modules/metadata/components/ApolloMetadataClientProvider.tsx
View File

@ -4,6 +4,7 @@ import { ApolloClient, InMemoryCache } from '@apollo/client';
import { useRecoilState } from 'recoil';
import { tokenPairState } from '@/auth/states/tokenPairState';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
import { ApolloMetadataClientContext } from '../context/ApolloClientMetadataContext';
@ -17,7 +18,7 @@ export const ApolloMetadataClientProvider = ({
const apolloMetadataClient = useMemo(() => {
if (tokenPair?.accessToken.token) {
return new ApolloClient({
uri: `${process.env.REACT_APP_SERVER_BASE_URL}/metadata`,
uri: `${REACT_APP_SERVER_BASE_URL}/metadata`,
cache: new InMemoryCache(),
headers: {
Authorization: `Bearer ${tokenPair.accessToken.token}`,

5
front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts
View File

@ -1,3 +1,5 @@
import { REACT_APP_SERVER_BASE_URL } from '~/config';
export const getImageAbsoluteURIOrBase64 = (imageUrl?: string | null) => {
if (!imageUrl) {
return null;
@ -12,8 +14,7 @@ export const getImageAbsoluteURIOrBase64 = (imageUrl?: string | null) => {
}
const serverFilesUrl =
process.env.REACT_APP_SERVER_FILES_URL ??
process.env.REACT_APP_SERVER_BASE_URL + '/files';
REACT_APP_SERVER_BASE_URL ?? REACT_APP_SERVER_BASE_URL + '/files';
return `${serverFilesUrl}/${imageUrl}`;
};