• Features / Utilities
• How to Set Up
  • 0. Prerequisites
  • 1. Fork Scaffold Repository
  • 2. Launch Local Development Container
  • 3. Initialize Aurelia Application using aurelia-cli.
  • 4. Install Package Dependencies
  • 5. Create src directory
  • 6. Integrate ESLint and Prettier with VSCode
  • 7. Configure Webpack Dev Server for Docker
  • 8. Login Firebase Project
  • 9. Add npm script
• Usage
  • Run dev app
  • Build for production
  • Unit tests
  • Integration (e2e) tests
  • Author
  • Show your support
  • 📝 License

• Application Features
  • Firebase Integration
  • Aurelia hello world app with Sign-In dialog using Firebase Auth
  • PWA (Progressive Web Apps) (comming soon)
• Development Environment
  • Dockernized Local Development using VSCode Remote Development extension
  • VSCode ESLint Integration
  • ESLint Integration (Airbnb's base)
  • TypeScript ESLint Integration
  • Prettier Integration
  • CI/CD Pipeline using CircleCI (comming soon)

• Visual Studio Code
• Extension: Remote Development

For more details about VSCode Remote Development, see the official docs.

Fork this Scaffold and git clone it to your local.

$ git clone $YOUR_FORKED_PROJECT

# move project root directory
$ cd $YOUR_PROJECT_DIR

Launch VSCode workspace in your project root directory like this.

# launch VSCode workspace
$ code .

Then you can see the following dialog and press it. <<<< Attach IMAGE >>>>

After initializing your local development container, you can use Firebase CLI and Aurelia CLI.

$ firebase -h

$ au help
No Aurelia project found.
Global aurelia-cli v1.2.0
                      _ _          ____ _     ___
  __ _ _   _ _ __ ___| (_) __ _   / ___| |   |_ _|
 / _` | | | | '__/ _ \ | |/ _` | | |   | |    | |
| (_| | |_| | | |  __/ | | (_| | | |___| |___ | |
 \__,_|\__,_|_|  \___|_|_|\__,_|  \____|_____|___|

This project was bootstrapped based on following selected features:

webpack http2 web typescript htmlmin-max sass postcss-typical jest cypress vscode scaffold-minimum

Initialize Aurelia app like this.

# initialize interactively
$ au new --here

# or you can run with config options like this.
$ au new $YOUR_PROJECT --unattended \
  --here \
  --select http2,typescript,htmlmin-max,sass,postcss-typical,jest,cypress,vscode

npm install \
  firebase \
  firebaseui

npm install -D \
  eslint \
  eslint-config-airbnb-base \
  eslint-config-prettier \
  eslint-plugin-import \
  eslint-plugin-prettier \
  prettier \
  @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser 

Replace src directory generated by aulirea-cli with one under tmp directory.

$ rm -rf src && mv tmp/src .

Append additional settings to .vscode/settings.json like below to configure ESLint and Prettier extensions.

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "html.suggest.angular1": false,
  "html.suggest.ionic": false,
  
  /// append the following line ///
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    {
      "language": "typescript",
      "autoFix": true
    }
  ],
  "prettier.eslintIntegration": true,
}

Append host: '0.0.0.0' to Webpack's development server config in webpack.config.js like below.

  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true,
    // enable all network interfaces to allow access from out of Docker container
    host: '0.0.0.0',
  },

$ firebase login

$ 

That's all you need to do for local development!!
Enjoy your awesome development life!!

Run au run, then open http://localhost:8080

To open browser automatically, do au run --open.

To change dev server port, do au run --port 8888.

To enable Webpack Bundle Analyzer, do au run --analyze.

To enable hot module reload, do au run --hmr.

Run au build --env prod.

Run au test (or au jest).

To run in watch mode, au test --watch or au jest --watch.

You need the app running for integration test.

First, run au run and keep it running.

Then run au cypress to run cypress in interactive mode.

To perform a test-run and reports the results, do au cypress --run.

👤 pannpers

• Twitter: @panchan9
• Github: @pannpers

Give a ⭐️ if this project helped you!

Copyright © 2019 pannpers.
This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator