## Module 1: Prepare the Environment

In this module, we will launch the IDE, install the Laravel-related packages, and import data to prepare the hands-on environment.

### Step 1. Open the IDE and the terminal in IDE

+ Click [VS Code](${LAB:HTTPS_REVERSE_PROXY_URL}?next=${LAB:"/vscode/?folder=/root/Mshop"|urlencode} "VS Code") to open your lab IDE in the browser. It may take around 10 seconds for the web-based VS Code to be fully loaded.

+ Click on `≡`, `Terminal`, then `New Terminal` to open a new terminal in the VS Code.

  ![204_1_1_2.png 85%](https://lab-static.pingcap.com/images/2026/2/6/ebe3aa625b02e3b8196d26caad77982a84d74dc3.png)

### Step 2. Review the `.env` file required for Laravel

+ By examining the contents of the `.env` file (lines 21 ~ 26) in the project, we can see that the current Laravel application currently is connected to a MySQL database, the tidb cloud cluster config is commented out for now.

  ![204_1_mshop_env.png 30%](https://lab-static.pingcap.com/images/2026/2/6/7df7a2204611cec003d4ca647e162cb3ca2ef79b.png)

  ```output
  ...
  # local mysql
  DB_CONNECTION=mysql
  DB_PORT=3306
  DB_HOST=mysql
  DB_USERNAME=lab
  DB_PASSWORD=labpass
  DB_DATABASE=shop
  ...
  ```

### Step 3. Install the Laravel-related packages and import the data

+ Copy the following script and paste it into the VS Code terminal, execute it to install the Laravel-related packages. The script for importing data and starting the application is `prepare.sh`. Please set the appropriate permissions first, then execute the script, this process should take approximately one minute. VS Code will pop up a window asking "See text and images copied to the clipboard", please click "Allow".

  ![204_1_env.png 45%](https://lab-static.pingcap.com/images/2026/2/4/d75efd5c0d0364c66065e70c17e9443bd05e5d11.png)

  ```bash
  chmod +x prepare.sh
  ./prepare.sh
  ```

  ```output
  Starting deployment process...
  ------------------------------------------------------------
  [INFO] Executing: composer install ...

  ...

  [SUCCESS] Command completed successfully.
  ------------------------------------------------------------
  [INFO] Executing: php artisan migrate ...

  INFO  Preparing database.

  Creating migration table ............................................................................ 51.27ms DONE

  INFO  Running migrations.

  0001_01_01_000000_create_users_table ............................................................... 252.69ms DONE
  0001_01_01_000001_create_cache_table ................................................................ 90.42ms DONE
  0001_01_01_000002_create_jobs_table ................................................................ 190.90ms DONE
  2025_12_20_112907_create_transactions_table ........................................................ 119.62ms DONE
  2025_12_20_120002_create_products_table ............................................................. 82.09ms DONE
  2026_01_03_040247_create_product_type_table ......................................................... 46.06ms DONE
  2026_01_03_040331_create_pay_types_table ............................................................ 44.52ms DONE

  [SUCCESS] Command completed successfully.
  ------------------------------------------------------------
  [INFO] Executing: mysql -u lab -plabpass -P3306 shop < initshop.sql ...
  [SUCCESS] Command completed successfully.
  ------------------------------------------------------------
  [INFO] Executing: composer require intervention/image:^2 ...

  ...

  >>> All tasks completed successfully! <<<
  ```

### Step 4. Start the Laravel application

+ In the VS Code terminal, run the command `composer run dev` to start the Laravel application.

  ```bash
  composer run dev
  ```

  ```output
  > Composer\Config::disableProcessTimeout
  > @php artisan serve --host=0.0.0.0

    INFO  Server running on [http://0.0.0.0:8000].

    Press Ctrl+C to stop the server
  ```

+ There will be a popup window saying "Your application running on port 8000 is available." click "Open in Browser".

  ![204_1_port_8000.png 85%](https://lab-static.pingcap.com/images/2026/2/5/4f681e3a7458c7631f2187c53100aa127e5bcaf4.png)

+ Let's move on to the next module.