VS2017, ASP.net, Typescript, and npm - visual-studio

I have an existing ASP.net application in Visual Studio. Until recently I only used JavaScript. Now I want use Typescript. Installing and transpiling works great. However, I got stuck when I wanted to import modules.
My idea was to use npm for loading modules, e.g. I added to package.json:
"devDependencies": {
"typestyle": "^1.7.1",
}
which I want to import in my .ts file via:
import { style } from 'typestyle';
The problem: npm downloads to folder node_modules which does not belong to my project (but it is inside my project folder); the import statement does not find the required files.
Currently I am using requirejs to enable import statements as explained here. My tsconfig.json looks like this:
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"sourceMap": true,
"target": "es5",
"module": "amd",
"moduleResolution": "node"
}
}
I can download typestyle.js manually, put it in my project folder, and configure the requirejs configuration file main.js so that it finds it. But then I am not using npm.
How can I import modules that I loaded with npm? I'd like to use requirejs. I do not want Angular or React. If possible I also want to avoid other things which make my project unnecessarily complicated (Mocha, node.js, knockout, Webpack, Gulp, Browserify, ...)
EDIT
Okay, after reading NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack I guess I do need a module bundler like Webpack or Browserify. But maybe there is some tool integrated in VS2017 which I could use?
EDIT2
And after reading How it feels to learn JavaScript in 2016 (note: this is 2018) I understand that it might be too much to ask for a simple solution...

Finally I found a solution which suits my needs. Since it is very lengthy I'll just post the link (project source code)
http://codingsight.com/using-npm-webpack-and-typescript-to-create-simple-aspnet-core-web-app/
Only drawback so far: It uses Webpack instead of requirejs. Webpack is a module packer. All .js files/modules are combined into one huge .js. No lazy loading by default.

Related

laravel mix compile assets from a package in node_modules?

I started using laravel-mix on my new Laravel 5.7 project to compile all the js/css into one file, which will appear in my public js/css directory (one for each page) like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/create.member.js', 'public/js/backend/members')
.sass('resources/sass/create.member.scss', 'public/css/backend/members')
.sourceMaps();
Like this I want to keep the views tidy and reduce the number of assets that have to be loaded.
Everything fine so far and I understand how to work with laravel-mix. Now I installed some packages, specifically cropperjs and summernote, via npm, to my node_modules directory.
It fails when I import/require their scss/js to the scripts which are going to be compiled and placed in public by laravel-mix because it seems that these scripts (cropper.js, summernote.scss, etc...) are referencing to other assets across their origin package directory within the node_modules directory (fonts, images, etc...)
For JS I do:
require('../../node_modules/cropperjs/dist/cropper.js');
require('../../node_modules/summernote/dist/summernote.js');
Fors SCSS I do:
#import '~cropperjs/src/css/cropper';
#import '~summernote/src/less/summernote-bs4';
My question is: What is good practice when using packages, installed with npm?
Do I have to put the whole package directory to my public directory?
Do I link to the assets in the package directory which is located in the node_modules directory?
Or is their any chance left to compile them together with my other assets via laravel-mix/webpack, maybe a flag I'm missing or so?
Do I have to use any additional software like bower to make things happen?
For js I just use
import 'vue'
import 'cropperjs'
Usually the package documentation will tell you how to import it.
You should not be compiling node assets in webpack.mix... Like barghouthi said, usually the package documentation will tell you how to import the package in your js file.

Angular2 Typescript Typings Duplicate identifier

