# dart-webdev-quickstart

**Repository Path**: coding-playground/dart-webdev-quickstart

## Basic Information

- **Project Name**: dart-webdev-quickstart
- **Description**: 使用 Dart 语言 webdev building 模式构建，用于熟悉 Dart 语法和基于 Dart 开发 WEB 项目的流程。
- **Primary Language**: Dart
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Dart webdev quickstart.

## Setup

1. Install Dart
    ```
    brew tap dart-lang/dart
    brew install dart
    ```

2. Get CLI tools or an IDE (or both)
    > If you like to use the command line, install webdev and stagehand:
    ```
    pub global activate webdev
    pub global activate stagehand
    ```
    > Although using an IDE is optional, we highly recommend using one. For a list of available IDEs, see the [overview of editors & debuggers.](https://dart.dev/tools#ides-and-editors)

3. Create a web app
    >  To create a web app from the command line, use these commands:
    ```
    mkdir quickstart
    cd quickstart
    stagehand web-simple
    pub get
    ```
    > web To create the same web app from an IDE that has Dart integration, create a project using the template named Bare-bones Web App.

4. Run the app
    > To run the app from the command line, use webdev to build and serve the app:
    ```
    webdev serve
    ```
    > Or run the app from your IDE.

5. View your app  
    > To view your app, use the Chrome browser to visit the app’s URL — for example, localhost:8080.
    > 
    > Whether you use an IDE or the command line, webdev serve builds and serves your app using the Dart development compiler, dartdevc. Startup is slowest the first time dartdevc builds and serves your app. After that, assets are cached on disk and incremental builds are much faster.
    > 
    > Once your app has compiled, the browser should display “Your Dart app is running.”

6. Build & Deploy
   1. 构建，执行以下命令构建并生成 build 目录，该目录即为发布根目录
      ```
      webdev build
      ```
   2. 发布，将 build 产物发布到 WEB server
      可以发布到 nginx，本地开发预览可以使用 anywhere （可以在任何文件目录启动 WEB 服务）进行预览
      ```
      npm install anywhere

      cd build

      anywhere
      ```



## Exception

### 1. Library import not working
> package not install error
```
# Use Command
pub cache repair

# Result Report
Reinstalled 83 packages.
Reactivating stagehand 3.3.2...
Precompiling executables... (1.7s)
Precompiled stagehand:stagehand.
Installed executable stagehand.
Reactivating webdev 2.2.0...
Precompiling executables... (4.3s)
Precompiled webdev:webdev.
Installed executable webdev.
Reactivated 2 packages.

# Download packages
pub get
```

### 2. Getter not found: 'JSON'
> 错误提示：Error: Getter not found: 'JSON'.   
> 原因：json在新版flutter中升级了，由大写改成小写了。全部改小写就对了。


## Reference
- [Dart 快速入门](http://dart.goodev.org/guides/get-started)
- [Get started: web apps](https://dart.dev/tutorials/web/get-started)
- [一分钟学会 Dart 编程](http://wiki.jikexueyuan.com/project/learn-dart-in-minutes/)
- [Effective Dart](http://dart.goodev.org/guides/language/effective-dart)
- [How to use packages](https://dart.dev/guides/packages)