[#5] Config deploy-preview and deploy workflow to deploy app to produ…

…ction

.github/workflows/deploy.yml

@@ -0,0 +1,45 @@
+name: Deploy to Netlify
+
+on:
+  push:
+    branches: ['main']
+  workflow_dispatch:
+    inputs:
+      deploy-msg:
+        description: 'Deploy to Production'
+        required: true
+
+jobs:
+  deploy:
+    name: Build and Deploy to Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout repository
+        uses: actions/[email protected]
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Decode .env file
+        run: echo "${{ secrets.ENV_FILE_CONTENT }}" | base64 -d > .env
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './build'
+          deploy-message: 'Deploy from GitHub Actions: ${{ github.event.inputs.deploy-msg }}'
+          production-deploy: true
+          github-token: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
+          enable-commit-comment: false
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 1

.github/workflows/deploy_preview.yml

@@ -0,0 +1,37 @@
+name: Deploy Preview to Netlify
+
+on: pull_request
+
+jobs:
+  deploy-preview:
+    name: Build and Deploy preview on Netlify
+    runs-on: ubuntu-latest
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout repository
+        uses: actions/[email protected]
+
+      - name: Install modules
+        run: npm ci
+
+      - name: Decode .env file
+        run: echo "${{ secrets.ENV_FILE_CONTENT }}" | base64 -d > .env
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy to Netlify
+        uses: nwtgck/[email protected]
+        with:
+          publish-dir: './build'
+          deploy-message: '#${{ github.event.pull_request.number }} - ${{ github.event.pull_request.title }}'
+          github-token: ${{ secrets.PERSONAL_GITHUB_TOKEN }}
+          enable-commit-comment: false
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
+        timeout-minutes: 3

.gitignore

@@ -16,6 +16,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development
 .env.development.local
@@ -27,3 +28,6 @@ npm-debug.log*
 
 # editors
 .vscode
+
+# Local Netlify folder
+.netlify

env.example

@@ -1 +1,2 @@
 REACT_APP_DEFAULT_LANGUAGE=en
+REACT_APP_DUMMY_ENV=example

src/screens/Home/index.tsx

@@ -9,6 +9,8 @@ const HomeScreen = (): JSX.Element => {
   return (
     <div className="app">
       <header className="app-header">
+        {/* TODO: This is the test line for .env file. Will remove it later. */}
+        <div>{process.env.REACT_APP_DUMMY_ENV}</div>
         <img src={logo} className="app-logo" alt="logo" />
         <p>{t('sample_page.message', { codeSample: '<code>src/App.tsx</code>' })}</p>
         <a className="app-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" data-test-id="app-link">