Angular Deployment Example

This example shows how to deploy Angular and Spring Boot to Heroku. It also shows how to deploy Angular to Firebase, Netlify, and AWS S3 using ng deploy.

Please read Angular Deployment with a Side of Spring Boot to see how this app was created. This blog post is the 3rd in a series. Other blog posts in this series include:

• Build a CRUD App with Angular 9 and Spring Boot
• Build Beautiful Angular Apps with Bootstrap
• Angular + Docker with a Big Hug from Spring Boot

Prerequisites:

• Node 12+
• Java 11+
• An Okta Developer Account

Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.

• Getting Started
• Links
• Help
• License

Getting Started

To install this example application, run the following commands:

git clone https://github.com/oktadeveloper/okta-angular-deployment-example.git
cd okta-angular-deployment-example

This will get a copy of the project installed locally. To install all of its dependencies and start each app, follow the instructions below.

Spring Boot Configuration

To create a new OIDC app for Spring Boot on Okta:

1. Log in to your developer account, navigate to Applications, and click on Add Application.
2. Select Web and click Next.
3. Give the application a name and add http://localhost:8080/login/oauth2/code/okta as a login redirect URI.
4. Click Done.

Create an okta.env file in the notes-api directory and copy your settings into it.

export OKTA_OAUTH2_ISSUER=https://{yourOktaDomain}/oauth2/default
export OKTA_OAUTH2_CLIENT_ID={yourClientId}
export OKTA_OAUTH2_CLIENT_SECRET={yourClientSecret}

NOTE: The value of {yourOktaDomain} should be something like dev-123456.okta.com. Make sure you don't include -admin in the value!

Start your Spring Boot app by navigating to the notes-api directory, sourcing this file, and starting your app.

cd notes-api
source okta.env
./gradlew bootRun

Angular Configuration

To create a new OIDC app for Angular on Okta:

1. Log in to your developer account, navigate to Applications, and click on Add Application.
2. Select Single-Page App and click Next.
3. Give the application a name, set the login redirect URI to http://localhost:4200/callback, and click Done.

Copy the issuer and clientId into notes/src/app/auth-routing.module.ts.

const oktaConfig = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin + '/callback',
  clientId: '{yourClientId}',
  pkce: true
};

Navigate into the notes folder and run:

npm install && npm start

Open your browser to http://localhost:4200, log in, and create notes to your hearts content!

TIP: If you get a CORS error, you'll need to add http://localhost:4200 as a trusted origin on Okta (API > Trusted Origins).

For instructions on how to deploy these applications to the cloud, please read the blog post!

Links

This example uses the following open source libraries from Okta:

• Okta Spring Boot Starter
• Okta Angular SDK

Help

Please post any questions as comments on the blog post, or visit our Okta Developer Forums.

License

Apache 2.0, see LICENSE.