I installed SPA templates (including angular) via dotnet new --install Microsoft.AspNetCore.SpaTemplates::*, per Scott Hanselman's guide.
Next, I created a new angular project: dotnet new angular -n MyProject
I opened this project in Visual Studio 2017. I ran it with Ctrl+F5, and the web site runs. I get a console screen telling me to go to http://localhost:5000. I go there and a site shows up in the browser, with a "Hello, World!" at the top of the page. A bunch of "info" appears in the console. So far so good.
I then go to ClientApp/app/components/home/home.component.html. I make a minor text change: I change <h1>Hello, world!</h1> to <h1>Hello, Matt!</h1>. In the console, I see a message Node will restart because file changed: ...home.component.html. Great. Except when I go to the browser, the change doesn't appear. It still says "Hello, world!". I've tried clearing cache, opening other browsers, etc, no dice.
I see no errors in the console or the browser console. It seems like wwwroot/dist/main-client.js is just not getting updated.
What am I missing? Why isn't this change being picked up?
UPDATE:
I have things partially figured out. I'm not ready to post an answer yet, because I'm not 100% sure I'm doing it right.
What I noticed was that when I run webpack from the command line, the dist folder got updated. Looking at the Configure method in Startup, I noticed that there is an app.UseWebpackDevMiddleware(...). I debugged through and realized this wasn't being called because env.IsDeveloper() was returning false. I looked at launchSettings.json (which got created by Visual Studio, not the template). I added ASPNETCORE_ENVIRONMENT (you can see the before & after in this gist). Once I did that, any changes I make in the angular files cause a rebuild and the dist folder to be updated.
SO... is this a problem with the template, a problem with VS2017, or a problem with my own dev environment?
Instead of installing the SPA templates, I would use the CLI to:
1- Install yo generator with "npm install -g yo"
2- Install the aspnetcore generator with "npm install -g yo generator-aspnetcore-spa"
3- Generate a new angular app using: "yo aspnetcore-spa"
I hope this helps.
Related
I am learning react and find myself running npm start on the terminal a couple of times but its annoying how it opens a new browser window everytime. I'm trying to stop this from happening on linux.
I found a solution for how to do this on Windows, but how can I do it on Linux?
Adding BROWSER=none to the .env file should get it solved.
If the folder /etc/profile.d doesn't exist create it. Then run touch /etc/profile.d/[any descriptive name here].sh and open it in the text editor of your choice. Then add export BROWSER=none there.
Then logout and login again. If it didn't work then try putting export BROWSER="none" in the file.
This is setting an environment variable.
Hope this helps.
fixed
create a .env file next to your package.json and put BROWSER=none inside
I don't think you need to run npm start so often. I've created my project via create-react-app which comes with Hot Module Reloading or HMR(restarts the server on any saved edit) in-built.
Starting a new React server multiple times can also be problematic as every time it will run on a different port. If you're integrating an API that has CORS set up for a particular port, it won't work on other instances.
What to do?
Create your application using create-react-app(cra) or add HMR using some library if you don't want to use cra. Here is a tutorial for that (haven't tested it).
Always keep a single dev server running. It will automatically reload on code change.
Stop the server by Ctrl + C when you don't want to use it.
I am quite new to developing plugins for Office. I am hitting a brick wall and would really appreciate some help:
When I side-load my plugin, the plugin loads for the first time, but then it is stuck and any changes I make don't register, and Word doesn't load the new updates from the updated functions.js
If I delete (move) the manifest file, the plugin still appears in Word; where is this stored, and how can I get rid of it?
When I put debug flags in my code to do console.log ... where does this actually output to ? My functions are all set to buttons on the toolbar and I don't use the home.html to open a taskpane.
The add-in is cached by Office. To remove the cached data delete the content of the folder %localappdata%\Microsoft\Office\16.0\Wef
If you have npx installed you can remove add-ins via npx office-toolbox remove
install npx using npm install -g npx
I want to make some changes to the source code of xterm.js and test them before making a PR. I have been unsuccessful in generating a working 'distribution.'
(Apologies if my terminology is incorrect -- I am pretty new to web development)
Setup
I set up a simple test website with the following index.html
<!doctype html>
<html>
<head>
<script src="%PUBLIC_URL%/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
console.log(Terminal);
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>
In the location %PUBLIC_URL% I will place a JS source file xterm.js from either:
node_modules/xterm/dist/xterm.js - as added through npm
xterm.js/lib/xterm.js - as built from the GitHub repository
To build a local copy of xterm.js I took these steps:
git clone https://github.com/xtermjs/xterm.js.git xterm-local
cd xterm-local
npm install
npm run package
(Note: if you are following along at home I could not build xterm.js on Windows or Mac -- I only got through these steps using Ubuntu 18.04)
The commands all run successfully and the last one creates xterm-local/lib which contains xterm.js. I use that file to replace the copy that can be obtained from the NPM installation.
Results
Normal
When using the NPM dist/xterm.js I successfully see my terminal element rendered and the log reads
ƒ Terminal(options) {
this._core = new Terminal_1.Terminal(options);
this._addonManager = new AddonManager_1.AddonManager();
}
Using local build
When using my locally built output from xterm-local/lib/xterm.js there is no terminal element rendered, there is an error: Uncaught TypeError: Terminal is not a constructor and the log reads
{Terminal: ƒ, __esModule: true}
Terminal: ƒ e(e)
__esModule: true
__proto__: Object
Expectations
I would expect that after building my local copy of xterm.js that I could use it interchangeably with the NPM distribution. However I am curious why the command npm run package does not generate the dist folder but a lib folder instead. Are there additional steps that I am missing to make my own useable copy of xterm.js?
I've reached a semi-acceptable solution so I'd like to share what I can.
This is not the demo you are looking for
Thanks to user Peter I found my way to xterm.js' wiki page about contributing (not to be confused with the CONTRIBUTING.md file in the repo itself). It was hard to find because to an uninitiated individual this line in the repo's CONTRIBUTING.md document:
Get the xterm.js demo running.
seems to refer to the demo that can be found on xtermjs.org with these simple instructions:
First you need to install the module, we ship exclusively through npm so you need that installed and then add xterm.js as a dependency by running:
npm install xterm
To start using xterm.js on your browser, add the xterm.js and xterm.css to the head of your html page. Then create a onto which xterm can attach itself. Finally instantiate the Terminal object and then call the open function with the DOM object of the div.
<head>
<link rel="stylesheet" href="node_modules/xterm/dist/xterm.css" />
<script src="node_modules/xterm/dist/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
var term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body> </html> ```
However that is not the case. Instead they are talking about running the demo application that lives in xterm.js/demo
Running the real demo
The xterm.js maintainers are very very very much more experienced than me. They've provided so many ways to build and run the demo that it can be daunting. Eventually the SourceLair option worked out for me despite my aversion to giving them my credit card info.
First make a fork of the xterm.js repo - this is important because you want to be able to change the source code!
Handy as it may be this 'shortcut' https://lair.io/xtermjs/xtermjs kind of doesn't help. What you really want to do is go to SourceLair, create a new project based on your own fork of xterm and choose the preset 'Node' environment. That will allow you to both test the changes you make (by using the web server tool) AND save your changes (because you used your own fork instead of using the upstream repo)
Go to SourceLair
Start a new project by cloning a repo
Provide your repo URL
Wait for initialization (git clone, yarn install, webkit compilation etc)
Create a new branch for your changes (in the Terminal git checkout -b [name_of_your_new_branch])
Make your changes
Test them out in the Public URL of the project
Commit and push your changes back to your repo
(if you want to skip using the web editors then you could make changes to your repo and pull those changes into Source Lair for testing)
Challenges with other methods
Just FYI.
Docker: It was easy to use this pre-configured image but it was not easy to make the changes I needed to from within the container.
Foreman (Procfile runners): never heard of 'em... too little time to waste (this is a hobby, mind you!)
Linux / MacOSX: On linux I could build but could not test (my only linux is a VPS that I just SSH into) and on Mac I could (presumably) test but not build (because at time of writing the node-gyp dependency failed hard)
If all you need is to run and see how it feels, use node-pty package that's built on top of xtermjs
https://github.com/microsoft/node-pty/tree/master/examples/electron
I have the following library https://github.com/codyc4321/react-data-components-updated
I installed it in my react project locally like npm i ~/react-data-components-updated
Now running my node server I don't get any changes no matter what I do. I am seeing old print statements which I deleted, and my new ones are not coming:
console.log('data in dataSort() in dataReducer.js:');
console.log(state.data);
doesn't show up.
I have constantly reinstalled like $ npm i ~/react-data-components-updated/ and it isn't helping. I was seeing weird errors affecting this location:
http://localhost:3001/__webpack_hmr
but right now I get a 200 for that address and it still isn't updating. How can I use this library locally and have my project update when it sees changes?
Problem is that your package got installed and is now in your-project-folder/node_modules, so in order for the modifications to replicate you have four options:
Directly modify the scripts in your-project-folder/node_modules/react-data-components-updated [not recommended]
Delete your-project-folder/node_modules/react-data-components-updated and run npm i ~/react-data-components-updated
Runnpm uninstall react-data-components-updated && npm i ~/react-data-components-updated so it reinstalls with the current files.
Go to ~/react-data-components-updated/package.json and upgrade the version manually (or by CLI) and then running npm update in your project.
Depending on your needs and how you're handling changes in your local package, one may be better than the other.
The project I am working on, works in the development environment. But when I deploy it live and navigate to the site, I only see blank screen.
I get the following errors in the console (from both development and production environment)
The same error exists in the development and production environments. The different is, I can navigate through the site pages in the development environment. But I only see a blank screen in the production environment.
I tried to update my jQuery to the latest version using the following command:
meteor npm install --save jquery meteor-node-stubs
But I still get the same error.
What am I doing wrong here?
This issue cost me some time to work out. Basically you need to find a sweet spot for jquery.
Meteor loads jquery by default, and in .meteor/packages I have jquery#1.11.10, which is probably what Meteor puts in for you.
You will also need to load a version somewhere in between that works. For me this command did the trick:
meteor npm install jquery#2.2.4
Cheers