npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

generator-pwa-angular-core

v1.0.5

Published

PWA Angular 4 project that uses .NET Core and Entity Framework

Downloads

88

Readme

Yeoman PWA Angular 4 & .NET Core

A way to quickly generate a progressive web app that uses Angular 4, .NET Core, and Entity Framework. This application can be added to your desktop, or homescreen on iOS or Android devices. Live demo: https://angularcore.azurewebsites.net/home

  • The API example (Todo list) does not work in demo (no SQL server configured in Azure).

Features

How To Get Started

  1. First, install the scaffolding tool Yeoman and the PWA Angular Core template.
npm install -g yo
npm install -g generator-pwa-angular-core
  1. Install .NET Core you should be able to find documentation on getting it up and running at the provided link.
  2. Install Angular CLI
npm install -g @angular/cli
  1. Open the command prompt and navigate to where you want the project to be located. Then run yo and then select "Pwa Angular Core"
yo
  1. You will be prompted on to enter values for the namespace, and a prefix for your components.
  2. This will take a couple minutes for all files to be copied, packages to be installed, and for webpack to compile your resources.
  • If any errors occur during this step try running "dotnet restore" or "npm install" to find out what packages are causing issues.
  1. If everything installed correctly you can now run the project by running the following command.
set ASPNETCORE_ENVIRONMENT=Development or setx ASPNETCORE_ENVIRONMENT "Development" (in powershell)
dotnet run
  1. Navigate to https://localhost:5001

9. To create your migration in your SQL server be sure the connection string in appsettings.json is correct (I use the local SQL database that comes with my Visual Studio installation). Then run the following commands to create the tables. The Todo API Example should now work.

dotnet ef migrations add InitialMigration
dotnet ef database update
  1. You can rebuild the compiled dist folder by first cleaning out the old folders then rebuilding.
npm run clean:dist
npm run build:dev

Deployment

I have not perfected the deployment to production but by running

set ASPNETCORE_ENVIRONMENT=Production or setx ASPNETCORE_ENVIRONMENT "Production" (in powershell)
npm run clean:dist
npm run build:prod

This will clean your dist folder and run your use the Webpack configuration to compile production resources using AOT and different plugins to reduce project size. From here you can publish the file to an Azure App Service or whatever hosting service you decide to use. I was not able to get the Azure command line tools working to publish the file and ended up using simple FTP to get the files deployed.

Updates

  • 1.0.4 first release.

Development Tips

  • I recommend using Visual Studio Code for development.
  • Here are some extensions to use inside VS Code that make your life easier.
  • All the icons for iOS and Android devices can be generated using RealFavIconGenerator.
  • Be sure to check out the Angular CLI commands for generating components, services, and models.

Credit

Be sure to check out the following projects. I simplified some aspects of Asadsahis .NET Core configuration and used MarkPieszaks project for inspiration. Both are great resources on how to do certain things within Angular & .NET Core. Progressive Web App Tutorial Asadsahi AspNetCoreSpa Template MarkPieszak Aspnetcore Angular 2 Universal

Areas for Improvement

  • Get lighthouse score to 100/100 currently at 82.
  • Reduce project size.
  • Angular Material 2 Treeshaking

Be sure to star the repo if this was helpful. I am planning to keep this updated and continue to improve functionality as Angular and .NET Core evolve. Make sure you are getting the updated Yeoman generator when scaffolding the project. You can update by running the yo command then selecting "Update your generators".