Git Product home page Git Product logo

java-angular-web-app's Introduction

Spring boot app with Angular 4 client embedded

       

Please donate whether you wish support us to give more time to app's growth

The frontend-app is gotten from :https://github.com/creativetimofficial/material-dashboard-angular. The project produces an only jar using maven spring-boot, that is you can implement java backend services, together the angular client developed in typescript (angular-cli). Download the zip of this branch or clone the git repo.

Description

The project is used to develop the client in the frontend-app folder with the angular-cli, and the java backend with the maven spring boot project configured. For this, import your client (frontend-app) in the angular/typescript IDE (i.e. visual studio code) and your maven java backend in Eclipse.

Functional informations

The steps to build the jar are defined in the pom.xml file. The project builds the frontend with the output folder frontend-app/dist and copies it in the src/main/resources/static folder in order to load the client in the spring boot home page together the java services. The port information is stored in src/main/resources/application.properties file in the server.port property.

Prerequisites

  • Angular cli:
npm install -g @angular/cli
  • JDK 8

  • The last Node.js version

  • MAVEN (to use mvn command else use in windows ./mvnw.cmd or in linux ./mvnw instead)

  • IDE ( i.e. Eclipse for java and visual studio code for typescript/angular projects)

Live

Execute in the main folder of this repo, if you have already built the frontend and there is the generated code in frontend-app/dist :

mvn clean spring-boot:run

else:

mvn clean spring-boot:run -Pbuild-ui

Open browser on localhost:8081

Build and run

If you have already built the frontend (i. e. after develop on visual studio code) and you have the generated code of the ng build in frontend-app/dist, execute in the main folder of this repo:

mvn clean package

If you want to build also the frontend, run:

mvn clean package -Pbuild-ui

After all cases run:

java -jar target/*.jar

Open browser on localhost:8081

Electron (not work with electron-packager)

Move app.jar in electron-app folder and in this run electron main after npm i electron -g. The port is specified in the electron-app/index.html.

THIS IS A PILOT IN DEVELOPMENT BECAUSE THE ELECTRON LIVE WORKS BAD IN RENDERING AND ELECTRON-PACKAGER INSTEAD BREAKS.

Deploy jar on heroku

Create an account on keroku (https://www.heroku.com/)

After install the heroku-cli

npm install -g heroku-cli

Then:

heroku plugins:install heroku-cli-deploy

heroku create spring-boot-angular-app2  --no-remote

To deploy the jar file, execute in the main folder of this repo:

heroku deploy:jar target/app.jar --app spring-boot-angular-app2

View in : https://spring-boot-angular-app2.herokuapp.com/.

Live demo heroku deployed jar

A demo is on https://spring-boot-angular-app.herokuapp.com/

java-angular-web-app's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.