Open the Maven tool window and run Reimport All Maven Projects
to download project dependencies.
Navigate to src/main/java/com/luv2code/ecommerce/SpringBootEcommerceApplication.java
and run main to spin up a server on http://localhost:8080/.
Products: http://localhost:8080/api/product-category/1/products
- Product: http://localhost:8080/api/product-category{?page,size,sort}
- States: http://localhost:8080/api/states{?page,size,sort}
- Countries: http://localhost:8080/api/countries{?page,size,sort}
- Customers: http://localhost:8080/api/customers{?page,size,sort}
- Products: http://localhost:8080/api/products{?page,size,sort}
- Profile: http://localhost:8080/api/profile
This project was generated with Angular CLI version 8.3.18.
Run npm install
to download project dependencies.
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Run ng generate component component-name
to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Run ng test
to execute the unit tests via Karma.
Run ng e2e
to execute the end-to-end tests via Protractor.
Angular Front End - Product List
Integrating Online Shop Template
Search for Products by Category
Search for Products by Category (Dynamic Search Component)
Search for Products by Keyword
Product Master-Detail View
Pagination
Shopping Cart Status Component
Shopping Cart Items CRUD
Checkout Form Layout
Checkout Form - Drop-Down Lists
Checkout Form - Validation
Checkout Form - Review Cart Totals
Checkout Form - Save the Order to Database - Backend
Checkout Form - Save the Order to Database - Frontend
Security - Login/Logout
Security - User Registration
Security - VIP Member Access -Protected Routes
Security - Handling BrowserRefresh
Refactoring
- Change
SPRING_PROFILES_ACTIVE
toprod
. - Add the following to
package.json
.
"heroku-postbuild": "ng build --prod && npm install -g http-server-spa",
"start": "http-server-spa dist/webapp index.html $PORT",
- Add
baseUrl: 'http://localhost:8080/
toenvironment.ts'
. - Add
baseUrl: 'https://emiller-ecommerce.herokuapp.com/'
toenvironment.prod.ts
. - Change the
product.service.ts
to useenvironment.baseUrl
. - run
ng build --prod
in angular project root and copy the content ofdist
folder tosrc/main/resources/static/
. - create Procfile (for maven):
web: java $JAVA_OPTS -Dserver.port=$PORT -jar target/*.jar
- Ensure you have
spring-boot-starter-web
present in dependencies. It has the embedded tomcat and is automatically configured to serve static content from the static folder. - Enable dyno formation under
Resources
.
- Deploying Spring Boot Applications to Heroku
- Read this later
- Deploy Spring and Angular to same Heroku
Add JawsDB (MySQL) Hosted on Heroku
Open angular.json
and replace the outputPath
:
"outputPath": "../src/main/resources/static",
Then edit the Procfile:
web: ng build --prod
web: java $JAVA_OPTS -Dserver.port=$PORT -jar target/*.jar
The ng generate command is used to generate and/or modify file based on schematic.
ng generate <schematic> [options]
ng g <schematic> [options]
ng g module environments/environment
<schematic >
: It specifies the schematic or collection:schematic which you want to generate. It can take one of the following sub-commands.
- appShell
- application
- class
- component
- directive
- enum
- guard
- interface
- library
- module
- pipe
- service
- serviceWorker
- universal
To get more help on the Angular CLI use ng help
or go check out the Angular CLI README.
This app is hosted at https://app.infinityfree.net/
$ heroku login
$ heroku create
$ heroku apps:rename emiller-ecommerce
$ git push heroku master
$ heroku open
$ heroku logs --tail
# Attach a databse
$ heroku addons:create heroku-postgresql
$ heroku config