Search code examples
angulardeploymentbrowser-synclite-server

Deploying Angular 2 application (without angular-cli)


I'm trying to deploy my application from my Linux server.

Everything works fine except for the fact that my lite-server command is not serving any files. Accessing my server at serverUrl:3000 throws a

'site takes too long to respond'

My scripts from package.json (I run npm start)

"scripts": {
    "build": "tsc -p src/",
    "serve": "lite-server -c=bs-config.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "test-once": "karma start karma.conf.js --test-once",
    "pretest:once": "npm run build",
    "build:watch": "tsc -p src/ -w",
    "build:upgrade": "tsc",
    "serve:upgrade": "http-server",
    "build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",
    "serve:aot": "lite-server -c bs-config.aot.json",
    "build:babel": "babel src -d src --extensions \".es6\" --source-maps",
    "copy-dist-files": "node ./copy-dist-files.js",
    "i18n": "ng-xi18n",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },

My bs-config.json. I had to add the "open" : false because the lite-server tried to open a browser which I didnt want.

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
   }, "open" : false
}

The output of this command is the following:

> [email protected] prestart /home/deploy/home/deploy/frontend
> npm run build


> [email protected] build /home/deploy/home/deploy/frontend
> tsc -p src/


> [email protected] start /home/deploy/home/deploy/frontend
> concurrently "npm run build:watch" "npm run serve"

[0]
[0] > [email protected] build:watch /home/deploy/home/deploy/frontend
[0] > tsc -p src/ -w
[0]
[1]
[1] > [email protected] serve /home/deploy/home/deploy/frontend
[1] > lite-server -c=bs-config.json
[1]
[1] ** browser-sync config **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   watchOptions: { ignored: 'node_modules' },
[1]   server:
[1]    { baseDir: 'src',
[1]      middleware: [ [Function], [Function] ],
[1]      routes: { '/node_modules': 'node_modules' } },
[1]   open: false }
[1] [BS] Access URLs:
[1]  ----------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://serverurl:3000
[1]  ----------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://serverurl:3001
[1]  ----------------------------------------
[1] [BS] Serving files from: src
[1] [BS] Watching files...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[1] [BS] Reloading Browsers...
[0] 9:42:13 AM - Compilation complete. Watching for file changes.

Everything works fine when I run this on my Windows machine, but there the files are actually being shown in the console as well. Any ideas?


Solution

  • Turns out my firewall was blocking the port.

    Opening the port solved the issue (ufw allow 3000)