Help setting up aurelia with nodejs

Help Requests
1

I am trying to learn nodejs, but am having a hell of a job trying to set up a new project to run with webpack, typescript, aurelia, nodejs, nodemon. Googling returns dozens of articles each with conflicting webpack.config.js setups.

What I’ve done so far:

au new --here using all the defaults for the webpack and typescript options.

created the directory structure:

src
--- client/ (all the aurelia stuff goes in here)
--- server/
--- server/server.ts
--- server/controllers
--- server/controllers/welcome.controller.ts

I changed aurelia.json

"paths":{
   "root":"src/client"
   . ..
}

I changed webpack.config.js to

const srcDir = path.resolve(__dirname, 'src/client');

I changed tsconfig.json to:

  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "sourceRoot": "client",
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "client",
    "skipLibCheck": true,
    "lib": [
      "es2017", "dom"
    ]
  },

Running au run --watch works fine, but of course it is only compiling the client stuff.

I’ve tried various scripts for `package.json’ such as:

  "scripts": {
    "watch-all": "npm run watch-server & npm run watch-client & nodemon --inspect private/src/server/server.js",
    "watch-server": "tsc -p tsconfig.json -outDir private --watch",
    "watch-client": "webpack --watch"
  },

I can get the server to run at the terminal by typing nodemon --inspect private/src/server/server.js, but that means that I have to use the scripts above which pollutes the directories with *.js and *.map files and also creates the private directory.

I had to change the compilerOptions in tsconfig.json to module: commonjs because running nodemon fails with `unexpected token import { import * as express from “express”}

What I would like to do is to setup webpack so that when I type au run --watch it also compiles the src/server directory as well as src/client and runs nodemon on port: 3000 without cluttering up the directories with *.js and *.map files.

All help much appreciated.
Many thanks
Jeremy

2

After more messing around, I’ve partially got what I want - well at least I can run nodemon.

I created a new tsconfig.json in src/server as follows:

{
  "compileOnSave": false,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "sourceRoot": "server",
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "server",
    "skipLibCheck": true,
    "lib": [
      "es2017", "dom"
    ]
  },
  "include": [
    "./src/**/*.ts",    
    "**/*",
    "./test/**/*.ts",
    "./custom_typings/**/*.d.ts"
  ],
  "exclude": [
    "./node_modules"
  ],
  "atom": {
    "rewriteTsconfig": false
  }
}

and added these scripts to package.json

  "scripts": {
    "watch-all": "npm run build-server & npm run watch-server",
    "build-server":"tsc -p src/server/tsconfig.json -outDir private --watch",
    "watch-server":"nodemon --inspect private/server.js"
  }

I can’t get npm run watch-all to work - it doesn’t call watch-server after calling build-server.
So I have to run in seperate terminals build-server and watch-server.

However, it would be really nice to automate everything from au run --watch.

Hoping that someone can guide me to get this working.
Thanks

3

well if your using the aurelia-cli then I think it uses gulp. Look in the aurelia-project folder and under tasks. There should be a run task which just uses gulp to build your project and then start webpack dev server. You could maybe alter it to run express concurrently?

1 Like