Publishing Angular 2 app (deployment)

Question

Finally I finished the hard part of my angular 2 application, and i want to see it live on the server.

I have Linux web hosting I'm hosting PHP & SQL websites and I am wondering how I can host the angular 2 app, since I'm running it using npm start.

Someone told me about Amazon EC2, but i'm not sure how it works since it my first time hosting such application.

I read this: About publishing Angular 2 application and noticed I need to compile my app with JSPM(?) and use it somehow. So I tried to use it. it created jspm_packages folder in my app root, but I have no idea what it meant to be or how to use it.

Any help how to publish my app with web hosting or Amazon EC2/Any other way I can allow other people to see and use my app? My app is Angular2 and Laravel as backend.

score 3 · Answer 1 · edited May 23 '17 at 11:54

3

In fact there are two steps here:

Package your application with Gulp or another tools like Webpack / JSPM. See this question in the case of Gulp:
- How do I actually deploy an Angular 2 + Typescript + systemjs app?
Upload the corresponding files within a static web server.

For the second step, the server can be hosted on EC2 for example. But you can notice that you can even host it on Github with gh-pages. I think that this link could help you: https://gist.github.com/chrisjacob/833223. In fact it depends on your need...

edited May 23 '17 at 11:54

Community

1
1

answered May 31 '16 at 16:56

Thierry Templier

198,364
44
396
360

Thanks, but wht what file exactly I need to upload to my server? In your guide I generated a dist folder with `app.min.js`, vendor and index.html. do I need to gulp them again after every .ts file update? – TheUnreal Jun 03 '16 at 14:39
You need to upload the content of the `dist` folder. Yes you need to execute gulp again after every update... – Thierry Templier Jun 03 '16 at 15:31

score 0 · Answer 2 · edited May 23 '17 at 12:02

If you are referring to elastic beanstalk nodejs ec2, then this answer is best for you, as it took me a while to figure this out, but it turns out to be easier than I thought:

Following this link with some modifications I did to avoid /usr/bin/env: node: No such file or directory issues, I added the following script

.ebextensions/angular2deployment.config

files:
  "/opt/elasticbeanstalk/env.vars" :
    mode: "000775"
    owner: root
    group: users
    content: |
      export NPM_CONFIG_LOGLEVEL=error
      export NODE_PATH=`ls -td /opt/elasticbeanstalk/node-install/node-* | head -1`/bin
  "/opt/elasticbeanstalk/hooks/appdeploy/pre/50npm.sh" :
    mode: "000775"
    owner: root
    group: users
    content: |
      #!/bin/bash
      . /opt/elasticbeanstalk/env.vars
      function error_exit
      {
        eventHelper.py --msg "$1" --severity ERROR
        exit $2
      }

      #install not-installed yet app node_modules
      if [ ! -d "/var/node_modules" ]; then
        mkdir /var/node_modules ;
      fi
      if [ -d /tmp/deployment/application ]; then
        ln -s /var/node_modules /tmp/deployment/application/
      fi

      OUT=$([ -d "/tmp/deployment/application" ] && cd /tmp/deployment/application && $NODE_PATH/node $NODE_PATH/npm install 2>&1) || error_exit "Failed to run npm install.  $OUT" $?
      echo $OUT
  "/opt/elasticbeanstalk/hooks/configdeploy/pre/50npm.sh" :
    mode: "000666"
    owner: root
    group: users
    content: |
       #no need to run npm install during configdeploy

Delete node_modules & dist folder if you have, both are not needed.
Run npm install && npm start (this step must be successful), note that I'm using the angular2's default package.json See Angular.IO Deployment
If #3 is successful, then you can re-delete node_modules again
Select All files & folders in the project (make sure .ebextensions is selected as well), and then compress them, do not compress the top folder (you will have subdirectory when deploying which will break the deployment)
Now you can deploy that compressed file and enjoy!

If you are using MacOS, while compressing, macos will add macos folder which will break the deployment, make sure using a tool that won't add this extra directory, in my case I used YemuZip

Additional note: EC2 elastic beanstalk will run npm install & npm start, this is why I would recommend running them and make sure that they are fine on your local environment

Publishing Angular 2 app (deployment)

2 Answers2

Linked