I'm using Visual Studio 2015 and created a ASP.NET 5 web application. I have a simple ReactJS component which fails at the line
var _react = require('react');
Instead of using webpack/browserify, I tried to install JSPM which can do (1) JSX compilation to JS through Babel and (2) module management to support require.
Scott Allen on this page talks about integrating JPSM to a ASP.NET 5 project. I can make this work temporarily, but I want to have a task in gulp to copy the system.js to the wwwroot as part of a build process. I have already a package.json which I don't want to be over written when I run the JPSM init commandline.
I installed JSPM through package.json
{
"name": "ASP.NET",
"version": "0.0.0",
"devDependencies": {
"gulp": "3.8.11",
"gulp-concat": "2.5.2",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "1.2.0",
"rimraf": "2.2.8",
"jspm": "0.15.7"
}
}
How to integrate all these pieces together to have a good build setup?
How to create a JSPM system.js file using Gulp?
How the task will look like creating JS files from JSX using JSPM and Babel?
Should I install requires or similar packages to get the module loading functionality with require keyword?
Related
In the Next.js 9 tutorial the suggested way to import shared components is by relative paths, like
import Header from '../components/Header';
I want to use absolute imports, like
import Header from 'components/Header';
How do I make this work both locally and when I deploy using the Now CLI?
Using the suggested setup from the tutorial, my project structure is:
my-project
├── components
├── pages
└── package.json
Next.js 9.4 and later
If you're using Next.js 9.4 or later, see Black's answer.
Next.js 9.3 and earlier
There are different ways of achieving this, but one way – that requires no additional dependencies and not too much config – is to set the environment variable NODE_PATH to the current directory, i.e. NODE_PATH=..
1. Make it work locally
I think the easiest way to set NODE_PATH=. when running the dev/build scripts in your package.json locally (e.g. $ npm run dev or $ yarn dev), is to add it to each script in package.json:
"scripts": {
"dev": "NODE_PATH=. next",
"build": "NODE_PATH=. next build",
"start": "next start"
},
2. Make it work when you deploy
When you deploy to ZEIT Now, NODE_PATH must be set in a different way.
You can add a Deployment Configuration by adding a now.json file (it should be in the same directory as your package.json). If you don't have a now.json file already, create it and add the following contents:
{
"version": 2,
"build": {
"env": {
"NODE_PATH": "."
}
}
}
This tells Now to use NODE_PATH=. when buildnig your app (see build.env).
(It also tells Now that we use Now platform version 2 which is currently the newest version (see version). Omitting the version will give you a warning when you deploy using $ now.)
In Next.js 9.4 it is possible to do it by adding the baseUrl config to jsconfig.json (JS projects) or tsconfig.json (TS projects).
// jsconfig.json or tsconfig.json
{
"compilerOptions": {
"baseUrl": "."
}
}
This will allow imports from the root directory. It also integrates well with IDE such as VS Code. See documentation for more information.
Change web pack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
Then use it like this:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
I'm a total novice to npm, or really any package managers.
I'm working on a ASP MVC project within Visual Studio, and I have npm and bower installed globally on my computer.
I'm trying to use the bootstrap-material-design package in my project.
I manually created a package.json file using Visual Studio.
I opened a CLI at the project root and ran npm install -S bootstrap-material-design. That created a folder node_modules at project root, with bootstrap-material-design inside. I've included these folders in my project. It also changed my package.json file. Now, it looks like this:
{
"version": "1.0.0",
"name": "asp.net",
"private": true,
"devDependencies": {},
"dependencies": {
"bootstrap-material-design": "^0.5.10"
}
}
It appears to me that the package is "included" in my project. But my question is: how do I use it? All the npm guides I've been reading seem to suggest I can just start using the package in my javascript code and Visual Studio will somehow know that I'm trying to use to the package. But bootstrap-material-design has CSS files and JS files it needs included on every page. Where do those folders get included? In _Layout.cshtml? I'm pretty stuck.
Thank you!
I have VS2015 and ASP.NET 5 RC1 project with some typescript files. Files are located in scripts folder and tsconfig is in this folder too. When I'm saving typescript file, js file is generated and everything is ok. But js files are not generated during build.
I have VS2013 installed also and some old projects using typescript, so may be there are some problems cause I have many TypeScript versions and many VS versions.
How can I troubleshoot compiling typescript during build? Build log says nothing about typescript. Checkbox 'Compile TypeScript on build' is project settings is enabled. In old ASP.NET projects TypeScript is enabled via custom target in csproj and it's easy to troubleshoot. But in xproj I don't see any typescript related things.
My current working solution is to add postbuild event which manually calls TypeScript compiler.
project.json:
"scripts": {
"postbuild": ["tsc -p scripts\\tsconfig.json"]
}
(assumes you have tsc in your PATH variable)
make sure this is added in your solution file
"Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')"
I had the exact same issue. Worked for me when I edited tsconfig, and placed compileOnSave BEFORE compilerOptions in tsconfig:
{
"compileOnSave": true
"compilerOptions": {
....
},
}
I want to use Bower in an MVC 4 application, developed in Visual Studio 2015. I know when you have a MVC 5 project, with Visual Studio 2015 Update 1, there is a nice UI for Bower management, much like the nuget interface. This part is not really critical.
I am using bower currently - I have npm and bower setup, and I have the package.json and bower.json files in the solution. When you save, Visual Studio automatically runs "npm install" and I have a postinstall step in package.json to run "bower install".
I do not want to put the bower_components into the solution (or source control). What I want is to just keep the json config files, and when you save, all dependencies are retrieved.
This all works fine in development, but what doesn't work is right clicking the Web Project, Publish. Publish does not run "npm install", and does not include files not included in the solution (except it seems to work with nuget packages not included in the solution somehow). The "Publish Web" functionality is how my web applications are deployed to production using IIS deployment.
How can I make Visual Studio Web Publish work with Bower?
An alternative - I have seen there are new hooks for Team System Builds that will run gulp tasks, but I don't know that you can publish directly to IIS in this manner.
instead of referencing/deploying the complete bower_components folder, you can use a gulp or grunt script (pick whatever you prefer) to copy the correct files out of the bower_components folder to something like scripts/lib.
You can then include these files in source control and subsequently deploy them.
The following is a grunt file that I use to accomplish this:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON("package.json"),
copy: {
main: {
files: [
{
expand: true,
flatten: true,
src: [
'node_modules/vss-sdk/lib/VSS.SDK.js',
'node_modules/moment/moment.js',
'node_modules/moment-timezone/moment-timezone.js',
'node_modules/jquery/dist/jquery.js',
'bower_components/datetimepicker/jquery.datetimepicker.js',
'bower_components/datetimepicker/jquery.datetimepicker.css',
],
dest: 'scripts/lib',
filter: 'isFile'
}
]
}
}
});
grunt.loadNpmTasks("grunt-exec");
grunt.loadNpmTasks("grunt-contrib-copy");
};
In ASP.NET Core (ie MVC6), Bower is configured (in a .bowerrc file) to add scripts to wwwroot/lib rather than a bower_components folder. That content does get published by Visual Studio.
The same approach using .a bowerrc file will work for MVC4 webs (at least if you are using Visual Studio 2015). However, it also gets checked into version control so it might not be exactly what you want.
The .bowerrc file can be used to do various things (see http://bower.io/docs/config/). However, to get Bower to add scripts to the project in ~/scripts/lib, you simply add the following json:
{
"directory": "scripts/lib"
}
Visual Studio 2015 comes with built in support for tools like Grunt, Bower, Gulp and NPM for ASP.NET 5 projects.
However when I create a ASP.NET 4.5.2 project using Visual Studio 2015 it doesn't use these tools. I'd like to use bower instead of nuget to manage client side packages.
I can find information about using these tools with Visual Studio 2013 (see this question for example). But I guess the procedure is different for Visual Studio 2015 since it has built in support for these tools.
While Liviu Costea's answer is correct, it still took me quite some time to figure out how it is actually done. So here is my step-by-step guide starting from a new ASP.NET 4.5.2 MVC project. This guide includes client-side package management using bower but does not (yet) cover bundling/grunt/gulp.
Step 1 (Create Project)
Create a new ASP.NET 4.5.2 Project (MVC Template) with Visual Studio 2015.
Step 2 (Remove Bundling/Optimization from Project)
Step 2.1
Uninstall the following Nuget Packages:
bootstrap
Microsoft.jQuery.Unobstrusive.Validation
jQuery.Validation
jQuery
Microsoft.AspNet.Web.Optimization
WebGrease
Antlr
Modernizr
Respond
Step 2.2
Remove App_Start\BundleConfig.cs from project.
Step 2.3
Remove
using System.Web.Optimization;
and
BundleConfig.RegisterBundles(BundleTable.Bundles);
from Global.asax.cs
Step 2.4
Remove
<add namespace="System.Web.Optimization"/>
from Views\Web.config
Step 2.5
Remove Assembly Bindings for System.Web.Optimization and WebGrease from Web.config
Step 3 (Add bower to Project)
Step 3.1
Add new package.json file to project (NPM configuration file item template)
Step 3.2
Add bower to devDependencies:
{
"version": "1.0.0",
"name": "ASP.NET",
"private": true,
"devDependencies": {
"bower": "1.4.1"
}
}
The bower package is automatically installed when package.json is saved.
Step 4 (Configure bower)
Step 4.1
Add new bower.json file to project (Bower Configuration file item template)
Step 4.2
Add bootstrap, jquery-validation-unobtrusive, modernizr and respond to dependencies:
{
"name": "ASP.NET",
"private": true,
"dependencies": {
"bootstrap": "*",
"jquery-validation-unobtrusive": "*",
"modernizr": "*",
"respond": "*"
}
}
These packages and their dependencies are automatically installed when bower.json is saved.
Step 5 (Modify Views\Shared\_Layout.cshtml)
Step 5.1
Replace
#Styles.Render("~/Content/css")
with
<link rel="stylesheet" href="~/wwwroot/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/Content/Site.css" />
Step 5.2
Replace
#Scripts.Render("~/bundles/modernizr")
with
<script src="~/wwwroot/lib/modernizr/modernizr.js" ></script>
Step 5.3
Replace
#Scripts.Render("~/bundles/jquery")
with
<script src="~/wwwroot/lib/jquery/dist/jquery.min.js"></script>
Step 5.4
Replace
#Scripts.Render("~/bundles/bootstrap")
with
<script src="~/wwwroot/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="~/wwwroot/lib/respond/dest/respond.min.js"></script>
Step 6 (Modify other sources)
In all other Views replace
#Scripts.Render("~/bundles/jqueryval")
with
<script src="~/wwwroot/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
Useful Links
http://idisposable.co.uk/2015/02/switching-the-client-side-build-library-in-visual-studio-2013-mvc-template-to-gulp-and-bower/
http://www.baconapplications.com/running-bower-grunt-in-visual-studio-2013/
https://web.archive.org/web/20190611132417/http://old.devkimchi.com:80/2015/01/06/integrating-grunt-and-bower-with-visual-studio-2013
http://www.dotnetcurry.com/visualstudio/1096/using-grunt-gulp-bower-visual-studio-2013-2015
http://andy-carter.com/blog/a-beginners-guide-to-package-manager-bower-and-using-gulp-to-manage-components
http://www.jeffreyfritz.com/2015/05/where-did-my-asp-net-bundles-go-in-asp-net-5/
Bundling & Minifying
In the comments below LavaHot recommends the Bundler & Minifier extension as a replacement for the default bundler which I remove in step 2. He also recommends this article on bundling with Gulp.
It is actually not too different. It is just that there is better support for all these inside Visual Studio, for example when you add new items you have templates for bower or npm config files. Also you have templates for gulp or grunt configuration files. But the actually calling of grunt/gulp tasks and binding them to build events is still done with Task Runner Explorer, just like in VS 2013.