I have to create a Dashboard for my customer using VueJS + Typescript and D3.js.
They are using dotnet vue template: 'dotnet new –install Microsoft.AspNetCore.SpaTemplates::*' 'dotnet new vue'
Everything is setup on installation: Webpack, Typescript and VueJS
This Webpack setup does not accept <script lang="ts"></script> and most of the tutorials uses it to import D3.js library.
Is there any way to reconfigure webpack in this template to accept <script lang="ts"></script>?
Error after I install d3 and d3 typings
Best
I don't know why would you like to use <script> instead of the typical npm based approach. There are many examples/tutorial in the Internet on that topic. Normally, what you do is a few steps:
Install d3 as npm dependency: npm install --save d3
Since you're writing code in TypeScript, it's helpful to get some type support: npm install --save-dev #types/d3
In your typescript file import the types by adding the next line at the very top of it: import * as d3 from "d3";
Use it. d3.select(...)
Related
Does anyone know how to run Typescript with Svelte 3.52?
It was bat file, but it wasn't anymore. Is it possible?
You should use svelte-ts instead svelte.
npm create vite#latest myapp -- --template svelte-ts
After upgrade and dismissing Bower as recommended: Is there a way to include JQueryUI into an Ember project without using Bower? My project depends heavily of JQueryUI dialogs.
$ ember -v
ember-cli: 3.3.0
node: 8.11.3
os: linux x64
Do I have to reintroduce Bower into my project? Like in this old Using jquery in Ember-cli advice?
does this solve your use case?:
ember install ember-auto-import
npm install jquery-ui
and then wherever you need to use it:
import { stuff } from 'jquery-ui';
Including external js through npm package is always suggested. Above answer shows how to do it.
Sometime the developer won't maintain the package. In that case, you have to include it manually to get the latest js for your app.
If you want to include it manually (not depending on the npm package), here is the way to add external js in your application
1) Download the latest stable jquery-ui from their official site.
2) Extract it. Include jquery-ui.js file in your app/vendor/jquery-ui.js
(Where vendor is the home for external js)
3) Once added import the js in ember-cli-build.js file
app.import('vendor/jquery-ui.js');
4) Restart the ember app.
I was able to get it to work by adding "jquery-ui": "^1.13.2", to my package.json file.
Inside ember-cli-build.js I added the following
// jQuery UI
app.import({
development: 'node_modules/jquery-ui/dist/jquery-ui.js',
production: 'node_modules/jquery-ui/dist/jquery-ui.min.js',
});
// jQuery UI CSS
app.import({
development: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.css',
production: 'node_modules/jquery-ui/dist/themes/smoothness/jquery-ui.min.css',
});
For example:
yarn add babel
bower install babel
I have application running without server (I don't plan to use NodeJS as my back-end). It is now pure-front-end double-click HTML file.
I tried to import browser.js into my HTML file to be able to process JSX.
Import with <script src="node_modules/babel-core/lib/api/browser.js"> does not work.
But, import with <script src="bower_components/babel/browser.js"> works.
Apparently, the codes are different. Since, Bower is dead and it suggests its users to use Yarn, how can the codes be different?
How can I use Yarn like I use Bower?
I have tested. There is no way ReactJS downloaded from package manager like Yarn or NPM work without server. At least any static-file server works.
In my case I ran yarn build, go to build directory, make sure the working directory is in the build folder, then run any server from there (root must be at the build folder). I use python3 -m http.server (because that is the only thing I conveniently use). I suppose you can use basic NodeJS HTTP as well.
I am not happy with the result, with fact that I can use CDN and Bower to serve React application as a single HTML file but I cannot do as such with React downloaded form the currently hip package manager.
I'm using yeoman's backbone generator, and I ran this:
bower install backbone.localStorage -S
And I manually had to insert this into index.html:
<script src="bower_components/backbone.localStorage/backbone.localStorage.js"></script>
Is there some way for bower to automatically insert <script> tags? I thought part of the benefit of bower was not having to figure out in which order to include your scripts?
Just run
grunt bowerInstall
after bower install
You can use wiredep to push dependencies into your HTML code from bower. This is the approach used by generator-angular when you run yo angular:
var wiredep = require('wiredep');
wiredep({
directory: 'app/bower_components',
bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
ignorePath: 'app/',
htmlFile: 'app/index.html',
cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
});
Bower won't add support for a specific function like this, but will soon allow you to specify an action to take after 'bower install'ing a new package. This will be called a "postinstall," similar to npm.
In the meantime, however, I have created a library to help with this. Since you're using yeoman, just add "grunt-bower-install" as an npm 'devDependency', then follow the instructions here: https://github.com/stephenplusplus/grunt-bower-install.
Use --save
bower install --save <YOUR_PACKAGE>
The --save option updates the bower.json file with dependencies. This will save you from having to manually add it to bower.json yourself. You'll see that the script section at the bottom of index.html has automatically updated.
Reference: http://yeoman.io/codelab/install-packages.html
What steps do I need to do in order to add a new dependency library to my Yeoman project. For example, what if I wanted to add Sammy.js or AngularUI. I don't see a generator for either of those so I would have to manually add them. But what other files do I need to edit so the project builds and runs correctly?
Below are some of the generators I searched for
npm search yeoman-generator | grep sammy
npm search yeoman-generator | grep angular-ui
npm search yeoman-generator | grep angularui
You want to install things like Angular UI using Bower which is part of the Yeoman workflow along with Grunt.
Both of those packages do exist in the Bower registry:
$ bower search sammy
Search results:
sammy git://github.com/quirkey/sammy.git
$ bower search angular-ui
Search results:
angular-ui git://github.com/angular-ui/angular-ui.git
angular-ui-bootstrap-bower git://github.com/angular-ui/bootstrap-bower
angular-ui-bootstrap git://github.com/angular-ui/bootstrap.git
angular-ui-router git://github.com/angular-ui/ui-router
angular-ui-utils git://github.com/angular-ui/ui-utils.git
angular-ui-select2 git://github.com/angular-ui/ui-select2.git
angular-ui-date git://github.com/angular-ui/ui-date.git
angular-ui-calendar git://github.com/angular-ui/ui-calendar.git
angular-ui-codemirror git://github.com/angular-ui/ui-codemirror.git
angular-ui-ace git://github.com/angular-ui/ui-ace.git
angular-ui-multi-sortable git://github.com/mostr/angular-ui-multi-sortable.git
angular-ui-map git://github.com/angular-ui/ui-map.git
There's actually a quick example on the 'Getting Started' page linked above, on using Yeoman, Bower and Grunt to scaffold out an Angular project using AngularUI. Including it here for convenience:
yo angular
bower install angular-ui
# then add <script src="components/angular-ui/build/angular-ui.js"></script>
# and <link rel="stylesheet" href="components/angular-ui/build/angular-ui.css"/>
grunt