Have seen other posts but none of the suggested solutions there worked.
So I still see these duplicate identifier errors even though I excluded the whole typings folder. typings folder is in the same level of node_modules and bower_components folder
Here's my typings.json as suggested by Angular 2:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
What do I need to do? :(
PS: I uninstalled the TypeScript for Visual Studio which is version 1.8.6 and just used the npm typescript which is 1.8.10. Previously, they were installed together in my machine but still not works.
Your typings are really strange, you should have either es6-shim or core-js, not both of them. node is most probably redundant too.
Personally, i gave up on VS and plugged angular using gulp build file.
Your exclude isn't right. Assuming you are using Typings version 1.0 or later, it should look like this given the screen shot you added.
"exclude": [
"node_modules",
"bower_components",
"typings/index.d.ts",
"typings/modules"
],

Setup Zurb Foundation 6 (sass) in Laravel 5 using composer

I am starting a new Laravel project with v5.2 and I would like to use Zurb Foundation v6.2.
I've seen that Zurb Foundation can be installed through composer and since I've installed Laravel through composer, I thought it as a good idea.
I did it, Foundation is in the vendor (vendor/zurb/foundation) folder.
It has also been added to the composer.json:
"require": {
"php": ">=5.5.9",
"laravel/framework": "5.2.*",
"zurb/foundation": "^6.1"
},
But now, how can I use it? Where should I create my css file(s)? In the resources/assets/sass folder where Laravel already provides a scss file (app.scss)? If so, how can I link it to Zurb Foundation?
Thanks a lot for your help.
I think Laravel Elixir is more suitable for this purpose.
From the guide:
Installing Node
Before triggering Elixir, you must first ensure that Node.js is installed on your machine.
node -v
By default, Laravel Homestead includes everything you need; however, if you aren't using Vagrant, then you can easily install Node by visiting their download page. Don't worry, it's quick and easy!
Gulp
Next, you'll want to pull in Gulp as a global NPM package like so:
npm install --global gulp
Laravel Elixir
The only remaining step is to install Elixir! With a new install of Laravel, you'll find a package.json file in the root. Think of this like your composer.json file, except it defines Node dependencies instead of PHP. You may install the dependencies it references by running:
npm install
Then to install Foundation 6 for Sites it's recommended to use Bower, (another) package manager, but specifically for managing frontend facing libraries like Foundation and jQuery.
You can have a look at Zurb's example template for better understanding.
npm install --global bower
Create a file named bower.json:
{
"name": "my-site",
"dependencies": {
"foundation-sites": "~6.1.2",
"motion-ui": "~1.1.0",
"foundation-sites": "~6.2.0",
"motion-ui": "~1.2.2"
},
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"private": true
}
Then run bower install.
In app.scss, import Foundation:
#import 'foundation';
#include foundation-everything;
Then in gulpfile.js, compile it to CSS:
mix.sass('app.scss', 'public/css/app.css', {
includePaths: [
'bower_components/foundation-sites/scss/'
]
});
Finally to compile, run:
gulp
I think npm way is better suited for front-end stuffs. Take a look at this:
http://somethingnewtutorial.blogspot.com/2017/07/using-foundation-6-with-laravel-5.html
If you are using earlier version, its just using gulp instead of laravel-mix.

How to use Socket.IO in TypeScript with Visual Studio Code?

I am looking for a simple example of how to get Socket.IO working with TypeScript while using Visual Studio Code. I am running on Node.js.
I have installed the d.ts for socket.io, and it appears in the typings folder.
cd src/
tsd query socket.io --action install
I have added socket.io to the package.json dependencies.
"dependencies": {
"socket.io" : "*"
}
The run npm install, and the package files are showing in the node_modules directory.
I then try to import socket.io in TypeScript, and here is where I don't know what I am doing. I tried this:
import * as sio from 'socket.io';
It doesn't complain about anything, but when I just to use sio it does not give me any IntelliSense. So I feel like I have done something wrong.
Is that the correct import? Are there any up to date examples around?
import * as sio from 'socket.io';
That is the right import. You can see it in use here : https://github.com/TypeScriptBuilder/tsb/blob/ac87f359201a25e1bbb44f72093487348f3d28d3/src/socketLib/socketLibServer.ts#L2 Try restarting VS code.
Are there any up to date examples around?
I use socket.io quite heavily here : https://github.com/TypeScriptBuilder/tsb

Using Bourbon, Bitters, Neat, Refills with Bower

Is it possible to use Bourbon and it's additional components without needing to have Ruby installed? We'd like to experiment on a small project, but it's a pain to get dependencies approved by the desktop engineering folks.
I've noticed that there are Bower packages for all but Bitters. Can I just grab the scss files from GitHub and wire things up manually?
Seems the devs don't want to have bitters on bower: https://github.com/thoughtbot/bitters/issues/22.
That said, you can get bitters with bower if you use a zipball from git as a version (e.g. https://github.com/thoughtbot/bitters/archive/master.zip).
If you want more control on how to bring those files in your project, gulp-bower-normalize can help — an example bower.json file:
{
"name": "project-x",
"dependencies": {
"bitters": "https://github.com/thoughtbot/bitters/archive/master.zip",
},
"overrides": {
"bitters": {
"main": [
"app/assets/stylesheets/*.scss"
],
"normalize": {
"css/base": "**/*.scss"
}
}
}
}
Had this same question recently as I'm using Bourbon/Neat in a static site project. I've found that the 'bourbon' and 'neat' commands do nothing more that replicate the hierarchy of library files into your project directory. At that point you can use the libraries with any workflow which is able to preprocess sass/scss files.
In my case I'm using them successfully with the Python WebAssets library from within Pelican, you might be able to find another sass preprocessor that fits into your setup.
If you can get node installed on your dev machine check out Yeoman. It uses Grunt and Bower to generate a web app that uses Sass. Then you can install Bourbon and Neat using Bower. It does a lot of the heavy lifting for you.

Resources