Add deploy buttons and clean environment variables (#974)

* add render.yaml * Clean environment variables --------- Co-authored-by: Charles Bochet <[email protected]>
twentyhq · Jul 31, 2023 · b028d9f · b028d9f
1 parent a90cbac
commit b028d9f
Show file tree

Hide file tree

Showing 31 changed files with 194 additions and 112 deletions.
diff --git a/.ergomake/docker-compose.yml b/.ergomake/docker-compose.yml
@@ -5,15 +5,11 @@ services:
       context: ..
       dockerfile: ./infra/prod/front/Dockerfile
       args:
-        REACT_APP_API_URL: "http://localhost:3000/graphql"
-        REACT_APP_AUTH_URL: "http://localhost:3000/auth"
-        REACT_APP_FILES_URL: "http://localhost:3000/files"
+        REACT_APP_SERVER_BASE_URL: "http://localhost:3000"
     ports:
       - "3001:3000"
     labels:
-      dev.ergomake.env.replace-arg.REACT_APP_API_URL: "https://{{ services.server.url }}/graphql"
-      dev.ergomake.env.replace-arg.REACT_APP_AUTH_URL: "https://{{ services.server.url }}/auth"
-      dev.ergomake.env.replace-arg.REACT_APP_FILES_URL: "https://{{ services.server.url }}/files"
+      dev.ergomake.env.replace-arg.REACT_APP_SERVER_BASE_URL: "https://{{ services.server.url }}"
   server:
     build:
       context: ..
@@ -23,19 +19,14 @@ services:
       - "3000:3000"
     environment:
       DEBUG_MODE: false
-      DEMO_MODE: true
+      IS_SIGN_IN_PREFILLED: true
       ACCESS_TOKEN_SECRET: "secret_jwt"
-      ACCESS_TOKEN_EXPIRES_IN: "30m"
       LOGIN_TOKEN_SECRET: "secret_login_token"
-      LOGIN_TOKEN_EXPIRES_IN: "15m"
       REFRESH_TOKEN_SECRET: "secret_refresh_token"
-      REFRESH_TOKEN_EXPIRES_IN: "90d"
       PG_DATABASE_URL: "postgres://postgres:postgrespassword@postgres:5432/default?connection_limit=1"
-      FRONT_AUTH_CALLBACK_URL: "http://localhost:3000/verify"
-      STORAGE_TYPE: "local"
-      STORAGE_LOCAL_PATH: ".local-storage"
+      FRONT_BASE_URL: "http://localhost:3000"
     labels:
-      dev.ergomake.env.replace-env.FRONT_AUTH_CALLBACK_URL: "https://{{ services.server.url }}/verify"
+      dev.ergomake.env.replace-env.FRONT_BASE_URL: "https://{{ services.server.url }}"
   postgres:
     build: ../infra/dev/postgres
     environment:

diff --git a/.github/workflows/ci-chromatic.yaml b/.github/workflows/ci-chromatic.yaml
@@ -11,9 +11,7 @@ jobs:
     if: ${{ contains(github.event.*.labels.*.name, 'run-chromatic') }} || github.event_name == 'push' }}
     runs-on: ubuntu-latest
     env:
-      REACT_APP_API_URL: http://127.0.0.1:3000/graphql
-      REACT_APP_AUTH_URL: http://127.0.0.1:3000/auth
-      REACT_APP_FILES_URL: http://127.0.0.1:3000/files
+      REACT_APP_SERVER_BASE_URL: http://127.0.0.1:3000
     steps:
       - uses: actions/checkout@v3
         if: github.event_name == 'push'
@@ -33,9 +31,7 @@ jobs:
         run: |
           cd front
           touch .env
-          echo "REACT_APP_API_URL: $REACT_APP_API_URL" >> .env
-          echo "REACT_APP_AUTH_URL: $REACT_APP_AUTH_URL" >> .env
-          echo "REACT_APP_FILES_URL: $REACT_APP_FILES_URL" >> .env
+          echo "REACT_APP_SERVER_BASE_URL: $REACT_APP_SERVER_BASE_URL" >> .env
       - name: Front / Install Dependencies
         run: cd front && yarn
       - name: Publish to Chromatic

diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml
@@ -8,9 +8,7 @@ jobs:
   front-test:
     runs-on: ubuntu-latest
     env:
-      REACT_APP_API_URL: http://localhost:3000/graphql
-      REACT_APP_AUTH_URL: http://localhost:3000/auth
-      REACT_APP_FILES_URL: http://localhost:3000/files
+      REACT_APP_SERVER_BASE_URL: http://localhost:3000
     steps:
       - uses: actions/checkout@v3
         if: github.event_name == 'push'

diff --git a/docs/docs/developer/local-setup.mdx b/docs/docs/developer/local-setup.mdx
@@ -1,7 +1,7 @@
 ---
 sidebar_position: 0
 sidebar_custom_props:
