Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mmacneil/fullstack-jobs
Real(ish) demo using Angular with ASP.NET Core GraphQL and IdentityServer.
https://github.com/mmacneil/fullstack-jobs
angular apollo-client aspnet-core entity-framework-core graphql identityserver4 sql-server
Last synced: 5 days ago
JSON representation
Real(ish) demo using Angular with ASP.NET Core GraphQL and IdentityServer.
- Host: GitHub
- URL: https://github.com/mmacneil/fullstack-jobs
- Owner: mmacneil
- License: mit
- Created: 2019-11-15T02:30:03.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T12:44:12.000Z (almost 2 years ago)
- Last Synced: 2023-02-28T15:11:24.631Z (over 1 year ago)
- Topics: angular, apollo-client, aspnet-core, entity-framework-core, graphql, identityserver4, sql-server
- Language: C#
- Homepage: https://fullstackmark.com/post/22/build-an-authenticated-graphql-app-with-angular-aspnet-core-and-identityserver-part-1
- Size: 4.88 MB
- Stars: 84
- Watchers: 9
- Forks: 30
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# fullstack-jobs
Real(ish) demo using Angular with ASP.NET Core GraphQL and IdentityServer.Based on the multi part tutorial series:
Part 1: [Building an ASP.NET Core auth server using IdentityServer](https://fullstackmark.com/post/22/build-an-authenticated-graphql-app-with-angular-aspnet-core-and-identityserver-part-1)
Part 2: [Angular app foundation with user signup and login features](https://fullstackmark.com/post/23/build-an-authenticated-graphql-app-with-angular-aspnet-core-and-identityserver-part-2)
Part 3: [Implementing an ASP.NET Core GraphQL API with authorization using GraphQL .NET](https://fullstackmark.com/post/24/build-an-authenticated-graphql-app-with-angular-aspnet-core-and-identityserver-part-3)
Part 4: [Integrating Angular with a backend GraphQL API using Apollo Client ](https://fullstackmark.com/post/25/build-an-authenticated-graphql-app-with-angular-aspnet-core-and-identityserver-part-4)
## The App
![alt text](https://raw.githubusercontent.com/mmacneil/fullstack-jobs/master/docs/img/angular-aspnet-core-job-application-flow.gif "Build an Authenticated GraphQL App with Angular, ASP.NET Core and IdentityServer")![alt text](https://github.com/mmacneil/fullstack-jobs/blob/master/docs/img/angular-aspnet-core-job-edit-flow.gif "Build an Authenticated GraphQL App with Angular, ASP.NET Core and IdentityServer")
## Development Environment
- .NET Core 3.1
- Visual Studio Code
- Visual Studio 2019 Professional for Windows
- SQL Server Express 2016 LocalDB
- Node.js with npm
- Angular CLI## Setup
To build and run the solution:
#### Get the Code
Clone or create a template from this repository.
#### Create the Sql Server Database
Use migrations to create the database as follows:
From the command line use the dotnet CLI to apply the migrations from each project's `Infrastructure` folder.
1.FullStackJobs.AuthServer.Infrastructure> dotnet ef database update --context PersistedGrantDbContext
2.FullStackJobs.AuthServer.Infrastructure> dotnet ef database update --context AppIdentityDbContext
3.FullStackJobs.GraphQL.Infrastructure> dotnet ef database update
#### Build and Run the AuthServer and GraphQL API Backend Projects##### Visual Studio for Windows
Open the `FullStackJobs.sln` solution file which contains both the [AuthServer](https://github.com/mmacneil/fullstack-jobs/tree/master/src/Backend/FullStackJobs.AuthServer) and [GraphQL API](https://github.com/mmacneil/fullstack-jobs/tree/master/src/Backend/FullStackJobs.GraphQL) projects. You must configure the solution to start up both projects. Once complete, start the solution in the debugger or use the CLI `dotnet run` command to run them individually.
*todo*: Add instructions for VS Code.
#### Build and Run the Angular Frontend Project
1. Use `npm` to install depdendencies from `package.json'.
Spa> npm install
2. Use the Angular CLI to build and launch the app on the webpack development server.
Spa> ng serve
#### View the App
Point your browser to *https://localhost:4200* to access the application.
#### Host Configuration
The `AuthServer` is configured to run at *https://localhost:8787* while the `GraphQL API` is set to *https://localhost:5025*.
If you need to change these locations for your environment there are several spots in the solution you must update.
*Angular*
- The `RESOURCE_BASE_URI` and `AUTH_BASE_URI` values in the [config service](https://github.com/mmacneil/fullstack-jobs/blob/master/src/Frontend/Spa/src/app/core/services/config.service.ts).*FullStackJobs.GraphQL*
- The OpendIDConnect `Authority` in [Startup](https://github.com/mmacneil/fullstack-jobs/blob/master/src/Backend/FullStackJobs.GraphQL/FullStackJobs.GraphQL.Api/Startup.cs)
services.AddAuthentication(options =>
{
options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
}).AddJwtBearer(o =>
{
o.Authority = "https://localhost:8787";
o.Audience = "resourceapi";
o.RequireHttpsMetadata = false;
});#### Contact