I'm developing with ASP.NET Core, and am using jspm, with Visual Studio 2017 RC and WebStorm.
It seems that jspm init expects your absolute lowest level, root folder with EVERYTHING is always going to be wwwroot, and thus the path it establishes (and even more rigidly enforces in jspm 0.17.x beta) iswwwroot/jspm_packages`
However, a new ASP.NET Core project sets up with the node_modules directory, and by proxy the packages.json file, just outside of wwwroot.
Obviously, I can move the file - but it puzzles me that they're different. Some people say "just use a gulp task" but that isn't really an option. I tried that route and it was a complete nightmare to maintain. Plus, jspm seems to load things directly from its package store by default.
So which is it? Is there an inherit problem with the jspm_packages folder being a sibling to the wwwroot folder? Using the UseStaticFiles option in the configuration allows me to specify access to folders outside of wwwroot.
wwwroot is your public folder, this way, all your assets must be inside of it.
You can configure npm to install modules inside wwwroot folder. Take a look in this config page from npm documentation.
However, I recommend you to put your files outside the wwwroot folder, and then, send to wwwroot only the files you're gonna use.
Grunt and Gulp are very simple and useful. If you want to give it a try, take a look in this tutorial. There you can find an example of how to use Grunt with VisualStudio
Related
I am using VS 2019 for Core 3.1 development and I installed Font Awesome whith Yarn:
yarn add #fortawesome/fontawesome-free
However, whenI try to reference it in my HEAD section like this:
<script defer src="~/lib/#fortawesome/fontawesome-free/js/all.js"></script>
I get the following error:
the 'fortawesome' doesnt exist in actual context
Package managers like yarn, npm, etc. just add the packages to your project. They generally aren't ready to deploy directly at that point, but rather require a build pipeline to create the actual JS/CSS resources. The #fortawesome/fontawesome repo is an exception in that 1) it's not actually a package and 2) the files are already "built". Even then, though, they still won't be in the right location.
I'm not overly familiar with yarn, but npm, for example, puts everything in a node_modules directory. That directory is not served by default, and should not be served, because it contains "raw" stuff. You'd need a separate build pipeline (using npm scripts, webpack, gulp, etc.) to build/copy assets into a directory that is served (i.e. wwwroot). That is likely the piece you are missing.
For this, since there's no build actually required, you just need to have the assets copied to something like wwwroot/lib and then you'll be able to reference it via the script tag on the page. That can be done with any tool like npm, webpack, gulp, grunt, etc. so you'll just have to research and pick the one that fits your needs best.
I've created a web app template that I use frequently for many different projects.
I would like to create an NPM package for it so that it's easier to install for new projects, separate the template from the project files, separate the template dependencies from the project dependencies, and allow easier updating of the template across all projects.
The issue I have is that I need some files/folders to be installed in the root directory (i.e. where package.json is saved). Most can go in the node_modules folder however I have some files that must be placed in the root directory.
For example, the template uses Next.js with a custom _app.js file. This must be in the root directory in a folder named pages. I also have various config files that must be in the root directory.
Can this be done with NPM, or does everything need to be installed in the node_modules folder? I'm having trouble finding anything on SO or Google that answers this, so if you happen to know a guide online on how to do this or can outline things I should search for it would be much appreciated.
With pure npm, everything has to go to the node_modules folder, so you can't solve your issue this way.
Maybe going with a templating tool such as grunt init or yeoman could be a solution here, although – unfortunately – you'll then lose some of the benefits of being able to install a package via npm.
Another option might be to use GitHub template repositories, which have just been introduced recently.
Last but not least one option might also be to just have the files' contents in the npm package, but create the pages/_app.js manually, but inside of it simply require the file contents from an npm module, and that's it. This at least helps to have the content portable, but of course it still asks you to setup the file and folder structure on your own.
Sorry that I don't have a better answer, but I hope it helps anyway.
PS: One "solution" might also be to use the postinstall step in an npm module's package.json file to create folder structure, copy files to where they should be and so on, but at least to me this feels more like a clumsy workaround than like a real solution.
I have asked a similar question earlier: ASP.NET core 2.0 MVC project. Should wwwroot be excluded from source control? and was pointed to a .gitignore file at https://github.com/github/gitignore/blob/master/VisualStudio.gitignore that is continuously being updated.
When you create a new ASP.NET Core project (Razor in my case), a bunch of files are automatically generated under wwwroot folder. According to the comment in the .gitignore file, as wwwroot folder contains static files, it can safely be excluded from source control check-ins. However, I see a bunch of bower.json files under this folder:
./wwwroot/lib/jquery-validation-unobtrusive/.bower.json
./wwwroot/lib/bootstrap/.bower.json
./wwwroot/lib/jquery/.bower.json
./wwwroot/lib/jquery-validation/.bower.json
My question is, even if I exclude wwwroot folder, shouldn't we need to check in these bower files to re-build wwwroot folder on a new machine?
First, wwwroot should not be ignored. That's where your project's static resources should go, and you'll need those committed to source control to track changes to CSS, JS, etc. However, the wwwroot/lib folder should be ignored, as these are external libraries that can be restored; you only want to commit your code, not other people's.
The .bower.json files are pulled in from restoring those bower packages, so that's not something you need to have in your source control. It's similar to npm's package.json files, which are actually part of the package itself.
You misunderstood the comment. It says
Uncomment if you have tasks that create the project's static files in
wwwroot
It should be ignored only if everything in your wwwroot is autogenerated, via bower, npm or other (it's the same for NuGet and packages folder). But, since it's used also for user-managed static files (js libs, images, ...), it can't be ignored by default.
I'm attempting to use Jasmine in a brand new ASP.Net Web Application but I feel like I'm doing it wrong.
My current structure looks like this:
where the code that I'm writing is in my WebResources folder, the spec-runner.html is in my test folder, and when I build, the gulp file moves both the test and WebResources to the wwwroot. This allows me to access the spec-runner.html file from the browser so I can debug, but all references to the node_modules folder are of course failing since it's outside of the wwwroot folder.
I'm just using the ASP.Net core Web Application to run the spec-runner.html file. Is there an easier way? If not, how do I determine what files from the node_modules folder to move? Moving all feels like overkill...
For an ASP.NET core web application (use Visual Studio 2017), when using bower to install a package(eg: alertifyJS), bower download all the files related to alertifyJS under wwwroot/lib folder, like build, docpad, src and some other files.
When publish/deploy the project (I choose to publish to file system), folders like src, docpad and some other files, are useless, but still get published (copied).
Is there a way to exclude some of the files/folders under wwwroot/lib from being published, so that I don't need to remove the files manually?
I will answer my own question in case someone has the same issue/question.
For the unused folders, choose to "excluded from project", for the unused files, change the build action from "default (content)" to "None".
I am not sure this is the right way to do it, but it works.