Git Product home page Git Product logo

fullstack-jobs's Introduction

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

Part 2: Angular app foundation with user signup and login features

Part 3: Implementing an ASP.NET Core GraphQL API with authorization using GraphQL .NET

Part 4: Integrating Angular with a backend GraphQL API using Apollo Client

The App

alt text

alt text

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 and GraphQL API 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
  1. 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.

FullStackJobs.GraphQL

  • The OpendIDConnect Authority in Startup
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

[email protected]

fullstack-jobs's People

Contributors

pgadea avatar

Watchers

James Cloos avatar  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.