WSL 2: VS Code´s npm scritps doen´t refresh when creating a new script in package.json - windows-subsystem-for-linux

When I write a new script in package.json the npm scripts view doesn´t refresh with the new script. I have to restart VS Code to see the new script in it.
Also, when I create a new file into the folder via terminal, the folder´s view doesn´t refresh automatically. I have to click into refresh button to see the new files.
I´m running VS Code with WLS extension and my project is located at windows C: filesystem (/mnt/c/Users/paulo/src).

Move your project to inside WLS file system (e.g /home/pauloh/src).
It solves VS Code refresh issues and is recommended for better perfomance.

Related

open gitpod without a repo - not starting from a template

is it possible to open gitpod in order to have a fresh and empty enviroment without an existing project or template?
I'd like to manually create a project and issue gp init to initialize my enviroment from scratch
and morover, opening an existing repo and modify the gitpod.yml, is it possible to re-execute the enviroment without push the changes and open a new window?
Wait no more.
https://gitpod.new/
Spins up empty environment for you.
Currently, the best thing you can do is to have an empty repository on your git provider(GitHub/GitLab/or-anything-else) and open that from New Workspace button on https://gitpod.io/workspaces
Other than that, please upvote this feature request:
https://github.com/gitpod-io/gitpod/issues/7936

Using Cro run for rebuilding changed client side files

cro run stops the server, recompiles, restarts the server when anything in the directory tree changes. That's great.
But when developing the client side UI, and using NPX/yarn/webpack, there is an additional step that is needed to produce the main.js file.
In the Cro tutorial this step seems to be done manually, viz., we have the line "And there we have it. npm run build, refresh, and give it a spin." Here npm run build is a command that has to be run 'manually'.
Is there a simple way, eg., using .cro.yml to force another command when changes in a sub-directory tree are detected? Eg, if the client side UI files are under path/to/cro-app/client-ui-directory and the command to be run if any files change is path/to/cro-app/client-ui/directory/yarn build
The cro-tools repo has all the file watching code associated with cro run.
So, one way would be to subclass the appropriate stuff in that repo and make a super-cro run command.
But I think the thing to do would be to set up a file watcher and trigger the rebuild in your server process. Cro files set environment variables, so you could use them to configure this behavior.

Aurelia au run --watch... not watching

I downloaded an Aurelia project for testing purpose. After restoring the packages (npm install) and running the application (au run --watch). Now I see Start watching... I was curious about doing some changes (for example in contact-list.html) and seeing the website adjusting after pressing F5 (because of watching). It does not work. My changes are not reflecting in the running website. In the shell prompt where it is watching, nothing happened.
You can test by yourself with the project zipped below.
Zip of the Aurelia project
If I create a new Aurelia project from scratch (au new) and following the wizard, the watching works pretty well.
I don't know why it does not work in the project I downloaded (code provided by a Book for learning Aurelia).
What book is this?
Part of the problem is that the version of the CLI you are using is 2 years old. I would recommend getting the latest version of the CLI, creating a new project that uses RequireJS
au new
give new project a name
choose custom (3)
choose RequireJS (2)
choose Babel (1)
choose defaults for the rest
copy the src folder from your zip file over to it the newly created project
You'll need to run npm install bootstrap#3.3.6 --save or yarn add bootstrap#3.3.6 to pull down bootstrap.
Copy the link to bootstrap's css from your zip file's index.html to the new project
Delete the Promise.config line in src/main.js.
Then just run au run (--watch is no longer needed). It should work.

Project not up-to-date after building with IntelliJ

I'm a newbie to both IntelliJ and Aurelia. I did my last web project almost a decade ago, and I find myself a bit lost between all those new libraries. That said, my question is probably of rather trivial nature:
I've downloaded the Aurelia skeleton project [1], imported the sources into a new node js project in IntelliJ and started index.html. Voila. Browser opens, shows the site.
Then I changed something (added a new route to src/app.js).
I hit the run button to show index.html again: No changes. Hm?
I rebuild the project in IntelliJ, and retried. Still my changes aren't shown.
I run gulp watch on the command line, open the browser, and my changes are shown.
So, I'm asking two things: What needs to be done to really refresh the build within IntelliJ?
And secondly, when did it become a sport to create inter-depending Javascript libraries with blurry names? Just kidding... (though I'm not laughing)
[1] https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-esnext/src/child-router.js
I found it out myself. You need to put 'gulp build' to the pre-launch list of the run configuration. This is because the sources get transpiled and copied to the dist directory, from where the server is actually running.
Just building the sources from IntelliJ isn't enough.
Project rebuild start automatically after any files was changed in project directory. You do not need to build it from IDE-- only save your changes and wait a few seconds to refresh.
Of cause it will work only when you run project build with watch statement like gulp watch (e.g. run gulp watch and your project will rebuild automatically).
But if there were some errors in code -- gulp process will stop and you must restart it again. I recommend you change IDE's settings to disable automatically saving to files and use <CTRL+S> buttons to save data manually.

which angular2 js file should be added in on the client side?

I am a semi noob in web development.
I just started playing around with angular2 today. And i ran into a problem..
If I were to install angular2 with npm to my local computer, which file is the js file that should be linked to the html page that show up on the client?
In their guide, i see a file called /node_modules/angular2/bundles/angular2.sfx.dev.js. But i don't even see this file at all.
Is there some script that i should run to build that file? Or is the file renamed? I am really confused.
I tried some file /angular2/bundles/angular2.js, but it doesn't even export ng variable to window!
I see that in https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js, eventually ng gets exported. But what changed in alpha 53? (the version i get for doing npm install angular2)
In my projects, I a using
"node_modules/angular2/bundles/angular2.dev.js"
You might additionally need to install/add systemjs, just in case you are using the systemjs library.