I've just created a new dotnet core project with the following:
dotnet new webapi
The created the following folders and files:
bin
controllers
obj
wwwroot (empty)
dotnet.csproj
Program.cs
Startup.cs
Now i want to get started with bower (bootstrap, jQuery, angular 1.x) and add static files to my project. But this should be added in wwwroot folder with lib, images, js and css, right? How do i add this to my current project?
I've checked the following link to add static files, but gives me an error:
https://learn.microsoft.com/en-us/aspnet/core/fundamentals/static-files#serving-default-files
the type or namespace name 'StaticFiles' does not exist in the name space 'Microsoft.AspNetCore'
Thanks in advance!
Install bower globally on your system: npm install -g bower
Create .bowerrc file in the root of your application with the following content, this tells bower where to restore files:
{
"directory": "wwwroot/lib"
}
Initialise bower by running bower init, this will create a bower.json file in the root of you application. You can now start install vendor packages by running a command like the following - nb. you can search for packages at https://bower.io/search/:
bower install jquery --save
To start serving static files from your dotnetcore application run the following:
dotnet add package Microsoft.AspnetCore.StaticFiles
Then in your Startup.cs add the line app.UseStaticFiles(); before the line app.UseMvc();
Restore, build, run and you should be able to access your static files in a url like http://localhost:5000/lib/jquery/dist/jquery.js
You need to add Static Files dependency in your project.json file
"Microsoft.AspNetCore.StaticFiles": "1.0.0"
Related
I had created a project using ReactJs and Material UI
And then I was building and publishing the whole project
When I want to install this module in client-side with
npm install clientsso/BuildTest
it workes fine, but it comes with its own node_modules folder
so I force build to create a single file in another folder and i publish this folder
build": "./node_modules/.bin/babel src --out-file BuildTest/index.js
but when I re-install, it always asks for "Material UI", modules used by this custom package
is there any solution to force the client to install all necessary modules for this package
in his folder "./node_modules/BuildTest"
Thanks for your help
I am building a AngularJS file with typescript and installed tsd for typedefinitions globally. When I try to run the following command on the root of my project folder I am getting an error
I am new Angular JS using version 1.7. I am not sure if Package.json is needed for AngularJS project
Command
tsd install angular --resolve --save
Error
No package.json file found. Make sure you are running the command in a Node.js project.
package.json is required for node projects to specify metadata about project and include some important commands that may be required for the project build. First you have to install node from official website. You can google for the step by step installation. Once installed, goto your project directory and run this command. Make sure to perform "npm init" before you run the desired angular command.
Note: Ensure, node is accessible through cli
tsd is deprecated use #types node modules
npm i #types/angular --save
I created a simple data listing app using angular js.
I used Bower and also grunt. Grunt to serve the project with a specific port. But have a error.. When i'm serve the project with Grunt, the bower_components are not working. I mean all the jquery and also angular parts get 404. I here by attach a link to my project.
Get my project here - https://github.com/chanakaDe/DemoApp
First clone it, then "npm install" and then "bower install".
Please tell me how to make them work.
Always get 404 errors like this
GET http://localhost:1701/bower_components/jquery/dist/jquery.js 404
You're specifying ./src as the root of your server in the Gruntfile. Unfortunately, bower installs it's dependencies a folder above it, in the root of your project. Your HTML has a couple of script tags with ../bower_components/[path to files], but this will not work.
You need to try to install the bower dependencies in your src folder. Add a .bowerrc file in the root of your project with the following content:
{
"directory" : "src/bower_components"
}
Then reinstall bower dependencies by doing:
$ bower install
Check if a folder bower_components have been created in your src folder.
Next replace ../bower_components with bower_components in the index.html file.
I'm using the express generator https://github.com/expressjs/generator and mixing the angular seed project https://github.com/angular/angular-seed into it to create a lightweight scaffold for a mean stack app.
I would like to be able to run npm start to install all dependencies including the front end ones. The problem is that the angular/front end related files are not in the root directory, but rather in the "public" sub-directory. I know I can create an npm start script which runs bower install but I don't know how to make the start script descend into the public sub-directory and then run bower install.
My question is does bower install try to find a bower.json file in sub-directories or does it stop searching after looking for the bower.json file in the working directory? If the former, then I can just run bower install without worrying about navigating down the folder structure manually.
If bower install won't search for bower.json in the sub-directory, how could I include this command as part of an npm start script? It seems the command would have to change directories into the "public" sub-directory and then run bower install.
Finally, this is mainly a deployment issue for me. I'm using heroku which, when deploying, automatically runs npm install and the start scripts when it detects the presence of the package.json file. So it seems that I need to include include bower install as part of the start scripts.
To answer your question: yes. bower install must run from the directory where your bower.json file exists.
You can most definitely create an npm start script which does this, however. It's easy! npm scripts are nothing more than shell commands that get executed verbatim.
So, let's say you've got a project that looks like this:
myapp
├── app.js
├── package.json
└── public
└── bower.json
You can essentially create an npm start script that looks like this:
// ...
"start": "cd public && bower install && cd .. && node app.js"
// ...
This will ensure that when npm start is run, your bower dependencies get installed first, then your node app gets started.
Hope this helps!
I am new to angularjs I want to use the ui-router with bower.
I have added the following line to my bower.json
"angular-ui-router": "0.2.15"
the I have ran
bower install
I want to include the module in my index.html but I don't know which path to use.
By default bower installs packages inside bower_components directory. Make sure that this directory is web accessible. You can then include the script from:
bower_components/angular-ui-router/release/angular-ui-router.min.js
You can also change the default bower_components directory by setting a new value in your .bowerrc file as:
{
"directory": "./foo/bar"
}
This way bower will install packages inside foo/bar path instead of the default bower_components
Open terminal, go to project path.Use command,
$ bower install angular-ui-router