Clean repository from remote calls
wsloth opened this issue · comments
First of all, thanks for making this repository public. It has been frustrating to try to work with Angular2 in tandem with the .NET (Core) platform. This repository should be more known, because I know a lot of people are having frustrations with combining NG2 and .NET.
I basically want to host a SPA on the .NET platform. Whether this is Core of the full .NET platform does not matter, as my use cases are very simple.
I'd like to have my SPA communicate with a very basic backend for JWT authentication. I've noticed you have classes for this in place already, however you are making external API calls to a platform which is not in the repository.
Could you highlight how it's structured, or ideally, could you clean off the remote functionality for this repository and just use JWT verification in the backend that comes in this repository?
It'd also be nice to be able to load this repository in VS2015 and run it there, having the SPA hosted on IIS Express and making calls to the same host in the same process. I am willing to make a PR for this if I figure it all out.
Hi, there, thanks for the comment. I also hope this repository gets more known, because I put many months of work into it.
Currently we are using Active Directory for backend authentication. I do have an example of how to use a NodeJS backend API which sends a JWT to the browser and then allows the user into the app.
To be honest, my knowledge of .NET is limited, since I am the JS/CSS/HTML developer on this project., and I work with some .NET developers for the backend.
Could you highlight how it's structured, or ideally, could you clean off the remote functionality for this repository and just use JWT verification in the backend that comes in this repository?
When you say this, I'm a little confused what you mean, because typically the backend generates the JWT and the front end verifies it. If you can elaborate a little more, I'll try to help. Also, I will update the run configs for VS2015 to make it easier to run this project.
@wsloth I have just made some important updates to the project, to integrate better with Visual Studio 2015. Pull the latest to get these changes.
I finally figured out how to integrate webpack-dev-server with MSBuild, so you can just click Run "IISExpress" like normal, and it will spawn a new detached process to build the dev server. Let me know what you think.
By the way, in order to bypass the login page authentication, just enter username admin and click login - the login component will bypass server side authentication and let you into the app.
@IAMtheIAM Thank you for pushing these updates. Sadly I do not have much time to check out the progress or provide feedback.
I cloned the project and ran it in Visual Studio. The npm run command crashed halfway through because ngc wasn't available. After running npm i -s ngc and trying it again it could not find cross-env. After installing cross-env as well it started compilation correctly.
10% into the building process this error emerged:
PurifyCSS-Webpack-Plugin loaded, starting Webpack compilation...
10% building modules 2/4 modules 2 active ...omponents\services\utility.service.tsModuleNotFoundError: Module not found: Error: Can't resolve '../aot-compiled/src/app-components/app/app.module.ngfactory' in 'C:\Development\angular2-webpack2-dotnet-starter\src'
I will further look into this at another moment and post feedback here.
When you say this, I'm a little confused what you mean, because typically the backend generates the JWT and the front end verifies it. If you can elaborate a little more, I'll try to help.
I meant that I couldn't easily find a global 'picture' of what the application is supposed to do. Running it initially showed a login screen, so I was under the impression that this repository is an application that halfway during development was put on GitHub as a starter application.
It sounds to me like your node_modules didn't install correctly. I recommend blasting them out with npm run clean and then reinstall everything with npm run onetimesetup. If you already ran onetimesetup when you initially pulled the repo, then you can do npm run clean:install instead which will do the same without reinstalling globals.
If you still have build errors, run npm version and make sure your npm version is at least 3 or higher, and node is 4.4.7 or higher.
Lastly, if it still has trouble, make sure that you're using the globally installed npm and node the one bundled with Visual Studio, in the "External" folder. That is an old version which I have had problems with. The onetimesetup script should disable that by renaming "External" to "External_Disabled" however, only if VS is installed in the default directory. You can check and see by examining the onetimesetup command if the path to your "External" folder is correct.
I meant that I couldn't easily find a global 'picture' of what the application is supposed to do. Running it initially showed a login screen, so I was under the impression that this repository is an application that halfway during development was put on GitHub as a starter application.
Good point. I should include some screenshots so people know what to expect, because there is much more than just login screen. I added instructions on how to login without the backend server as well as made the default username admin. So now once you get it installed, you'll be able to see all the app functionality.
...and then reinstall everything with
npm run onetimesetup...
I feel stupid. That fixed all build problems, and it is now indeed nicely integrated with Visual Studio! Awesome! Thanks so much for your effort the last couple of days!
The application is now able to start and I am able to log in. The (demo?) application works mostly, neatly displaying some tools like KendoUI, CKEdit and Angular Material.
I am considering forking this and creating a very barebones version, just containing the build process and JWT authentication, so users can decide their own technologies instead of removing parts they don't need (which risks breaking everything due to missing dependencies). Let me know if you are willing to collaborate with me on providing a very stable but barebones starting point for all aspiring ASP.NET+Angular developers!
Glad that you got it working :-)
Let me know if you are willing to collaborate with me on providing a very stable but barebones starting point for all aspiring ASP.NET+Angular developers!
Absolutely. In fact, I was thinking about making a branch in this repo called "barebones" or "minimal" or something like that, which like you said, would only have the basic functionality. What do you think about that?
I'll need some feedback about what specifically we should keep, and then I could eliminate everything else. So far, you mentioned keeping:
- Visual Studio build process integration
- JWT Authentication
I would consider to add to the list:
- Login Page
- Angular 2 Route protection (so users cannot enter the app without getting JWT authentication passed)
- Existing helper "services" folder (appstate, authentication, data, route-protection, utility)
- AOT Compilation
- Some Webpack loaders and config (only necessary for what's left in the project)
- SASS compilation
- Existing app structure
- Existing screen layout
- Lazy Loading sub-modules
I would be able to strip out quite a lot of dependencies, routes, and misc code, even with this list. Let me know your thoughts on this as well, and if you think this is too much for a minimal/barebones branch. I'll get started on it and see what I can come up with here.
So far, you mentioned keeping:
- Visual Studio build process integration
- JWT Authentication
I would consider to add to the list:
- ...
I should have been more explicit, I fully agree that the points you mentioned should be in the barebones version. I'd also like to try working on easily switching between SASS, SCSS, LESS & Stylus (but I haven't checked if that's hard to do or not, it shouldn't be.)
I also prefer a branch over a fork, so I'd like to ask you if you can make me a collaborator so I can work in a separate branch 😄
Yes, I'll make you the first collaborator of the project 😄 Let me get the master branch all set up and protected with CI builds and then I'll get you added.
And its pretty easy to switch between SASS/SCSS, LESS, and Stylus. Thanks to webpack, all we need is a new webpack loader for each.
Cool, let's do this!
Also, is there a particular reason why the compiled application in aot-compiled and wwwroot is added to source control? I could add it to the gitignore if you want, but I'm more curious whether this was intentional or not.
Actually, the aot-compiled in the root of the application IS necessary for loading the app in AOT mode. But the stuff in wwwroot/compiled-src is not needed. I should probably remove that from source control as you mentioned. It was just some by-product of when I was trying to get AOT compilation working.
Alright, I'll reverse that in my gitignore then. I locally cloned and branched into branch/barebones and am making some changes including the gitignore. Whenever you add me as collaborator I will publish the branch.
Alright Wessel, I just added you as a collaborator.
Also, I just pushed some changes to master to update angular to 2.1.2 latest version, as well as removing the unnecessary files from the branch. So you'll want to pull those latest changes before pushing your new branch up.
Awesome! I will close this issue and create a new one to discuss the barebones functionality a bit further. Looking forward to collaborate with you!