From decc2982e22af9f257c2798a73b06ffb2a8e8f04 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Thu, 28 Sep 2023 12:16:41 +0800
Subject: [PATCH 01/18] run webpack dev on https

---
 config/webpack/webpack.dev.js | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index 19999491395..c8af82d1d85 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -1,8 +1,8 @@
 const path = require('path');
 const portfinder = require('portfinder');
-const {DefinePlugin} = require('webpack');
-const {merge} = require('webpack-merge');
-const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin');
+const { DefinePlugin } = require('webpack');
+const { merge } = require('webpack-merge');
+const { TimeAnalyticsPlugin } = require('time-analytics-webpack-plugin');
 const getCommonConfig = require('./webpack.common');
 
 const BASE_PORT = 8082;
@@ -13,20 +13,20 @@ const BASE_PORT = 8082;
  * @returns {Configuration}
  */
 module.exports = (env = {}) =>
-    portfinder.getPortPromise({port: BASE_PORT}).then((port) => {
+    portfinder.getPortPromise({ port: BASE_PORT }).then((port) => {
         // Check if the USE_WEB_PROXY variable has been provided
         // and rewrite any requests to the local proxy server
         const proxySettings =
             process.env.USE_WEB_PROXY === 'false'
                 ? {}
                 : {
-                      proxy: {
-                          '/api': 'http://[::1]:9000',
-                          '/staging': 'http://[::1]:9000',
-                          '/chat-attachments': 'http://[::1]:9000',
-                          '/receipts': 'http://[::1]:9000',
-                      },
-                  };
+                    proxy: {
+                        '/api': 'http://[::1]:9000',
+                        '/staging': 'http://[::1]:9000',
+                        '/chat-attachments': 'http://[::1]:9000',
+                        '/receipts': 'http://[::1]:9000',
+                    },
+                };
 
         const baseConfig = getCommonConfig(env);
 
@@ -44,6 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
+                https: true,
             },
             plugins: [
                 new DefinePlugin({

From b0f3f2371e557b73ce96b51488410ff5300014df Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 10:38:38 +0800
Subject: [PATCH 02/18] add task to generate certificates

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d013caa1c40..f7f32936314 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,8 @@
     "test:e2e": "node tests/e2e/testRunner.js --development",
     "gh-actions-unused-styles": "./.github/scripts/findUnusedKeys.sh",
     "workflow-test": "./workflow_tests/scripts/runWorkflowTests.sh",
-    "workflow-test:generate": "node workflow_tests/utils/preGenerateTest.js"
+    "workflow-test:generate": "node workflow_tests/utils/preGenerateTest.js",
+    "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem new.expensify.com.dev localhost 127.0.0.1"
   },
   "dependencies": {
     "@expensify/react-native-web": "0.18.15",

From 325213a4d9b48095682c3c6b30d7a7fbee39910f Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 10:39:11 +0800
Subject: [PATCH 03/18] use generated certs in webpack dev

---
 config/webpack/webpack.dev.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index c8af82d1d85..5c705257ab2 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,10 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                https: true,
+                https: {
+                    key: path.join(__dirname, 'key.pem'),
+                    cert: path.join(__dirname, 'certificate.pem')
+                }
             },
             plugins: [
                 new DefinePlugin({

From c46d0fa0d3ed1ff08b762416be6d09659e612e91 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 10:39:59 +0800
Subject: [PATCH 04/18] update gitignore

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index d3b4daac04d..335efdc5586 100644
--- a/.gitignore
+++ b/.gitignore
@@ -111,3 +111,6 @@ tsconfig.tsbuildinfo
 # Yalc
 .yalc
 yalc.lock
+
+# Local https certificate/key
+config/webpack/*.pem

From 0140258f2a40fe513c40d79abb644f39ed9aff5b Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 12:07:45 +0800
Subject: [PATCH 05/18] add mkcert instructions

---
 README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/README.md b/README.md
index fce7cee8dcd..537f0d0101a 100644
--- a/README.md
+++ b/README.md
@@ -34,12 +34,18 @@ These instructions should get you set up ready to work on New Expensify 🙌
 1. Install `nvm` then `node` & `npm`: `brew install nvm && nvm install`
 2. Install `watchman`: `brew install watchman`
 3. Install dependencies: `npm install`
+4. Install `mkcert`: `brew install mkcert` followed by `npm run setup-https`. If you're using another OS, follow the instructions [here](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation). 
 
 You can use any IDE or code editing tool for developing on any platform. Use your favorite!
 
 ## Recommended `node` setup
 In order to have more consistent builds, we use a strict `node` and `npm` version as defined in the `package.json` `engines` field and `.nvmrc` file. `npm install` will fail if you do not use the version defined, so it is recommended to install `node` via `nvm` for easy node version management. Automatic `node` version switching can be installed for [`zsh`](https://github.com/nvm-sh/nvm#zsh) or [`bash`](https://github.com/nvm-sh/nvm#bash) using `nvm`.
 
+## Configuring HTTPS
+The webpack development server now uses https. If you're using a mac, you can simply run `npm run setup-https`.
+
+If you're using another operating system, you will need to ensure `mkcert` is installed, and then follow the instructions in the repository to generate certificates valid for `new.expesify.com.dev` and `localhost`. The certificate should be named `certificate.pem` and the key should be named `key.pem`. They should be placed in `config/webpack`.
+
 ## Running the web app 🕸
 * To run the **development web app**: `npm run web`
 * Changes applied to Javascript will be applied automatically via WebPack as configured in `webpack.dev.js`

From 34b573291053ef606ff1e346fb825518190d2d34 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 12:08:02 +0800
Subject: [PATCH 06/18] prettier

---
 config/webpack/webpack.dev.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index 5c705257ab2..ac7696293b7 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -1,8 +1,8 @@
 const path = require('path');
 const portfinder = require('portfinder');
-const { DefinePlugin } = require('webpack');
-const { merge } = require('webpack-merge');
-const { TimeAnalyticsPlugin } = require('time-analytics-webpack-plugin');
+const {DefinePlugin} = require('webpack');
+const {merge} = require('webpack-merge');
+const {TimeAnalyticsPlugin} = require('time-analytics-webpack-plugin');
 const getCommonConfig = require('./webpack.common');
 
 const BASE_PORT = 8082;
@@ -13,20 +13,20 @@ const BASE_PORT = 8082;
  * @returns {Configuration}
  */
 module.exports = (env = {}) =>
-    portfinder.getPortPromise({ port: BASE_PORT }).then((port) => {
+    portfinder.getPortPromise({port: BASE_PORT}).then((port) => {
         // Check if the USE_WEB_PROXY variable has been provided
         // and rewrite any requests to the local proxy server
         const proxySettings =
             process.env.USE_WEB_PROXY === 'false'
                 ? {}
                 : {
-                    proxy: {
-                        '/api': 'http://[::1]:9000',
-                        '/staging': 'http://[::1]:9000',
-                        '/chat-attachments': 'http://[::1]:9000',
-                        '/receipts': 'http://[::1]:9000',
-                    },
-                };
+                      proxy: {
+                          '/api': 'http://[::1]:9000',
+                          '/staging': 'http://[::1]:9000',
+                          '/chat-attachments': 'http://[::1]:9000',
+                          '/receipts': 'http://[::1]:9000',
+                      },
+                  };
 
         const baseConfig = getCommonConfig(env);
 
@@ -46,8 +46,8 @@ module.exports = (env = {}) =>
                 port,
                 https: {
                     key: path.join(__dirname, 'key.pem'),
-                    cert: path.join(__dirname, 'certificate.pem')
-                }
+                    cert: path.join(__dirname, 'certificate.pem'),
+                },
             },
             plugins: [
                 new DefinePlugin({

From 2d80cbd1ea5044a0e2a54334a13a7d51fa69bb68 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 29 Sep 2023 16:22:42 +0800
Subject: [PATCH 07/18] change host to new.expensify.com.dev

---
 README.md                     | 4 ++++
 config/webpack/webpack.dev.js | 1 +
 2 files changed, 5 insertions(+)

diff --git a/README.md b/README.md
index 537f0d0101a..6b5f96de6b7 100644
--- a/README.md
+++ b/README.md
@@ -35,6 +35,10 @@ These instructions should get you set up ready to work on New Expensify 🙌
 2. Install `watchman`: `brew install watchman`
 3. Install dependencies: `npm install`
 4. Install `mkcert`: `brew install mkcert` followed by `npm run setup-https`. If you're using another OS, follow the instructions [here](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation). 
+5. Create a host entry in your local hosts file, `/etc/hosts` for new.expensify.com.dev pointing to localhost:
+```
+127.0.0.1 new.expensify.com.dev
+```
 
 You can use any IDE or code editing tool for developing on any platform. Use your favorite!
 
diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index ac7696293b7..1e7074b1627 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,6 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
+                host: 'new.expensify.com.dev',
                 https: {
                     key: path.join(__dirname, 'key.pem'),
                     cert: path.join(__dirname, 'certificate.pem'),

From a269b40cf59459fb5cce0edf5aba6c3f89c3d122 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Tue, 3 Oct 2023 07:44:02 -0400
Subject: [PATCH 08/18] update help site to use new https dev

---
 docs/_includes/CONST.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html
index 4b87f87931d..af6a14a7833 100644
--- a/docs/_includes/CONST.html
+++ b/docs/_includes/CONST.html
@@ -1,7 +1,7 @@
 {% if jekyll.environment == "production" %}
     {% assign MAIN_SITE_URL = "https://new.expensify.com" %}
 {% else %}
-    {% assign MAIN_SITE_URL = "http://localhost:8082" %}
+    {% assign MAIN_SITE_URL = "https://new.expensify.com.dev:8082" %}
 {% endif %}
 
 {% capture CONCIERGE_CHAT_URL %}{{MAIN_SITE_URL}}/concierge{% endcapture %}

From 94107850a394e68f2edf933013535fcdc6f3581e Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Tue, 3 Oct 2023 07:44:21 -0400
Subject: [PATCH 09/18] add https url to nav

---
 src/libs/Navigation/linkingConfig.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 533dbf51633..1e695fa9dce 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -4,7 +4,7 @@ import CONST from '../../CONST';
 import NAVIGATORS from '../../NAVIGATORS';
 
 export default {
-    prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'http://localhost', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
+    prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'https://new.expensify.com.dev', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
     config: {
         initialRouteName: SCREENS.HOME,
         screens: {

From e8ebe3bc9ffa24480e5417c7c817b47dcf94ee3a Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Tue, 3 Oct 2023 07:44:34 -0400
Subject: [PATCH 10/18] change additional refs to https dev

---
 contributingGuides/APPLE_GOOGLE_SIGNIN.md | 4 ++--
 desktop/main.js                           | 4 ++--
 desktop/start.js                          | 2 +-
 src/CONST.ts                              | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md
index 9032a99dfbb..3a1feac073d 100644
--- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md
+++ b/contributingGuides/APPLE_GOOGLE_SIGNIN.md
@@ -161,10 +161,10 @@ function beginAppleSignIn(idToken) {
 
 You can use any SSH tunneling service that allows you to configure custom subdomains so that we have a consistent address to use. We'll use ngrok in these examples, but ngrok requires a paid account for this. If you need a free option, try serveo.net.
 
-After you've set ngrok up to be able to run on your machine (requires configuring a key with the command line tool, instructions provided by the ngrok website after you create an account), test hosting the web app on a custom subdomain. This example assumes the development web app is running at `localhost:8082`:
+After you've set ngrok up to be able to run on your machine (requires configuring a key with the command line tool, instructions provided by the ngrok website after you create an account), test hosting the web app on a custom subdomain. This example assumes the development web app is running at `new.expensify.com.dev:8082`:
 
 ```
-ngrok http 8082 --host-header="localhost:8082" --subdomain=mysubdomain
+ngrok http 8082 --host-header="new.expensify.com.dev:8082" --subdomain=mysubdomain
 ```
 
 The `--host-header` flag is there to avoid webpack errors with header validation. In addition, add `allowedHosts: 'all'` to the dev server config in `webpack.dev.js`:
diff --git a/desktop/main.js b/desktop/main.js
index 5e184d529af..4b43ff128f6 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -85,7 +85,7 @@ _.assign(console, log.functions);
 // until it detects that it has been upgraded to the correct version.
 
 const EXPECTED_UPDATE_VERSION_FLAG = '--expected-update-version';
-const APP_DOMAIN = __DEV__ ? `http://localhost:${port}` : 'app://-';
+const APP_DOMAIN = __DEV__ ? `https://new.expensify.com.dev:${port}` : 'app://-';
 
 let expectedUpdateVersion;
 for (let i = 0; i < process.argv.length; i++) {
@@ -221,7 +221,7 @@ const mainWindow = () => {
     let deeplinkUrl;
     let browserWindow;
 
-    const loadURL = __DEV__ ? (win) => win.loadURL(`http://localhost:${port}`) : serve({directory: `${__dirname}/www`});
+    const loadURL = __DEV__ ? (win) => win.loadURL(`https://new.expensify.com.dev:${port}`) : serve({directory: `${__dirname}/www`});
 
     // Prod and staging set the icon in the electron-builder config, so only update it here for dev
     if (__DEV__) {
diff --git a/desktop/start.js b/desktop/start.js
index d9ec59b71c8..a9bb5a2d588 100644
--- a/desktop/start.js
+++ b/desktop/start.js
@@ -32,7 +32,7 @@ portfinder
                 env,
             },
             {
-                command: `wait-port localhost:${port} && npx electronmon ./desktop/dev.js`,
+                command: `wait-port new.expensify.com.dev:${port} && npx electronmon ./desktop/dev.js`,
                 name: 'Electron',
                 prefixColor: 'cyan.dim',
                 env,
diff --git a/src/CONST.ts b/src/CONST.ts
index dbe47c6ed1a..c8e6fcc65e2 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -448,7 +448,7 @@ const CONST = {
     ONFIDO_TERMS_OF_SERVICE_URL: 'https://onfido.com/terms-of-service/',
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
-    DEV_NEW_EXPENSIFY_URL: 'http://localhost:',
+    DEV_NEW_EXPENSIFY_URL: 'https://new.expensify.com.dev:',
 
     SIGN_IN_FORM_WIDTH: 300,
 

From 0be46040ab60b2cd4b3ed58ff106e0dba98d3a4f Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Tue, 3 Oct 2023 21:52:50 -0400
Subject: [PATCH 11/18] fix unit test

---
 tests/unit/ReportUtilsTest.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index 24397a04a0e..9ddf9b93f8d 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -503,8 +503,7 @@ describe('ReportUtils', () => {
             expect(ReportUtils.getReportIDFromLink('new-expensify://r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://www.expensify.cash/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://staging.new.expensify.com/r/75431276')).toBe('75431276');
-            expect(ReportUtils.getReportIDFromLink('http://localhost/r/75431276')).toBe('75431276');
-            expect(ReportUtils.getReportIDFromLink('http://localhost:8080/r/75431276')).toBe('75431276');
+            expect(ReportUtils.getReportIDFromLink('https://new.expensify.com.dev/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://staging.expensify.cash/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://new.expensify.com/r/75431276')).toBe('75431276');
         });

From 1d6bb1d14cff3dd029868a0a7c8ee14ae78c527b Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Thu, 12 Oct 2023 11:18:33 -0400
Subject: [PATCH 12/18] use server instead of https config

---
 config/webpack/webpack.dev.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index 1e7074b1627..dcca84ce5e9 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -45,9 +45,12 @@ module.exports = (env = {}) =>
                 historyApiFallback: true,
                 port,
                 host: 'new.expensify.com.dev',
-                https: {
-                    key: path.join(__dirname, 'key.pem'),
-                    cert: path.join(__dirname, 'certificate.pem'),
+                server: {
+                    type: 'https',
+                    options: {
+                        key: path.join(__dirname, 'key.pem'),
+                        cert: path.join(__dirname, 'certificate.pem'),
+                    },
                 },
             },
             plugins: [

From e733f372f4d63779b349439d821fd843317d743a Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Tue, 17 Oct 2023 20:59:42 +0900
Subject: [PATCH 13/18] docs: add instructions for moving certificates

---
 README.md | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/README.md b/README.md
index 6b5f96de6b7..17c4f83e211 100644
--- a/README.md
+++ b/README.md
@@ -11,6 +11,7 @@
 
 #### Table of Contents
 * [Local Development](#local-development)
+* [Testing on browsers on simulators and emulators](#testing-on-browsers-on-simulators-and-emulators)
 * [Running The Tests](#running-the-tests)
 * [Debugging](#debugging)
 * [App Structure and Conventions](#app-structure-and-conventions)
@@ -113,6 +114,47 @@ variables referenced here get updated since your local `.env` file is ignored.
 
 ----
 
+# Testing on browsers on simulators and emulators
+
+The development server is reached through the HTTPS protocol, and any client that access the development server needs a certificate.
+
+You create this certificate by following the instructions in [`Configuring HTTPS`](#configuring-https) of this readme. When accessing the website served from the development server on browsers on iOS simulator or Android emulator, these virtual devices need to have the same certificate installed. Follow the steps below to install to do so.
+
+#### Pre-requisite for Android flow
+1. Open any emulator using Android Studio
+2. Use `adb push "$(mkcert -CAROOT)/rootCA.pem" /storage/emulated/0/Download/` to push certificate to install in Download folder.
+3. Install the certificate as CA certificate from the settings.
+4. Close the emulator.
+
+Note - If you want to run app on `https://127.0.0.1:8082`, then just install the certificate and use `adb reverse tcp:8082 tcp:8082` on every startup.
+
+#### Android Flow
+1. Run `npm run setupNewDotWebForEmulators android`
+2. Select the emulator you want to run if prompted. (If single emulator is available, then it will open automatically)
+3. Let the script execute till the message `🎉 Done!`.
+4. Check the emulator is closed.
+
+Note - If you want to run app on `https://new.expensify.com.dev:8082`, then just do the Android flow and use `npm run startAndroidEmulator` to start the Android Emulator every time (It will configure the emulator).
+
+
+Possible Scenario:
+1. It may run the second flow on a new device, then to check first flow just run the flow again and select the same device.
+2. It may fail to root with error `adbd cannot run as root in production builds`, then it will point to https://stackoverflow.com/a/45668555 in the console.
+
+#### iOS Flow
+1. Run `npm run setupNewDotWebForEmulators ios`
+2. Select the emulator you want to run if prompted. (If single emulator is available, then it will open automatically)
+3. Let the script execute till the message `🎉 Done!`.
+4. Check the emulator is closed.
+
+#### All Flow
+1. Run `npm run setupNewDotWebForEmulators all` or `npm run setupNewDotWebForEmulators`
+2. Check if the iOS flow runs first and then Android flow runs.
+3. Let the script execute till the message `🎉 Done!`.
+4. Check the emulator is closed.
+
+----
+
 # Running the tests
 ## Unit tests
 Unit tests are valuable when you want to test one component. They should be short, fast, and ideally only test one thing.

From 6aeab2f7b1c996634fc7c20bc24b661dee8bd0f4 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 18 Oct 2023 21:53:59 +0900
Subject: [PATCH 14/18] docs: update readme

---
 README.md | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/README.md b/README.md
index 17c4f83e211..d96bafd8506 100644
--- a/README.md
+++ b/README.md
@@ -123,7 +123,7 @@ You create this certificate by following the instructions in [`Configuring HTTPS
 #### Pre-requisite for Android flow
 1. Open any emulator using Android Studio
 2. Use `adb push "$(mkcert -CAROOT)/rootCA.pem" /storage/emulated/0/Download/` to push certificate to install in Download folder.
-3. Install the certificate as CA certificate from the settings.
+3. Install the certificate as CA certificate from the settings. On the Android emulator, this option can be found in Settings > Security > Encryption & Credentials > Install a certificate > CA certificate.  
 4. Close the emulator.
 
 Note - If you want to run app on `https://127.0.0.1:8082`, then just install the certificate and use `adb reverse tcp:8082 tcp:8082` on every startup.
@@ -132,26 +132,22 @@ Note - If you want to run app on `https://127.0.0.1:8082`, then just install the
 1. Run `npm run setupNewDotWebForEmulators android`
 2. Select the emulator you want to run if prompted. (If single emulator is available, then it will open automatically)
 3. Let the script execute till the message `🎉 Done!`.
-4. Check the emulator is closed.
 
 Note - If you want to run app on `https://new.expensify.com.dev:8082`, then just do the Android flow and use `npm run startAndroidEmulator` to start the Android Emulator every time (It will configure the emulator).
 
 
 Possible Scenario:
-1. It may run the second flow on a new device, then to check first flow just run the flow again and select the same device.
-2. It may fail to root with error `adbd cannot run as root in production builds`, then it will point to https://stackoverflow.com/a/45668555 in the console.
+The flow may fail to root with error `adbd cannot run as root in production builds`. In this case, please refer to https://stackoverflow.com/a/45668555. Or use `https://127.0.0.1:8082` for less hassle.
 
 #### iOS Flow
 1. Run `npm run setupNewDotWebForEmulators ios`
 2. Select the emulator you want to run if prompted. (If single emulator is available, then it will open automatically)
 3. Let the script execute till the message `🎉 Done!`.
-4. Check the emulator is closed.
 
 #### All Flow
 1. Run `npm run setupNewDotWebForEmulators all` or `npm run setupNewDotWebForEmulators`
 2. Check if the iOS flow runs first and then Android flow runs.
 3. Let the script execute till the message `🎉 Done!`.
-4. Check the emulator is closed.
 
 ----
 

From a2a2fda4523474244b7b8dbfe351eed459973e23 Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 18 Oct 2023 07:10:35 -0700
Subject: [PATCH 15/18] fix typo

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d96bafd8506..b217690f37e 100644
--- a/README.md
+++ b/README.md
@@ -114,7 +114,7 @@ variables referenced here get updated since your local `.env` file is ignored.
 
 ----
 
-# Testing on browsers on simulators and emulators
+# Testing on browsers in simulators and emulators
 
 The development server is reached through the HTTPS protocol, and any client that access the development server needs a certificate.
 

From 512d08434510ce8f6a4978e94796528b330d84bf Mon Sep 17 00:00:00 2001
From: Hayata Suenaga <hayata@expensify.com>
Date: Wed, 18 Oct 2023 07:11:19 -0700
Subject: [PATCH 16/18] fix typo

Co-authored-by: Vit Horacek <36083550+mountiny@users.noreply.github.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index b217690f37e..48c4cb03baf 100644
--- a/README.md
+++ b/README.md
@@ -118,7 +118,7 @@ variables referenced here get updated since your local `.env` file is ignored.
 
 The development server is reached through the HTTPS protocol, and any client that access the development server needs a certificate.
 
-You create this certificate by following the instructions in [`Configuring HTTPS`](#configuring-https) of this readme. When accessing the website served from the development server on browsers on iOS simulator or Android emulator, these virtual devices need to have the same certificate installed. Follow the steps below to install to do so.
+You create this certificate by following the instructions in [`Configuring HTTPS`](#configuring-https) of this readme. When accessing the website served from the development server on browsers in iOS simulator or Android emulator, these virtual devices need to have the same certificate installed. Follow the steps below to install them.
 
 #### Pre-requisite for Android flow
 1. Open any emulator using Android Studio

From 2cc169d984e5644d7cdb1698fd89b210cbc4fc83 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Tue, 24 Oct 2023 11:11:12 -0400
Subject: [PATCH 17/18] Update README.md

Co-authored-by: Brandon Stites <42391420+stitesExpensify@users.noreply.github.com>
---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 48c4cb03baf..46eb240e310 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ These instructions should get you set up ready to work on New Expensify 🙌
 1. Install `nvm` then `node` & `npm`: `brew install nvm && nvm install`
 2. Install `watchman`: `brew install watchman`
 3. Install dependencies: `npm install`
-4. Install `mkcert`: `brew install mkcert` followed by `npm run setup-https`. If you're using another OS, follow the instructions [here](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation). 
+4. Install `mkcert`: `brew install mkcert` followed by `npm run setup-https`. If you are not using macOS, follow the instructions [here](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation). 
 5. Create a host entry in your local hosts file, `/etc/hosts` for new.expensify.com.dev pointing to localhost:
 ```
 127.0.0.1 new.expensify.com.dev

From ed9707a3f0df9e812b50f8345be0a33ea2495ff8 Mon Sep 17 00:00:00 2001
From: Justin Persaud <jpersaud@expensify.com>
Date: Fri, 27 Oct 2023 16:55:10 -0400
Subject: [PATCH 18/18] Change hostname to dev.new.expensify.com

---
 README.md                                 | 6 +++---
 config/webpack/webpack.dev.js             | 2 +-
 contributingGuides/APPLE_GOOGLE_SIGNIN.md | 4 ++--
 desktop/main.js                           | 4 ++--
 desktop/start.js                          | 2 +-
 docs/_includes/CONST.html                 | 2 +-
 package.json                              | 2 +-
 src/CONST.ts                              | 2 +-
 src/libs/Navigation/linkingConfig.js      | 2 +-
 tests/unit/ReportUtilsTest.js             | 2 +-
 10 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 46eb240e310..fdbf82df381 100644
--- a/README.md
+++ b/README.md
@@ -36,9 +36,9 @@ These instructions should get you set up ready to work on New Expensify 🙌
 2. Install `watchman`: `brew install watchman`
 3. Install dependencies: `npm install`
 4. Install `mkcert`: `brew install mkcert` followed by `npm run setup-https`. If you are not using macOS, follow the instructions [here](https://github.com/FiloSottile/mkcert?tab=readme-ov-file#installation). 
-5. Create a host entry in your local hosts file, `/etc/hosts` for new.expensify.com.dev pointing to localhost:
+5. Create a host entry in your local hosts file, `/etc/hosts` for dev.new.expensify.com pointing to localhost:
 ```
-127.0.0.1 new.expensify.com.dev
+127.0.0.1 dev.new.expensify.com
 ```
 
 You can use any IDE or code editing tool for developing on any platform. Use your favorite!
@@ -133,7 +133,7 @@ Note - If you want to run app on `https://127.0.0.1:8082`, then just install the
 2. Select the emulator you want to run if prompted. (If single emulator is available, then it will open automatically)
 3. Let the script execute till the message `🎉 Done!`.
 
-Note - If you want to run app on `https://new.expensify.com.dev:8082`, then just do the Android flow and use `npm run startAndroidEmulator` to start the Android Emulator every time (It will configure the emulator).
+Note - If you want to run app on `https://dev.new.expensify.com:8082`, then just do the Android flow and use `npm run startAndroidEmulator` to start the Android Emulator every time (It will configure the emulator).
 
 
 Possible Scenario:
diff --git a/config/webpack/webpack.dev.js b/config/webpack/webpack.dev.js
index dcca84ce5e9..e28383eff55 100644
--- a/config/webpack/webpack.dev.js
+++ b/config/webpack/webpack.dev.js
@@ -44,7 +44,7 @@ module.exports = (env = {}) =>
                 ...proxySettings,
                 historyApiFallback: true,
                 port,
-                host: 'new.expensify.com.dev',
+                host: 'dev.new.expensify.com',
                 server: {
                     type: 'https',
                     options: {
diff --git a/contributingGuides/APPLE_GOOGLE_SIGNIN.md b/contributingGuides/APPLE_GOOGLE_SIGNIN.md
index 3a1feac073d..3ade13554bd 100644
--- a/contributingGuides/APPLE_GOOGLE_SIGNIN.md
+++ b/contributingGuides/APPLE_GOOGLE_SIGNIN.md
@@ -161,10 +161,10 @@ function beginAppleSignIn(idToken) {
 
 You can use any SSH tunneling service that allows you to configure custom subdomains so that we have a consistent address to use. We'll use ngrok in these examples, but ngrok requires a paid account for this. If you need a free option, try serveo.net.
 
-After you've set ngrok up to be able to run on your machine (requires configuring a key with the command line tool, instructions provided by the ngrok website after you create an account), test hosting the web app on a custom subdomain. This example assumes the development web app is running at `new.expensify.com.dev:8082`:
+After you've set ngrok up to be able to run on your machine (requires configuring a key with the command line tool, instructions provided by the ngrok website after you create an account), test hosting the web app on a custom subdomain. This example assumes the development web app is running at `dev.new.expensify.com:8082`:
 
 ```
-ngrok http 8082 --host-header="new.expensify.com.dev:8082" --subdomain=mysubdomain
+ngrok http 8082 --host-header="dev.new.expensify.com:8082" --subdomain=mysubdomain
 ```
 
 The `--host-header` flag is there to avoid webpack errors with header validation. In addition, add `allowedHosts: 'all'` to the dev server config in `webpack.dev.js`:
diff --git a/desktop/main.js b/desktop/main.js
index 4b43ff128f6..7ab8d748b54 100644
--- a/desktop/main.js
+++ b/desktop/main.js
@@ -85,7 +85,7 @@ _.assign(console, log.functions);
 // until it detects that it has been upgraded to the correct version.
 
 const EXPECTED_UPDATE_VERSION_FLAG = '--expected-update-version';
-const APP_DOMAIN = __DEV__ ? `https://new.expensify.com.dev:${port}` : 'app://-';
+const APP_DOMAIN = __DEV__ ? `https://dev.new.expensify.com:${port}` : 'app://-';
 
 let expectedUpdateVersion;
 for (let i = 0; i < process.argv.length; i++) {
@@ -221,7 +221,7 @@ const mainWindow = () => {
     let deeplinkUrl;
     let browserWindow;
 
-    const loadURL = __DEV__ ? (win) => win.loadURL(`https://new.expensify.com.dev:${port}`) : serve({directory: `${__dirname}/www`});
+    const loadURL = __DEV__ ? (win) => win.loadURL(`https://dev.new.expensify.com:${port}`) : serve({directory: `${__dirname}/www`});
 
     // Prod and staging set the icon in the electron-builder config, so only update it here for dev
     if (__DEV__) {
diff --git a/desktop/start.js b/desktop/start.js
index a9bb5a2d588..05a1b031350 100644
--- a/desktop/start.js
+++ b/desktop/start.js
@@ -32,7 +32,7 @@ portfinder
                 env,
             },
             {
-                command: `wait-port new.expensify.com.dev:${port} && npx electronmon ./desktop/dev.js`,
+                command: `wait-port dev.new.expensify.com:${port} && npx electronmon ./desktop/dev.js`,
                 name: 'Electron',
                 prefixColor: 'cyan.dim',
                 env,
diff --git a/docs/_includes/CONST.html b/docs/_includes/CONST.html
index af6a14a7833..231423f1058 100644
--- a/docs/_includes/CONST.html
+++ b/docs/_includes/CONST.html
@@ -1,7 +1,7 @@
 {% if jekyll.environment == "production" %}
     {% assign MAIN_SITE_URL = "https://new.expensify.com" %}
 {% else %}
-    {% assign MAIN_SITE_URL = "https://new.expensify.com.dev:8082" %}
+    {% assign MAIN_SITE_URL = "https://dev.new.expensify.com:8082" %}
 {% endif %}
 
 {% capture CONCIERGE_CHAT_URL %}{{MAIN_SITE_URL}}/concierge{% endcapture %}
diff --git a/package.json b/package.json
index f7f32936314..c86ae5dfe26 100644
--- a/package.json
+++ b/package.json
@@ -51,7 +51,7 @@
     "gh-actions-unused-styles": "./.github/scripts/findUnusedKeys.sh",
     "workflow-test": "./workflow_tests/scripts/runWorkflowTests.sh",
     "workflow-test:generate": "node workflow_tests/utils/preGenerateTest.js",
-    "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem new.expensify.com.dev localhost 127.0.0.1"
+    "setup-https": "mkcert -install && mkcert -cert-file config/webpack/certificate.pem -key-file config/webpack/key.pem dev.new.expensify.com localhost 127.0.0.1"
   },
   "dependencies": {
     "@expensify/react-native-web": "0.18.15",
diff --git a/src/CONST.ts b/src/CONST.ts
index c8e6fcc65e2..cc3c7e0922f 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -448,7 +448,7 @@ const CONST = {
     ONFIDO_TERMS_OF_SERVICE_URL: 'https://onfido.com/terms-of-service/',
 
     // Use Environment.getEnvironmentURL to get the complete URL with port number
-    DEV_NEW_EXPENSIFY_URL: 'https://new.expensify.com.dev:',
+    DEV_NEW_EXPENSIFY_URL: 'https://dev.new.expensify.com:',
 
     SIGN_IN_FORM_WIDTH: 300,
 
diff --git a/src/libs/Navigation/linkingConfig.js b/src/libs/Navigation/linkingConfig.js
index 1e695fa9dce..86c3e67cab2 100644
--- a/src/libs/Navigation/linkingConfig.js
+++ b/src/libs/Navigation/linkingConfig.js
@@ -4,7 +4,7 @@ import CONST from '../../CONST';
 import NAVIGATORS from '../../NAVIGATORS';
 
 export default {
-    prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'https://new.expensify.com.dev', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
+    prefixes: ['new-expensify://', 'https://www.expensify.cash', 'https://staging.expensify.cash', 'https://dev.new.expensify.com', CONST.NEW_EXPENSIFY_URL, CONST.STAGING_NEW_EXPENSIFY_URL],
     config: {
         initialRouteName: SCREENS.HOME,
         screens: {
diff --git a/tests/unit/ReportUtilsTest.js b/tests/unit/ReportUtilsTest.js
index 9ddf9b93f8d..40a0ea31ce8 100644
--- a/tests/unit/ReportUtilsTest.js
+++ b/tests/unit/ReportUtilsTest.js
@@ -503,7 +503,7 @@ describe('ReportUtils', () => {
             expect(ReportUtils.getReportIDFromLink('new-expensify://r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://www.expensify.cash/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://staging.new.expensify.com/r/75431276')).toBe('75431276');
-            expect(ReportUtils.getReportIDFromLink('https://new.expensify.com.dev/r/75431276')).toBe('75431276');
+            expect(ReportUtils.getReportIDFromLink('https://dev.new.expensify.com/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://staging.expensify.cash/r/75431276')).toBe('75431276');
             expect(ReportUtils.getReportIDFromLink('https://new.expensify.com/r/75431276')).toBe('75431276');
         });