search

borysn / spring-boot-angular2

spring boot backend, angular2 frontend with webpack, typescript, sass, bootstrap4, karma, jasmine
MIT License
386 stars 221 forks source link

[Question] How do deployments work (without webpack devserver)? #20

Closed Manningham closed 7 years ago

Manningham commented 7 years ago

Since the web app is hosted by the webpack server in development, how does one go about deploying the web service and the app to Heroku, for example?

I see that there's a single-server branch which includes the web app in the jar... is this the preferred method?

Sorry for the broad question... stepping into some unfamiliar territory here.

borysn commented 7 years ago

@Manningham no it's no pretend, give it a go! The web app is hosted via the tomcat server, just like the java backend.

Manningham commented 7 years ago

Hmm in development (running gradle clean build runAll) I see that Tomcat is running the java backend on 8080, but I also see webpack-devserver hosting the frontend web app on 3000.

Does this mean the Tomcat server wraps and runs the web application using the webpack-devserver?

borysn commented 7 years ago

@Manningham you are using the incorrect branch, the single-server branch does not have webpack as a dependency, instead the application is packaged using systemjs, and hosted on tomcat in the build/generated-web-resources/static dir.

if you would like to use the single-server branch you have two options

  1. git clone straight to selected branch
    • $ git clone git@github.com:borysn/spring-boot-angular2 -b single-server
  2. git clone master && checkout selected branch
    • $ git clone git@github.com:borysn/spring-boot-angular2
    • $ git branch (just list branches)
    • $ git checkout single-server (pull single-server branch)
    • $ git branch (just list branches)
      • now you can switch between master and single server

please also note, if you run into any front-end build issue using the single-server branch, try locking all front-end dependencies to the specified version. i am in the process of updating this branch to use jspm. currently i use gulp to copy necessary dependencies for front-end to the tomcat static dir.

take a look at src/main/web/gulpfile.js to understand build tasks, as npm is not used as much in this branch.

borysn commented 7 years ago

@Manningham, missed the answer about heroku. heroku allows for deploying .jar and .war files, i'm not sure if they specifically use tomcat. your application is going to be packaged and built into a jar or war file via the java command, and you can host it anywhere that accepts a .jar or .war

Manningham commented 7 years ago

@borysn My bad, I should have been specific about the branch I was referring to:

Hmm in development (running gradle clean build runAll) I see that Tomcat is running the java backend on 8080, but I also see webpack-devserver hosting the frontend web app on 3000.

Does this mean the Tomcat server wraps and runs the web application using the webpack-devserver?

^ I was running off master. I'm confused about how this project can be deployed, since I don't see a way to host the frontend assets without running the WP devserver.

In contrast, the single-server branch makes more sense to me, if I'm understanding it properly - you build the frontend assets and pack them into the jar so that they are available when you deploy it. In my project which uses webpack, I guess I would just need to include index.html and the optimized bundles in the jar.

Edit: Btw thanks for time, will send another coffee your way once I've gotten this all sorted out :)

borysn commented 7 years ago

@Manningham when using master, you're really deploying two different servers, which is a more ideal for restful applications. you'll have your java backend hosted on one server, and your web app hosted on another.

when hosting your web app, you can use any server that's ready for npm. the webpack-dev-server is just a really basic html server, but you can host an angular app on anything that'll run javascript and html, which is basically any web server. apache, tomcat, nginx, etc.

all the webpack-dev-server does is allow you to access your bundled single-page app from a browser. many cloud hosting services like openshift, google cloud, bluehost, aws, etc. come with pre-configured server spin ups for npm apps.

Manningham commented 7 years ago

@borysn Awesome thanks for this, good to confirm that I'll be running two servers in order to deploy a project configured as it is in master, which seems like a really nice environment to develop in.

I am also considering pushing the SPA assets to s3 or hosting them on a cdn, will have to investigate to see which is most convenient to develop and maintain.

Thanks again for your help, I'll close this :)