Home

Server Deployment

heroku deployment

I was able to deploy the client and server side code together to a Heroku application. Here are the steps I took:

NOTE: I am deploying with GitLab continuous integration but these are the basics that should be able to send you in the right direction.

In the root of the project in the package.json I have this:

"scripts": {
    "start": "node ./server/dist/index.js",
    "postinstall": "cd server && npm install && cd ../client && npm install"
  },
  "engines": {
    "node": "9.2.0",
    "npm": "6.0.0"
  }

Of course you will need to find your own versions of node and npm. The post install here will install all the necessary packages in your server package.json and then switch to the client folder and install the client side packages.

Server Side Package.json

"scripts": {
    "build": "gulp",
    "start": "node dist/index.js",
    "postinstall": "gulp build"
  },

Post install will create the gulp build here and the entry point is in the dist/index.js file.

Client Side package.json

"scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ng build --prod --aot=true --build-optimizer=true"
  },

Post install here will make the production build of the application. For "start" I dont believe I need that entry, but I am not sure and have not tested it without.

Also, in the root of the project add a file called Procfile (no extension) and add this one line: web node server/dist/index.js

This tells Heroku wich Dyno you are using.

There are other particular specific to the GitLab integration but this is the basic setup with the package.json files to make sure they are performing their specific functions.

zeit.co deployment

I've successfully deploy to zeit separating the client and the server. Here are my steps:

1. first I attempted to deploy the server

cd server
now

No problems... so after a successful deploy... I did:

now alias https://socket-io-typescript-example-aknmfgiriy.now.sh mapdrops-api

I have a side project called mapdrops about analyzing run data and learning Angular 5. I used the alias 'mapdrops-api' to mark it as my API.

2. update the client to point to this new remote url https://mapdrops-api.now.sh instead of localhost:8080 and use the environment files as configuration.

export const environment = {
  production: true,
  url: 'https://mapdrops-api.now.sh'
};

Find src > app > chat > shared > services > socket.service.ts

import { environment } from '../../../../environments/environment';
import * as socketIo from 'socket.io-client';

//const SERVER_URL = 'http://localhost:8080';
const SERVER_URL = environment.url;

I ran client locally and it connected to the remote url so I felt confident to deploy it

now

After a successful deploy... I did the alias

now https://typescript-chat-client-djuavnsujl.now.sh mapdrops  

This time, when I checked the url https://mapdrops.now.sh in the browser I got:

Invalid host header

I encountered this problem yesterday and, while I don't have a perfect fix for it yet, this does work:

Edit package.json

"start": "ng serve --disable-host-check",

If anyone has a better solution here, I'd like to hear it ;-D

I deployed it again, did the alias, and both the client and server are talking to each other now:

working demo