I'm new to Dart/Visual studio code and have hit a wall setting up one of the predefined stagehand apps "web-angular".
I've installed the dart language support extension and created a new folder called c:\webdev\Angular_dart . From within the terminal in VSCode i ran "stagehand web-angular", then "pub get" then "pub global run webdev serve web:8888"
I'm able to see the default web page (a todo list) but when I hit F5 from within VSCode it gives me an error saying it can't see any of the files in my lib folder.
The first one it hits is..
web/main.dart:2:8: Error: Error when reading 'lib/app_component.template.dart': The system cannot find the file specified.
import 'package:Angular_Dart/app_component.template.dart' as ng;
it looks like my .packages file is setup correctly as my last line reads
Angular_Dart:lib/
And my launch.json configuration is
"name": "Dart",
"program": "web/main.dart",
"request": "launch",
"type": "dart"
Has anyone seen this?
Thanks in advance.
Right now it's simple. Use following configuration:
{
"name": "Dart",
"program": "web/index.html",
"request": "launch",
"type": "dart"
}
VS Code: 1.50.1
Dart SDK: 2.11.0-213.1.beta
Make sure "program" points to the index HTML file.
Edit: This answer is out of date, see theanurin's answer above or the Dart-Code v3.7 release notes.
The Dart VS Code extension doesn't currently have first-class support for web apps so unfortunately it's not as simple as just hitting F5 like for Flutter or CLI projects.
There are some relevant discussions here:
https://github.com/Dart-Code/Dart-Code/issues/386
https://github.com/dart-lang/build/issues/1025
The Flutter Devtools app is somewhat set up for this, and has VS Code tasks and launch configs to launch with webdev serve:
https://github.com/flutter/devtools/tree/master/packages/devtools/.vscode
The build config uses the Chrome Debugger for launching the browser, but has a preLaunchTask that runs webdev serve. It works, but the debugging isn't perfect, it's using source maps via the Chrome Debugger extension.
Related
I've got two "identical" (same OS, Visual Studio, etc.) machines. One has vcpkg with a number of installed packages ('older' versions), and I'd like an identical copy on the new machine that is integrated with Visual Studio. There seem to be a number of relatively complicated methods of accomplishing this: export/import, manifest versioning and binary caching. But what I'd really like to do is run a command on the new machine like "vcpkg installfrompath " or copy the vcpkg folder to the new machine and run "vcpkg restore". I really feel like this must exist and I'm just not seeing it.
Got answer from MS :) https://github.com/microsoft/vcpkg/issues/23464
Simply copy the vcpkg folder and run "vcpkg integrate install"
I verified that this works. Interestingly, this is the command you use when initially setting up vcpkg, but it didn't click for me, not did I see this answer in any of the similar questions I saw posted.
Use manifest mode. It's really easy and gives you exact control over different versions. Just add a file called "vcpkg.json" to the root folder of your project, activate "manifest" in the vcpkg entry of your Visual Studio project and you are almost done.
This is what a manifest file looks like:
{
"name": "myapp",
"version": "1.66.0",
"dependencies": [
{ "name": "pybind11" },
{ "name": "boost-format" },
{ "name": "boost-preprocessor" },
{ "name": "boost-uuid" },
{
"name": "python3",
"version>=": "3.7.4"
}
],
"builtin-baseline": "03ca9b59af1506a86840e3a3a01a092f3333a29b",
"homepage": "https://some.server.loc",
"supports": "windows"
}
Then simply build with Visual Studio. This will invoke vcpkg and build the exact versions you want.
On Mac, when I run my app from WebStorm, exiftool-vendored works great. However, when I build my app (I use electron-builder) and install it on the same Mac, it never returns, even just trying to get the version:
exiftool.version().then(version => writeBreadcrumb('exif', version))
In other words, no error is raised, and the then is never executed when running an installed version of my app, though it works fine running my app from WebStorm (with cd build && electron .)
What am I doing wrong? Is there an example anywhere of how to use exiftool-vendored in an electron app?
You should take a look at what the docs say about making it work with Electron:
How do you make this work with electron?
Electron is notoriously brittle and buggy, and is not officially supported by this package. Although PhotoStructure uses this package within electron, there's a nontrivial amount of auxiliary support code specific to that project to make it work smoothly.
If you're still anxious to try, here are some things to keep in mind:
Note that this package will spawn exiftool external processes, which means the exiftool-vendored.pl and exiftool-vendored.exe packages should be included in your asarUnpack. SmartUnpack might work, but if it doesn't use a pattern like node_modules/{exiftool-vendored.*}/**/*.
If you're requiring exiftool-vendored from within a webview, you're gonna have a bad time. Many things won't work due to a lack of node compatibility within electron.
__dirname at runtime from within an asar package after webpacking will be invalid, so don't rely on that.
— https://github.com/photostructure/exiftool-vendored.js/wiki/FAQ#how-do-you-make-this-work-with-electron
Since I never found a way to get exiftool-vendored to work with electron on Mac, I accepted the above answer, as essentially a warning to steer clear of exiftool-vendored for electron on Mac.
This answer is included for completeness, for those of us who need exiftool in an electron app for both Mac and Windows:
I used node-exiftool with these settings added in package.json for electron-builder:
"build": {
...
"win": {
...
"extraResources": "exiftoolwin/**/*"
},
"mac": {
...
"extraResources": "exiftool/**/*"
}
}
In the root of my project, I added folders exiftoolwin and exiftool. In exiftoolwin, I put exiftool.exe which I obtained by following the Windows Stand-Alone Executable instructions here, and in my exiftool folder I put exiftool and lib which I obtained by extracting the full perl distribution on Mac, as described on the same page.
Then, in my .jsx (I'm using React):
import exiftool from 'node-exiftool';
const exiftoolFolderAndFile = process.platform === 'win32' ? 'exiftoolwin/exiftool.exe' : 'exiftool/exiftool';
const exiftoolPath = path.resolve(__dirname, '../..', exiftoolFolderAndFile);
const ep = new exiftool.ExiftoolProcess(exiftoolPath);
Then I just use ep as described here.
This is working for us:
add this dependency:
"exiftool-vendored": "^15.2.0",
Update package.json "build" section for mac ( not needed for windows as far as we can see )
"build": {
"mac": {
...
"asarUnpack": [
"node_modules/exiftool-vendored/**" ,
"node_modules/exiftool-vendored.pl/**"
]
}
}
I'm trying to run this example. But it won't run.
I've the latest version 45, along with JPM installed. From the command line if I give "jpm run" it gives couple of errors like name should be in all small letters and no content script specified etc.
How to make it run?
I want some options popup when it's browser icon is clicked. But this part as in package.json is n't working:
"browser_action": {
"default_icon": "icons/beasts-32.png",
"default_title": "Beastify",
"default_popup": "popup/choose_beast.html"
},
WebExtensions don't use JPM.
You just pack them into a ZIP file and rename it to XPI and that's it. You can also use the web-ext command-line tool to do it (web-ext build).
For testing your extension, you don't even need to pack it - just open about:debugging in your Firefox, click "Load add-on temporarily" and select your extension's main folder.
See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Packaging_and_installation for details.
Using the current version of angular.dart.tutorial, Using the Chapter_04
With "pub serve", the main.dart.js is a 42337 lines file and the example is working fine.
With "pub build", the main.dart.js is a 22539 lines file and the example is NOT working when I'm serving it through an http web server.
I have the filling that it's something about the transformers.
My concern here is that, I'm working on a Angular Dart application which is working fine using "pub serve", but when I deploy it through a web application server it's not working.
This web application server will provide services NOT written in Dart on which my client side written in Dart with Angular.dart rely on.
pub serve uses --mode=debug by default, pub build (from console) uses --mode=release as default.
I haven't tried pub serve --mode=release but I assume it results in the same output als pub build.
I tried --mode=release with pub serve but it seems not to have any effect.
Release mode does tree-shaking and minification.
I'm running a web server with dart, it starts by:
dart server.dart
When I modified the project files, I hope this server can be restarted automatically. Is there any way to do it? Or is there any useful tool can help?
Not natively in Dart until bug 3310 is implemented. There may well be external tools that will restart the command line when a file changes (open to other answers).
Just ran into this problem developing a dart server. For vscode IDE, following this stackoverflow suggestion I installed the Save and Run Ext extension and modified it for a dart command line program:
{
"saveAndRunExt": {
"commands": [
{
// "match": "\\.(css$|js$|html$)",
"match": ".dart$",
"isShellCommand": false,
"cmd": "workbench.action.debug.restart",
"isAsync": false
},
{
"match": ".dart$",
"isShellCommand": false,
"cmd": "dart.rerunLastTestDebugSession"
}
]
}
}
This will restart the server in debug mode and rerun the last test debug session if any dart file is saved. Both server and test debug sessions work.
Works great for me, at least on initial use of this extension.