Front: Fix Web Build + Improve CI (#302)

Co-authored-by: Clément Le Bihan <clement.lebihan773@gmail.com>

.github/workflows/CI.yml

@@ -27,6 +27,25 @@ jobs:
 
 ## Build App ##
 
+  Check_Front:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./front
+    environment: Staging
+    steps:
+      - uses: actions/checkout@v3
+      - name: Install Yarn
+        run: npm install -g yarn
+      - name: Install dependencies
+        run: yarn install
+      - name: Type Check
+        run: yarn tsc
+      - name: Check Prettier
+        run: yarn pretty:check .
+      - name: Run Linter
+        run: yarn lint
+
   Build_Front:
     runs-on: ubuntu-latest
     defaults:
@@ -43,19 +62,21 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
-      - name: Type Check
-        run: yarn tsc
-      - name: Check Prettier
-        run: yarn pretty:check .
-      - name: Run Linter
-        run: yarn lint
-
       - name: 🏗 Setup Expo
         uses: expo/expo-github-action@v7
         with:
           expo-version: latest
           eas-version: 3.3.1
           token: ${{ secrets.EXPO_TOKEN }}
+      - name: Build Web App
+        uses: docker/build-push-action@v3
+        with:
+          context: ./front
+          push: false
+          tags: ${{steps.meta_front.outputs.tags}}
+          build-args: |
+            API_URL=${{secrets.API_URL}}
+            SCORO_URL=${{secrets.SCORO_URL}}
 
       - name: Build Android APK
         run: |

front/Dockerfile

@@ -9,6 +9,7 @@ RUN yarn global add expo-cli
 RUN yarn global add sharp-cli
 
 COPY package.json yarn.lock ./
+RUN yarn install --immutable
 RUN expo install
 
 COPY . .
@@ -17,7 +18,7 @@ ENV EXPO_PUBLIC_API_URL=$API_URL
 ARG SCORO_URL
 ENV EXPO_PUBLIC_API_URL=$SCORO_URL
 
-RUN yarn tsc && expo build:web
+RUN yarn tsc && npx expo export:web
 
 # Serve the app
 FROM nginx:1.21-alpine

front/components/UI/ScaffoldAuth.tsx

@@ -7,7 +7,7 @@ import { translate } from '../../i18n/i18n';
 import API from '../../API';
 import SeparatorBase from './SeparatorBase';
 import LinkBase from './LinkBase';
-import ImageBanner from '../../assets/banner.jpg';
+import { useAssets } from 'expo-asset';
 
 interface ScaffoldAuthProps {
 	title: string;
@@ -25,6 +25,8 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 	link,
 }) => {
 	const layout = useWindowDimensions();
+	// eslint-disable-next-line @typescript-eslint/no-var-requires
+	const [banner] = useAssets(require('../../assets/banner.jpg'));
 
 	return (
 		<Flex
@@ -83,7 +85,7 @@ const ScaffoldAuth: FunctionComponent<ScaffoldAuthProps> = ({
 			{layout.width > 650 ? (
 				<View style={{ width: '50%', height: '100%', padding: 16 }}>
 					<Image
-						source={ImageBanner}
+						source={{ uri: banner?.at(0)?.uri }}
 						alt="banner page"
 						style={{ width: '100%', height: '100%', borderRadius: 8 }}
 					/>

front/types/index.d.ts

@@ -1,2 +0,0 @@
-declare module '*.jpg';
-declare module '*.png';