0
Programming QuickApp Templates

QuickApp – ASP.NET Core 8 + Angular 17 startup project template

MIT license

A startup Angular 17 / ASP.NET Core 8 (cross-platform ) project template with an end-to-end login, user and role management implementation. As well as other common functionalities for Quick Application Development.

FOLLOW ME on twitter for important updates

NOTE: Please post support related topics in the help & support forum. For bug reports open an issue on github.

LIVE DEMO

This application consists of:

  • Template pages using Angular 17 and TypeScript
  • RESTful API Backend using ASP.NET Core Web API
  • Database using Entity Framework Core
  • Authentication based on OIDC/OAuth2 and ASP.NET Core Identity
  • API Documentation using Swagger
  • Client-side built on Angular CLI
  • Theming using Bootstrap 5

You get the benefits of:

  • A simple, not “overengineered” startup project template for Quick Application Development
  • A complete backend and frontend project structure to build on, with login, user and permission-based role management already integrated
  • Data Access Layer built with the Repository and Unit of Work Pattern
  • Code First Database
  • A RESTful API Design
  • Angular Directives Guidance
  • Angular Pipes Guidance
  • Angular Animations Guidance
  • Angular Services
  • Dialog and Notification Services
  • Configuration Page and Configuration Service
  • OIDC Service for quick integration of external OpenID providers
  • Integrated Social logins such as Google, Facebook, Twitter
  • Integrated Internationalization
  • Theming with SASS
  • Ready-to-use email API
  • Handling Access and Refresh Tokens with WebStorage (Bearer authentication) – No Cookies
  • jQuery Integration (Ability to use standard jQuery libraries)
  • CRUD APIs

Installation

  • [OPTION 1] Clone the Git Repository and edit with your favorite editor. e.g. Visual Studio, Visual Studio Code
  • [OPTION 2] Install Project template from the Visual Studio Gallery and follow the usual File -> New Project -> Web -> QuickApp – to create a new Project from this template. Lunch with F5 or Ctrl+F5 (The usual way)

Installation Notes

  • When creating a new project please wait for all dependencies (“dotnet restore” & “npm install”) to be restored.
    When using VisualStudio this is automatic, check the output window or status bar to know that the package/dependencies restore process is complete before launching your program for the first time.
  • If you get this error: Unable to resolve ‘OpenIddict’, do the below steps to add myget.org to nuget package sources;
    Copy the “NuGet.config” from the project folder to the solution’s folder (i.e. copy to the same folder location as your solutions file) and restart your IDE
    OR
    Add myget.org to your package sources in VisualStudio.
    Visual Studio -> Tools -> Options -> NuGet Package Manager -> Package Sources, Add “aspnet-contrib”, this URL “https://www.myget.org/F/aspnet-contrib/api/v3/index.json
  • If you get any other errors, consider running manually the steps to build the project and note where the errors occur.
    Open command prompt and do the below steps:

    1. run ‘dotnet restore’ from the two project folders – Restore nuget packages
    2. run ‘npm install’ from the project with package.json – Restore npm packages
    3. run ‘npm run dev-build’ from the project with package.json – Build webpack vendor packages
    4. Try running the application again – Test to make sure it all works

    *When I say “run from the project folder” I mean run the commands on the command line from those folders
    If any step fails, post the error details on the support forum for the needed assistance.

  • For help and support post in the support forum. For bug reports open an issue on github

Login

LOGIN WITH USERNAME OR EMAIL ADDRESS

  • Default Administrator Account
    • Username: admin
    • Email: admin@ebenmonney.com
    • Password: tempP@ss123
  • Default Standard Account
    • Username: user
    • Email: user@ebenmonney.com
    • Password: tempP@ss123

Documentation

Contribution

QuickApp is actively maintained by Ebenezer Monney on GitHub. You can support it by

  • Submitting your changes/improvements/features using pull requests
  • Suggesting ideas or areas of improvements
  • Encouraging the developers by rating it/starring it
  • Linking to it and recommending it to others
  • Making a donation

License

Released under the MIT License.

YOUR FEEDBACK | FOLLOW ME

If you found this template useful, please take a minute to rate it. Appreciated!

You Might Also Like...

