You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/docs/mobile-client/local-setup.mdx
+24-17Lines changed: 24 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -31,21 +31,26 @@ This guide will walk you through setting up and running the Flutter News App Mob
31
31
32
32
4.**Configure the Environment**
33
33
34
-
The mobile client can be run in different environments, allowing you to connect it to a live API, a local API, or run it with mock data for UI development.
35
-
36
-
- Open the file `lib/main.dart`.
37
-
- Locate the `appEnvironment` constant.
38
-
- Set its value to one of the following:
39
-
-`AppEnvironment.demo`: **(Recommended for UI development)** Runs the app with in-memory mock data. No backend API is required, making it perfect for focusing on UI changes and component testing.
40
-
-`AppEnvironment.development`: Connects the app to a locally running instance of the API server (typically at `http://localhost:8080`).
41
-
-`AppEnvironment.production`: Connects the app to your live, deployed backend API.
42
-
43
-
```dart title="lib/main.dart"
44
-
// Use `AppEnvironment.demo` to run with in-memory data (no API needed).
45
-
// Use `AppEnvironment.development` to connect to a local backend API.
46
-
// Use `AppEnvironment.production` to connect to a live backend API.
47
-
const appEnvironment = AppEnvironment.demo;
48
-
```
34
+
The mobile client uses compile-time variables to configure its environment. This allows you to easily switch between mock data, a local API, or a live production API without changing the code.
35
+
36
+
You can specify the environment by passing a `--dart-define` flag to the `flutter run` command.
37
+
38
+
-**Demo (Default):** Runs the app with in-memory mock data. No backend API is required, making it perfect for focusing on UI changes and component testing.
39
+
```bash
40
+
flutter run
41
+
```
42
+
-**Development:** Connects the app to a locally running instance of the API server.
43
+
```bash
44
+
flutter run --dart-define=APP_ENVIRONMENT=development
45
+
```
46
+
-**Production:** Connects the app to your live, deployed backend API. You must also provide the base URL for your API.
47
+
```bash
48
+
flutter run --dart-define=APP_ENVIRONMENT=production --dart-define=BASE_URL=https://your.api.com
49
+
```
50
+
51
+
<Asidetype="tip">
52
+
For an even easier workflow, you can configure your editor to run these commands for you. Check out the [Configuring VS Code Launch Environments](/docs/vscode-launch-configurations/) guide.
53
+
</Aside>
49
54
50
55
<Aside>
51
56
For the `development` environment, you must have the [API Server running locally](/docs/api-server/local-setup/) first.
@@ -57,12 +62,14 @@ This guide will walk you through setting up and running the Flutter News App Mob
57
62
58
63
5.**Run the Application**
59
64
60
-
Start the Flutter development server. Ensure you have a simulator/emulator running or a physical device connected.
65
+
Start the application using one of the commands from the previous step. Ensure you have a simulator/emulator running or a physical device connected.
66
+
67
+
For example, to run in `demo` mode:
61
68
62
69
```bash
63
70
flutter run
64
71
```
65
72
66
-
The application will now be running on your selected device.
73
+
The application will now launch on your selected device.
To streamline the development process, you can configure Visual Studio Code to easily run your Flutter application in different environments (`demo`, `development`, or `production`) directly from the "Run and Debug" panel. This avoids the need to manually type the `flutter run` command with the correct `--dart-define` arguments each time.
The `launch.json` file can contain sensitive information, such as production API URLs or other secrets. To prevent accidentally exposing these values, it is strongly recommended to add `.vscode/launch.json` to your project's `.gitignore` file.
12
+
13
+
This ensures it remains a local-only configuration and is not committed to your version control system.
14
+
</Aside>
15
+
16
+
17
+
### Create a `launch.json` File
18
+
19
+
1. In your project's root directory, create a folder named `.vscode` if it doesn't already exist.
20
+
2. Inside the `.vscode` folder, create a new file named `launch.json`.
21
+
3. Copy and paste the following JSON configuration into your `launch.json` file.
After saving the file, open the "Run and Debug" panel in VS Code (you can use the shortcut `Ctrl+Shift+D`). You will now see a dropdown menu at the top with the launch configurations: "Demo - Flutter News App", "Development - Flutter News App", and "Production - Flutter News App".
63
+
64
+
Simply select the environment you want to run and press the green play button (or `F5`) to launch the application with the correct settings.
Copy file name to clipboardExpand all lines: src/content/docs/web-dashboard/local-setup.mdx
+24-17Lines changed: 24 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,21 +32,26 @@ This guide will walk you through setting up and running the Flutter News App Web
32
32
33
33
4.**Configure the Environment**
34
34
35
-
The dashboard can be run in different environments, allowing you to connect it to a live API, a local API, or run it with mock data for UI development.
36
-
37
-
- Open the file `lib/main.dart`.
38
-
- Locate the `appEnvironment` constant.
39
-
- Set its value to one of the following:
40
-
-`AppEnvironment.demo`: **(Recommended for UI development)** Runs the dashboard with in-memory mock data. No backend API is required, making it perfect for focusing on UI changes and component testing.
41
-
-`AppEnvironment.development`: Connects the dashboard to a locally running instance of the API server (typically at `http://localhost:8080`).
42
-
-`AppEnvironment.production`: Connects the dashboard to your live, deployed backend API.
43
-
44
-
```dart title="lib/main.dart"
45
-
// Use `AppEnvironment.demo` to run with in-memory data (no API needed).
46
-
// Use `AppEnvironment.development` to connect to a local backend API.
47
-
// Use `AppEnvironment.production` to connect to a live backend API.
48
-
const appEnvironment = AppEnvironment.demo;
49
-
```
35
+
The web dashboard uses compile-time variables to configure its environment. This allows you to easily switch between mock data, a local API, or a live production API without changing the code.
36
+
37
+
You can specify the environment by passing a `--dart-define` flag to the `flutter run` command.
38
+
39
+
-**Demo (Default):** Runs the dashboard with in-memory mock data. No backend API is required, making it perfect for focusing on UI changes and component testing.
40
+
```bash
41
+
flutter run -d chrome
42
+
```
43
+
-**Development:** Connects the dashboard to a locally running instance of the API server.
44
+
```bash
45
+
flutter run -d chrome --dart-define=APP_ENVIRONMENT=development
46
+
```
47
+
-**Production:** Connects the dashboard to your live, deployed backend API. You must also provide the base URL for your API.
48
+
```bash
49
+
flutter run -d chrome --dart-define=APP_ENVIRONMENT=production --dart-define=BASE_URL=https://your.api.com
50
+
```
51
+
52
+
<Asidetype="tip">
53
+
For an even easier workflow, you can configure your editor to run these commands for you. Check out the [Configuring VS Code Launch Environments](/docs/vscode-launch-configurations/) guide.
54
+
</Aside>
50
55
51
56
<Aside>
52
57
For the `development` environment, you must have the [API Server running locally](/docs/api-server/local-setup/) first.
@@ -58,12 +63,14 @@ This guide will walk you through setting up and running the Flutter News App Web
58
63
59
64
5.**Run the Development Server**
60
65
61
-
Start the Flutter development server, targeting the Chrome browser:
66
+
Start the application using one of the commands from the previous step, targeting the Chrome browser.
67
+
68
+
For example, to run in `demo` mode:
62
69
63
70
```bash
64
71
flutter run -d chrome
65
72
```
66
73
67
-
The web dashboard will now be running and accessible in your Chrome browser.
74
+
The web dashboard will now be running and accessible in your Chrome browser. The `<Aside>` about connecting from a physical device has been removed as it is not relevant for a web-only dashboard.
0 commit comments