Build a Basic CRUD App with Laravel and Angular
This example shows how to use Laravel and Angular to create a basic CRUD app for hosting trivia games, using Okta to handle authentication.
Please read (Article Placeholder) to see how this application was built.
Prerequisites: PHP, Node, 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.
Sign up for an Okta developer account and create a new application. Make note of the Client ID and Issuer values for your application.
Clone this project using the following commands:
git clone firstname.lastname@example.org:oktadeveloper/okta-php-trivia-angular.git cd okta-php-trivia-angular
Set up the Backend
Create the database and user for the project:
mysql -uroot -p CREATE DATABASE trivia CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; GRANT ALL on trivia.* to email@example.com identified by 'trivia'; quit
Copy the example
cd trivia-web-service cp .env.example .env
Put the database details in the
DB_DATABASE=trivia DB_USERNAME=trivia DB_PASSWORD=trivia
app/Http/Middleware/AuthenticateWithOkta.php and replace the Okta credentials with your own.
Install the project dependencies, generate a project key, run the migrations and then start the server:
composer install php artisan key:generate php artisan migrate php artisan serve
Loading 127.0.0.1:8000 now should show the default Laravel page, and 127.0.0.1:8000/api/players should show you a 'Unauthorized' message. NOTE: if using a virtual machine and NAT, you might need to run the server as
php artisan serve --host 0.0.0.0 instead.
Set up the Frontend
Edit the Okta configuration in
src/app/app.module.ts to fill in your client ID and other application details. (Refer to the (Article Placeholder) for more details.) Then install the dependencies and run the server:
cd trivia-web-client-angular npm install -g @angular/cli@^6.1 npm install ng serve --open
NOTE: if using a virtual machine and NAT, you might need to run the server as
ng serve --open --host 0.0.0.0 instead.
Loading 127.0.0.1:4200 now should show you the application.
Apache 2.0, see LICENSE.