Welcome to scaffold-aurelia-firebase-pwa 👋

• Features / Utilities
• How to Set Up
  • 0. Prerequisites
  • 1. Duplicate 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

Features / Utilities

• 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)

How to Set Up

0. Prerequisites

• Visual Studio Code
• Extension: Remote Development

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

1. Duplicate Scaffold Repository

Duplicate this Scaffold repository following this GitHub help.

https://help.github.com/en/articles/duplicating-a-repository

2. Launch Local Development Container

Launch VSCode workspace in your project root directory like this.

# launch VSCode workspace
$ code .

Then you can see the following dialog and press it.

3. Initialize Aurelia Application using aurelia-cli.

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

4. Install Package Dependencies

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 

5. Create src directory

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

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

6. Integrate ESLint and Prettier with VSCode

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,
}

7. Configure Webpack Dev Server for Docker

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',
  },

8. Login Firebase Project

$ firebase login

9. Add npm script

Add deploy command to npm script like this.

  "scripts": {
    "build": "au build",
    "start": "au run",
    "test": "au test",
    "deploy": "au build --env prod && firebase deploy --only hosting"
  },

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

---

Usage

Run dev app

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.

Build for production

Run au build --env prod.

Unit tests

Run au test (or au jest).

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

Integration (e2e) tests

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.

Author

👤 pannpers

• Twitter: @panchan9
• Github: @pannpers

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2019 pannpers.
This project is MIT licensed.

---

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