20 Comments

  • Reply
    Dev Sharma
    February 6, 2018 at 4:08 pm

    Hi Eben,
    Thanks for great post, I ‘m trying to learn Angular for better opportunity. I have gone through your excellent post. But I’m trying to implement it from scratch how should I proceed?
    Query : UpdateUser with “UserEditViewModel” parameter AND UpdateUser with “JsonPatchDocument” in this case when Patch request will be called?

    BR,
    Dev

  • Reply
    Eben Monney
    February 10, 2018 at 2:50 am

    Hi Dev,
    The Http PATCH API is another way to updating your models. In this case it is not used in the Angular frontend but is an implementation example for when you might want to use it.
    The template uses Http PUT which is a much simpler approach to updating data through a REST API

    • Reply
      Michael Robert Wassermann
      March 26, 2018 at 8:00 pm

      I am having trouble with the Angular App. It does not create the Database, I am using SQL 2017

      Any ideas

      • Reply
        paa kwasi
        August 14, 2018 at 5:46 pm

        As far as i know, Angular is not responsible for creating Database. You will have to fall on .NET Core or Entity Framework as you are using SQL 2017 to accomplish that.

        Please read more from here http://ankitsharmablogs.com/asp-net-core-crud-using-angular-5-and-entity-framework-core/

        NOTE: QuickApp – ASP.NET Core 2.1 + Angular 6 startup project template has it all done for your.
        You don’t have to worry to go through all those configuration and setting. All you need is to understand them.

      • Reply
        Dave Campbell
        November 21, 2018 at 4:00 am

        You’ll need to update your connection string and then run the ps command update-database.

      • Reply
        Dave Campbell
        November 21, 2018 at 4:01 am

        You’ll have to update the connection info and then run the ps command update-database

  • Reply
    Pratishtha
    April 20, 2018 at 10:32 pm

    Hi. I am unable to debug the application using chrome developer tools .Is there ant seeting i can make to make it to debug and show on the source tab .

    • Reply
      paa kwasi
      August 14, 2018 at 5:37 pm

      To Debug In Chrome.

      1. From Visual Studio, Select Web Browser from the Debug Target dropdown and Click Google Chrome from the sub-menu.
      2. Again, set the debug target as the name of your application.
      3. Start the debug process, which opens chrome.
      4. Press F12 to open chrome developer tools window after the application is started.
      5. Select the Sources Tab and navigate to webpack://.
      6. Double-click the folder without a name. and from there you will see src folder
      7. Navigate to the file you wish to debug and place your breakpoints, and refresh the page .

  • Reply
    Khurram Ali
    May 16, 2018 at 12:06 pm

    Your template is very good it would be more appreciated if you guide us how to deploy on IIS

  • Reply
    Amit
    May 21, 2018 at 7:41 pm

    Hello Eben,

    It’s really a nice post and appreciated your efforts.
    Can we publish and run the solution from IIS with all dependencies as I tried publishing the solution using Visual Studio but getting the below error:

    Severity Code Description Project File Line Suppression State
    Error Can’t find Python executable “python”, you can set the PYTHON env variable. Quick_Application1 EXEC 0
    Error The command “npm install” exited with code -1. Quick_Application1 C:\Users\xvatyagi\source\repos\Quick Application1\Quick Application1\Quick_Application1\Quick_Application1.csproj 61
    Error not found: python2 Quick_Application1 EXEC 0
    Error 1 Quick_Application1 EXEC 0
    Error not found: python Quick_Application1 EXEC 0
    Error not found: python Quick_Application1 EXEC 0
    Error not found: python2 Quick_Application1 EXEC 0

  • Reply
    paa kwasi
    August 14, 2018 at 5:20 pm

    To depoly on IIS,

    1. SET UP IIS.
    a. Install .NET Core Windows Server Hosting bundle.
    b. Add Windows Feature – Internet Information Services, using
    Turn Windows features On or Off.

    2. BUILD ANGULAR PROJECT FOR PRODUCTION
    a. Make a production build

    3. PUBLISH APP FILES TO IIS
    a. Right click on the Project Name and click on Publish,
    b. Choose Folder option from the publish target or destination options
    c. Browse and select preferred publish destination.
    c. Click on Publish Button.

    4. FINISH IIS CONFIGURATION
    a. Launch IIS Manager, right click on Default Website and Click on Add Application
    c. Type the preferred_app_name_on_iis used in building angular app in alias field.
    d. Browse to the folder where you published files to on the server from the Physical Path field.
    e. Click on OK.
    g. Click on Application Pool and Create a new application pool.
    h. Set the .NET CLR verions to –> No Managed Code, and the Managed Pipleline Mode to –> Integrated. Also Check the Start Applicaton Pool Immediately check box.

    Please let me know if you get any challenge..

  • Reply
    Benjamin
    September 22, 2018 at 6:48 am

    Hello Eben,
    This is my first time to try out your quickstart app using VS 2017. I have quick question, when I initial launched the application, I’m expecting the database to be created in my local SQL Server 2016 server, but I cannot see the database. Any steps I missed?

  • Reply
    Krishna
    October 26, 2018 at 2:59 pm

    Hello,
    I am facing issue after publish. Application is not working at all after publish on live.Please Help Me

  • Reply
    Krishna
    October 26, 2018 at 3:00 pm

    Hi,
    I am facing issue after publish. Application is not working at all after publish on live.Please Help Me

  • Reply
    Rajesh
    December 7, 2018 at 5:07 pm

    can i use this theme and code for commercial purpose?

  • Reply
    dodo
    February 17, 2019 at 1:30 pm

    Super Great Template. tnx !

    However:

    Client-side:

    1. It’s not using bootstrap v4 as described but v3.
    2. I would use “primeNg” nstead of “ngx-datatable” for tables. it has much more futures.
    3. I think that each component has to hod it’s own folder and subfolders as it’s children components and not on folder for everything: “./ClientApp/src/app/components/controls/”.

    That’s for now…

    Still, I like this template very much !

  • Reply
    aisyar
    October 22, 2019 at 3:32 am

    Awesome QuickApp! btw, can you tell us how our project keep latest update?

  • Reply
    Mitesh
    January 15, 2020 at 5:11 am

    Hey Eben,
    i am new to .net core and angular.
    can you please upload document or video of how to create quick app from beginning.

  • Reply
    Vivek Lakhataria
    February 5, 2022 at 5:58 am

    Hello Eben,
    I have used ur template in angular but i want in react js

    • Reply
      Eben Monney
      August 9, 2022 at 12:11 am

      Hello Vivek,
      We have plans for a react version in the future. But for now I can’t give you a timeline on it.

Leave a Reply