-  icon: TbArrowBigRight
+  icon: TbDeviceDesktop
 ---
 
 # Local Setup

diff --git a/docs/docs/hosting/self-hosting.mdx b/docs/docs/hosting/self-hosting.mdx
@@ -19,9 +19,7 @@ You will find these in the [infra/prod/front/Dockerfile](https://github.com/twen
 
 ```bash
 docker build \
- --build-arg REACT_APP_API_URL=REPLACE_ME \
- --build-arg REACT_APP_AUTH_URL=REPLACE_ME \
- --build-arg REACT_APP_FILES_URL=REPLACE_ME \
+ --build-arg REACT_APP_SERVER_BASE_URL=REPLACE_ME \
  -t twenty-front:latest \
  -f ./infra/prod/front/Dockerfile .
 ```
@@ -36,10 +34,19 @@ docker build \
   -f ./infra/prod/server/Dockerfile .
 ```
 
+## Render
+
+[![Deploy to Render](https://render.com/images/deploy-to-render-button.svg)](https://render.com/deploy?repo=https://github.com/twentyhq/twenty)
+
+
 ## AWS Elastic Beanstalk (soon)
 
 We are working on providing a joint Docker image - containing both the Twenty frontend and server - that you can deploy using [AWS Elastic Beanstalk](https://aws.amazon.com/elasticbeanstalk/).
 
-## Railway (soon)
 
-[Railway](https://railway.app) is an infrastructure platform that lets you deploy to the cloud in one click. We are currently working on making it available.
+<!--
+
+## Railway 
+[![Deploy on Railway](https://railway.app/button.svg)](https://railway.app/template/YWGqza?referralCode=3CLObs)
+
+-->
diff --git a/docs/docs/others/CLI.mdx b/docs/docs/others/CLI.mdx
@@ -4,6 +4,6 @@ sidebar_custom_props:
   icon: TbTerminal2
 ---
 
-# CLI (soon)
+# CLI
 
 Available soon!
diff --git a/docs/src/theme/DocSidebarItem/Link/index.js b/docs/src/theme/DocSidebarItem/Link/index.js
@@ -6,7 +6,7 @@ import Link from '@docusaurus/Link';
 import isInternalUrl from '@docusaurus/isInternalUrl';
 import IconExternalLink from '@theme/Icon/ExternalLink';
 import styles from './styles.module.css';
-import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug, TbVocabulary, TbArrowBigRight } from "react-icons/tb";
+import { TbFaceIdError, TbTerminal2, TbCloud, TbServer, TbBolt, TbApps, TbTopologyStar, TbChartDots, TbBug, TbVocabulary, TbArrowBigRight, TbDeviceDesktop } from "react-icons/tb";
 
 
 export default function DocSidebarItemLink({
@@ -30,7 +30,8 @@ export default function DocSidebarItemLink({
     'TbTopologyStar': TbTopologyStar,
     'TbChartDots': TbChartDots,
     'TbBug': TbBug,
-    'TbVocabulary': TbVocabulary
+    'TbVocabulary': TbVocabulary,
+    'TbDeviceDesktop': TbDeviceDesktop,
   };
 
   let IconComponent = customProps && customProps.icon ? icons[customProps.icon] : TbFaceIdError;

diff --git a/front/.env.example b/front/.env.example
@@ -1,5 +1,6 @@
-REACT_APP_API_URL=http://localhost:3000/graphql
-REACT_APP_AUTH_URL=http://localhost:3000/auth
-REACT_APP_FILES_URL=http://localhost:3000/files
+REACT_APP_SERVER_BASE_URL=http://localhost:3000
 
-CHROMATIC_PROJECT_TOKEN=REPLACE_ME
+# ———————— Optional ————————
+# REACT_APP_SERVER_AUTH_URL=http://localhost:3000/auth
+# REACT_APP_SERVER_FILES_URL=http://localhost:3000/files
+# CHROMATIC_PROJECT_TOKEN=
diff --git a/front/codegen.js b/front/codegen.js
@@ -1,5 +1,5 @@
 module.exports = {
-  schema: process.env.REACT_APP_API_URL,
+  schema: process.env.REACT_APP_SERVER_BASE_URL + "/graphql",
   documents: ['./src/**/*.tsx', './src/**/*.ts'],
   overwrite: true,
   generates: {

diff --git a/front/src/generated/graphql.tsx b/front/src/generated/graphql.tsx
@@ -547,7 +547,7 @@ export type ClientConfig = {
   __typename?: 'ClientConfig';
   authProviders: AuthProviders;
   debugMode: Scalars['Boolean'];
-  demoMode: Scalars['Boolean'];
+  signInPrefilled: Scalars['Boolean'];
   telemetry: Telemetry;
 };
 
@@ -2333,7 +2333,7 @@ export type RenewTokenMutation = { __typename?: 'Mutation', renewToken: { __type
 export type GetClientConfigQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', demoMode: boolean, debugMode: boolean, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean }, telemetry: { __typename?: 'Telemetry', enabled: boolean, anonymizationEnabled: boolean } } };
+export type GetClientConfigQuery = { __typename?: 'Query', clientConfig: { __typename?: 'ClientConfig', signInPrefilled: boolean, debugMode: boolean, authProviders: { __typename?: 'AuthProviders', google: boolean, password: boolean }, telemetry: { __typename?: 'Telemetry', enabled: boolean, anonymizationEnabled: boolean } } };
 
 export type GetCompaniesQueryVariables = Exact<{
   orderBy?: InputMaybe<Array<CompanyOrderByWithRelationInput> | CompanyOrderByWithRelationInput>;
@@ -3369,7 +3369,7 @@ export const GetClientConfigDocument = gql`
       google
       password
     }
