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...
Related
I have developed a vue application and did run npm run build
After that I uploaded the content in the dist file to my webpage but it returned a blank page.
Since I did this for testing I uploaded it to a folder in my public_html/mypage.com/vueapplication To get all the paths right I added a vue.config.js with this content:
// vue.config.js
module.exports = {
publicPath: '/vueapplication/'
}
The application now works but I wounder however:
how do I best publish/upload the application to my site? Just by simply dragging the content inte the right folder?
how can I best maintain my site? Do I need to build again and upload, overwriting my files when everytime I make an update on my site?
And what is the difference between build and deploy your application?
Drag and dropping your code should work. But as your app grows you may want to look into automating this. For instance if you use an S3 bucket you can use the aws cli to automate the upload.
Yes, you should overwrite your deploy folder(s). You need to also take care of deploying different binary files, that have the same name. An example is if you have a global css file (main.css for instance). The file will probably change content between deployments, but keep the same name. Browsers may cache the file so users that downloaded older versions of the file will not use the new one. There are different techniques to handle this, but if you use webpack, it uses cache busting techniques and you should be fine.
Build is the process of transforming source code into an artifact(s). Exactly what this means differs from language to language, platform to platform. In the vuejs world this usually means a couple of js files, a couple of css files and some assets.
Deploying means taking the output of a build and making it available to your users. Again this differs from project to project. In the vuejs world this usually means taking the artifacts from the build and uploading them to an http enabled web server.
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.
When using Angular 5 with ASP.NET Core, a new Visual Studio project contains both a wwwroot folder and an assets folder:
The question is: In which folder should static content (images, css, etc.) be placed, and when would you use one vs. the other?
According to answers online, the wwwroot folder is where static content should go:
The wwwroot folder is new in ASP.NET 5.0. All of the static files in your project go into this folder. These are assets that the app will serve directly to clients, including HTML files, CSS files, image files, and JavaScript files.
However, according to Angular's documentation, static content can also go into the assets folder:
You use the assets array in .angular-cli.json to list files or folders you want to copy as-is when building your project.
All static stuff used and referenced in Angular should go to assets. All static stuff, used in MVC Views, in ASP.NET Core directly should go to wwwroot.
During build/deployment/publish, the built Angular app, will be copied to wwwroot automatically, because this is the root folder for static contents for ASP.NET Core apps. (So the Angular artifacts becomes static contents from the ASP.NET Core view. But you shouldn't need to do this manually.)
Just some additional information on this. I run into a similar situation today while taking a look at an app that my company is about to redesign, I found static files in both wwwroot and assets folders.
Based on the screenshot in the question the project has been created with the Net Core Angular Template that comes with Visual Studio: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio (the same template used on the project I was looking at today). By default, you will get a folder structure like this one (screenshot of fresh project attached):
where the favicon.ico is in the wwwroot folder, so you could continue adding images and other static files in the wwwroot folder and the app will work fine. The template is configured to use the folder "ClientApp/dist" in production (Image attached from a fresh project created using the Angular template for .NET Core 3.1) assuming you will serve all as one service.
So, both approaches will work but the assets folder seems to be a better place. That was the place I was expecting to find static files for the Angular app as a developer.
The practical advantage I see from keeping the static files in the Angular project (folder ClientApp/src/assets) is that if you decide along the way to deploy and serve the client app separately you can just grab the angular build which includes the assets folder and move them to the server without additional work.
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
I am trying to use Aurelia with Symfony backend. Part of our application is generated on the backend (good, old server-side MVC) and part of it should be an SPA. I have started aurelia app from skeleton-typescript (JSPM). Directory structure I am trying to create is as follows.
project/
src/
SomeModule/
SomeOtherModule/
FrontendModule/
build/
src/
app.ts
main.ts
...
index.html
package.json
...
web/
dist/
I have changed the output path in build/paths.js and gulp build correctly places the compiled files in the web/dist. I have also added a gulp task that copies the index.html into the web/.
The biggest problem I have is how to manage the JSPM dependencies. If I configure it to downlad the dependencies into web/jspm_dependencies, the application works when launched with Symfony but I am not able to configure karma unit tests properly (it says for example that it can't find aurelia-polyfills). If I leave the jspm_dependencies in the src/FrontendModule then I have to create a gulp task that copies it to the web/ and it takes a lot more than 10s => unacceptable.
This leds me to the following questions:
What is the suggested directory structure for Aurelia project when I am not going to serve the app from the project's root?
Is there any way to copy only the files needed by the application to the web/ (something like main-bower-files for bower)?
I know I can gulp export the app into the web/, but I want to use the same directory structure during the development, too.
I don't want to use browsersync server in the dev because of multi-nature of the application (SPA part and non-SPA part that has to be served from "real" backend).