Setup - adarshpastakia/aurelia-ui-framework GitHub Wiki

Prerequisites

• Install NodeJS version 4.x or above. Download it Here

• Install aurelia-cli, gulp-cli and typings

  sudo npm i gulp-cli aurelia-cli typings -g

---

Create aurelia project

au new --here
npm i aurelia-ui-framework -S
npm i gulp-compass gulp-plumber del -SD

npm i lodash

typings i dt~moment dt~numeraljs -S -G
typings i lodash -S

• Copy skeleton files into [project_folder]

  Download the skeleton archive

• Update tsconfig.json

  "exclude": [
    "node_modules/{!aurelia-ui-framework}/*",
    "aurelia_project"
  ],
  "filesGlob": [
    "./src/**/*.ts",
    "./test/**/*.ts",
    "./typings/index.d.ts",
    "./custom_typings/**/*.d.ts",
    "./node_modules/aurelia-ui-framework/dist/typings/**/*.d.ts"
  ]
  

• Update aurelia_project/aurelia.json

  Update the transpiler

  "transpiler": {
    "id": "typescript",
    "displayName": "TypeScript",
    "fileExtension": ".ts",
    "dtsSource": [
      "./typings/**/*.d.ts",
      "./custom_typings/**/*.d.ts",
      "./node_modules/aurelia-ui-framework/dist/typings/**/*.d.ts"
    ],
    "source": "src/**/*.ts"
  },
  

  Append the following to bundles

  {
    "name": "framework-bundle.js",
    "prepend": [
      "node_modules/whatwg-fetch/fetch.js"
    ],
    "dependencies": [
      "lodash",
      "moment",
      "numeral",
      "aurelia-fetch-client",
      {
        "name": "kramed",
        "path": "../node_modules/kramed/lib",
        "main": "kramed"
      },
      {
        "name": "aurelia-validation",
        "path": "../node_modules/aurelia-validation/dist/amd",
        "main": "aurelia-validation"
      },
      {
        "name": "aurelia-ui-virtualization",
        "path": "../node_modules/aurelia-ui-virtualization/dist/amd",
        "main": "aurelia-ui-virtualization"
      },
      {
        "name": "aurelia-ui-framework",
        "path": "../node_modules/aurelia-ui-framework/dist/amd",
        "main": "aurelia-ui-framework"
      }
    ]
  }
  

• Add npm scripts to package.json

"scripts": {
  "start": "au run --watch",
  "staging": "au build --env stage && gulp production",
  "production": "au build --env prod && gulp production"
}

• Run app

  gulp sass
  npm start
  

• Building Project

  • Production: npm run production
  • Staging: npm run staging