-    demoMode
+    signInPrefilled
     debugMode
     telemetry {
       enabled

diff --git a/front/src/modules/apollo/hooks/useApolloFactory.ts b/front/src/modules/apollo/hooks/useApolloFactory.ts
@@ -22,7 +22,7 @@ export function useApolloFactory() {
 
   const apolloClient = useMemo(() => {
     apolloRef.current = new ApolloFactory({
-      uri: `${process.env.REACT_APP_API_URL}`,
+      uri: `${process.env.REACT_APP_SERVER_BASE_URL}/graphql`,
       cache: new InMemoryCache({
         typePolicies: {
           Activity: {

diff --git a/front/src/modules/auth/hooks/useAuth.ts b/front/src/modules/auth/hooks/useAuth.ts
@@ -118,8 +118,11 @@ export function useAuth() {
   );
 
   const handleGoogleLogin = useCallback((workspaceInviteHash?: string) => {
+    const authServerUrl =
+      process.env.REACT_APP_SERVER_AUTH_URL ??
+      process.env.REACT_APP_SERVER_BASE_URL + '/auth';
     window.location.href =
-      `${process.env.REACT_APP_AUTH_URL}/google/${
+      `${authServerUrl}/google/${
         workspaceInviteHash ? '?inviteHash=' + workspaceInviteHash : ''
       }` || '';
   }, []);

diff --git a/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx b/front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx
@@ -6,7 +6,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import * as Yup from 'yup';
 
 import { authProvidersState } from '@/client-config/states/authProvidersState';
-import { isDemoModeState } from '@/client-config/states/isDemoModeState';
+import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { AppPath } from '@/types/AppPath';
 import { PageHotkeyScope } from '@/types/PageHotkeyScope';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
@@ -45,7 +45,7 @@ export function useSignInUp() {
   const { enqueueSnackBar } = useSnackBar();
   const isMatchingLocation = useIsMatchingLocation();
   const [authProviders] = useRecoilState(authProvidersState);
-  const isDemoMode = useRecoilValue(isDemoModeState);
+  const isSignInPrefilled = useRecoilValue(isSignInPrefilledState);
   const workspaceInviteHash = useParams().workspaceInviteHash;
   const [signInUpStep, setSignInUpStep] = useState<SignInUpStep>(
     SignInUpStep.Init,
@@ -61,8 +61,8 @@ export function useSignInUp() {
     mode: 'onChange',
     defaultValues: {
       exist: false,
-      email: isDemoMode ? '[email protected]' : '',
-      password: isDemoMode ? 'Applecar2025' : '',
+      email: isSignInPrefilled ? '[email protected]' : '',
+      password: isSignInPrefilled ? 'Applecar2025' : '',
     },
     resolver: yupResolver(validationSchema),
   });

diff --git a/front/src/modules/client-config/components/ClientConfigProvider.tsx b/front/src/modules/client-config/components/ClientConfigProvider.tsx
@@ -3,7 +3,7 @@ import { useRecoilState } from 'recoil';
 
 import { authProvidersState } from '@/client-config/states/authProvidersState';
 import { isDebugModeState } from '@/client-config/states/isDebugModeState';
-import { isDemoModeState } from '@/client-config/states/isDemoModeState';
+import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState';
 import { telemetryState } from '@/client-config/states/telemetryState';
 import { useGetClientConfigQuery } from '~/generated/graphql';
 
@@ -12,7 +12,7 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
 }) => {
   const [, setAuthProviders] = useRecoilState(authProvidersState);
   const [, setDebugMode] = useRecoilState(isDebugModeState);
-  const [, setDemoMode] = useRecoilState(isDemoModeState);
+  const [, setSignInPrefilled] = useRecoilState(isSignInPrefilledState);
   const [, setTelemetry] = useRecoilState(telemetryState);
   const [isLoading, setIsLoading] = useState(true);
 
@@ -29,14 +29,14 @@ export const ClientConfigProvider: React.FC<React.PropsWithChildren> = ({
         magicLink: false,
       });
       setDebugMode(data?.clientConfig.debugMode);
-      setDemoMode(data?.clientConfig.demoMode);
+      setSignInPrefilled(data?.clientConfig.signInPrefilled);
       setTelemetry(data?.clientConfig.telemetry);
     }
   }, [
     data,
     setAuthProviders,
     setDebugMode,
-    setDemoMode,
+    setSignInPrefilled,
     setTelemetry,
     setIsLoading,
     loading,

diff --git a/front/src/modules/client-config/queries/index.tsx b/front/src/modules/client-config/queries/index.tsx
@@ -7,7 +7,7 @@ export const GET_CLIENT_CONFIG = gql`
         google
         password
       }
-      demoMode
+      signInPrefilled
       debugMode
       telemetry {
         enabled

diff --git a/front/src/modules/client-config/states/isDemoModeState.ts b/front/src/modules/client-config/states/isDemoModeState.ts
diff --git a/front/src/modules/client-config/states/isSignInPrefilledState.ts b/front/src/modules/client-config/states/isSignInPrefilledState.ts
@@ -0,0 +1,6 @@
+import { atom } from 'recoil';
+
+export const isSignInPrefilledState = atom<boolean>({
+  key: 'isSignInPrefilledState',
+  default: false,
+});
diff --git a/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts b/front/src/modules/users/utils/getProfilePictureAbsoluteURI.ts
@@ -11,5 +11,9 @@ export function getImageAbsoluteURIOrBase64(imageUrl?: string | null) {
     return imageUrl;
   }
 
-  return `${process.env.REACT_APP_FILES_URL}/${imageUrl}`;
+  const serverFilesUrl =
+    process.env.REACT_APP_SERVER_FILES_URL ??
+    process.env.REACT_APP_SERVER_BASE_URL + '/files';
+
+  return `${serverFilesUrl}/${imageUrl}`;
 }
diff --git a/front/src/testing/graphqlMocks.ts b/front/src/testing/graphqlMocks.ts
@@ -198,7 +198,7 @@ export const graphqlMocks = [
     return res(
       ctx.data({
         clientConfig: {
-          demoMode: true,
+          signInPrefilled: true,
           debugMode: false,
           authProviders: { google: true, password: true, magicLink: false },
           telemetry: { enabled: false, anonymizationEnabled: true },

diff --git a/front/src/testing/mockedClient.ts b/front/src/testing/mockedClient.ts
@@ -1,6 +1,6 @@
 import { ApolloClient, InMemoryCache } from '@apollo/client';
 
 export const mockedClient = new ApolloClient({
-  uri: process.env.REACT_APP_API_URL,
+  uri: process.env.REACT_APP_SERVER_BASE_URL + '/graphql',
   cache: new InMemoryCache(),
 });
diff --git a/infra/prod/front/Dockerfile b/infra/prod/front/Dockerfile
@@ -1,8 +1,9 @@
 FROM node:18.16.0-alpine as build
 
-ARG REACT_APP_API_URL
-ARG REACT_APP_AUTH_URL
-ARG REACT_APP_FILES_URL
+
+ARG REACT_APP_SERVER_BASE_URL
+ARG REACT_APP_SERVER_AUTH_URL
+ARG REACT_APP_SERVER_FILES_URL
 
 COPY ./packages/ /app/packages
 

diff --git a/render.yaml b/render.yaml
@@ -0,0 +1,42 @@
+services:
+- type: web
+  name: front
+  env: docker
+  dockerfilePath: ./infra/prod/front/Dockerfile
+  autoDeploy: false
+  envVars:
+  - key: REACT_APP_SERVER_BASE_URL
+    fromService:
+      name: server
+      type: web
+      envVarKey: RENDER_EXTERNAL_URL
+- type: web
+  name: server
+  env: docker
+  dockerfilePath: ./infra/prod/server/Dockerfile
+  dockerCommand: "sh -c yarn prisma:migrate && node dist/src/main"
+  autoDeploy: false
+  envVars:
+  - key: ACCESS_TOKEN_SECRET
+    generateValue: true
+  - key: LOGIN_TOKEN_SECRET
+    generateValue: true
+  - key: REFRESH_TOKEN_SECRET
+    generateValue: true
+  - key: PG_DATABASE_URL
+    fromDatabase:
+      name: twenty-db
+      property: connectionString
+  - key: FRONT_BASE_URL
+    fromService:
+      name: front
+      type: web
+      envVarKey: RENDER_EXTERNAL_URL
+  disk:
+    name: twenty-disk
+    mountPath: /.local-storage
+    sizeGB: 5
+
+databases:
+- name: twenty-db
+  plan: starter