Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

docs(local-setup): update mobile client and web dashboard environment... #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
fulleni merged 2 commits into main from chore/docs
Oct 24, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 24 additions & 17 deletions src/content/docs/mobile-client/local-setup.mdx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,21 +31,26 @@ This guide will walk you through setting up and running the Flutter News App Mob

4. **Configure the Environment**

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.

- Open the file `lib/main.dart`.
- Locate the `appEnvironment` constant.
- Set its value to one of the following:
- `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.
- `AppEnvironment.development`: Connects the app to a locally running instance of the API server (typically at `http://localhost:8080`).
- `AppEnvironment.production`: Connects the app to your live, deployed backend API.

```dart title="lib/main.dart"
// Use `AppEnvironment.demo` to run with in-memory data (no API needed).
// Use `AppEnvironment.development` to connect to a local backend API.
// Use `AppEnvironment.production` to connect to a live backend API.
const appEnvironment = AppEnvironment.demo;
```
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.

You can specify the environment by passing a `--dart-define` flag to the `flutter run` command.

- **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.
```bash
flutter run
```
- **Development:** Connects the app to a locally running instance of the API server.
```bash
flutter run --dart-define=APP_ENVIRONMENT=development
```
- **Production:** Connects the app to your live, deployed backend API. You must also provide the base URL for your API.
```bash
flutter run --dart-define=APP_ENVIRONMENT=production --dart-define=BASE_URL=https://your.api.com
```

<Aside type="tip">
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.
</Aside>

<Aside>
For the `development` environment, you must have the [API Server running locally](/docs/api-server/local-setup/) first.
Expand All @@ -57,12 +62,14 @@ This guide will walk you through setting up and running the Flutter News App Mob

5. **Run the Application**

Start the Flutter development server. Ensure you have a simulator/emulator running or a physical device connected.
Start the application using one of the commands from the previous step. Ensure you have a simulator/emulator running or a physical device connected.

For example, to run in `demo` mode:

```bash
flutter run
```

The application will now be running on your selected device.
The application will now launch on your selected device.

</Steps>
64 changes: 64 additions & 0 deletions src/content/docs/vscode-launch-configurations.mdx
View file Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Configuring VS Code Launch Environments
description: A guide to setting up VS Code launch configurations for different app environments.
---

import { Aside } from '@astrojs/starlight/components';

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.

<Aside type="caution" title="Important Security Note">
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.

This ensures it remains a local-only configuration and is not committed to your version control system.
</Aside>


### Create a `launch.json` File

1. In your project's root directory, create a folder named `.vscode` if it doesn't already exist.
2. Inside the `.vscode` folder, create a new file named `launch.json`.
3. Copy and paste the following JSON configuration into your `launch.json` file.

```json title=".vscode/launch.json"
{
"version": "0.2.0",
"configurations": [
{
"name": "Demo - Flutter News App",
"request": "launch",
"type": "dart",
"program": "lib/main.dart",
"args": [
"--dart-define=APP_ENVIRONMENT=demo"
]
},
{
"name": "Development - Flutter News App",
"request": "launch",
"type": "dart",
"program": "lib/main.dart",
"args": [
"--dart-define=APP_ENVIRONMENT=development",
"--dart-define=BASE_URL=http://localhost:8080"
]
},
{
"name": "Production - Flutter News App",
"request": "launch",
"type": "dart",
"program": "lib/main.dart",
"args": [
"--dart-define=APP_ENVIRONMENT=production",
"--dart-define=BASE_URL=https://api.your-production-domain.com"
]
}
]
}
```

### How to Use

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".

Simply select the environment you want to run and press the green play button (or `F5`) to launch the application with the correct settings.
41 changes: 24 additions & 17 deletions src/content/docs/web-dashboard/local-setup.mdx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,21 +32,26 @@ This guide will walk you through setting up and running the Flutter News App Web

4. **Configure the Environment**

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.

- Open the file `lib/main.dart`.
- Locate the `appEnvironment` constant.
- Set its value to one of the following:
- `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.
- `AppEnvironment.development`: Connects the dashboard to a locally running instance of the API server (typically at `http://localhost:8080`).
- `AppEnvironment.production`: Connects the dashboard to your live, deployed backend API.

```dart title="lib/main.dart"
// Use `AppEnvironment.demo` to run with in-memory data (no API needed).
// Use `AppEnvironment.development` to connect to a local backend API.
// Use `AppEnvironment.production` to connect to a live backend API.
const appEnvironment = AppEnvironment.demo;
```
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.

You can specify the environment by passing a `--dart-define` flag to the `flutter run` command.

- **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.
```bash
flutter run -d chrome
```
- **Development:** Connects the dashboard to a locally running instance of the API server.
```bash
flutter run -d chrome --dart-define=APP_ENVIRONMENT=development
```
- **Production:** Connects the dashboard to your live, deployed backend API. You must also provide the base URL for your API.
```bash
flutter run -d chrome --dart-define=APP_ENVIRONMENT=production --dart-define=BASE_URL=https://your.api.com
```

<Aside type="tip">
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.
</Aside>

<Aside>
For the `development` environment, you must have the [API Server running locally](/docs/api-server/local-setup/) first.
Expand All @@ -58,12 +63,14 @@ This guide will walk you through setting up and running the Flutter News App Web

5. **Run the Development Server**

Start the Flutter development server, targeting the Chrome browser:
Start the application using one of the commands from the previous step, targeting the Chrome browser.

For example, to run in `demo` mode:

```bash
flutter run -d chrome
```

The web dashboard will now be running and accessible in your Chrome browser.
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.

</Steps>

AltStyle γ«γ‚ˆγ£γ¦ε€‰ζ›γ•γ‚ŒγŸγƒšγƒΌγ‚Έ (->γ‚ͺγƒͺγ‚ΈγƒŠγƒ«) /