Working to add Angular (v4) to an existing ASP.NET MVC 4 application. One of the projects it has includes Selenium Web Driver which has a web.config file included.
node_modules\selenium-webdriver\lib\test\data\web.config
This folder is NOT included in the project but is in my web application folder
myapplication\node_modules
myapplication\Controllers
myapplication\Views
myapplication\web.config
etc...
The web.config in the selenium-webdriver folder causes the build to break with the following error:
It is an error to use a section registered as
allowDefinition='MachineToApplication' beyond application level. This
error can be caused by a virtual directory not being configured as an
application in IIS.
Pretty common error and easily fixed when it is your own mistake, but since this is a library I'm using I don't have control over the file. So my question is a bit leveled based on my research:
Can I make the "test" folder of selenium-webdriver go somewhere else?
Should my node_modules folder not be at the root of my web application?
In general.. how do I fix this?
install the rimraf package
npm install rimraf
then in package.json use rimraf command
'script': {
'postinstall': 'rimraf node_modules/**/web.config'
}
Please note that first time you will have to delete it manually, as the package is already installed and postinstall command will not run.
But for all your future installs + for your teammates, it will be taken care of automatically as postinstall command runs after every npm install
Please do read more about npm pre & post hooks
Its more of a work-around, but my making your node_modules folder hidden it won't show up in your solution explorer and Visual Studio will run your project as normal. As far as I could see, this doesn't affect running your web application.
Related
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I have (freshly installed) Visual Studio Professional 2017 (V 15.9.4), a Visual Studio solution with with multiple projects, a single .sln file and package.jsons of the projects in the respective project folders exampleCoorp.API, exampleCoorp.UI, etc. The frontend project is written in React, the others in C#.
When I navigate to View > Other Windows > Task Runner Explorer (originally devolved by Mads Kristens, see marketplace.visualstudio.com). Since we also have a React part, I have the extension NPM Task Runner installed as well.
I am expected something like the following (screenshot from my team mates whose project-setup instruction I followed):
However, the actual result for me looks different:
The error I have to understand comes from the shown Visual Studio panel:
No task runner configurations are found.
But why? And more importantly, how can I fix it? Is there a workaround?
There is only a single google-hit [developercommunity.visualstudio.com] which claims that the (only?) cause could be a misplaced package.json file:
Both problems are caused by the fact that Visual Studio’s NPM integration does not support a package.json file that is in a subfolder instead of the project root. Microsoft’s own official Angular project template requires that the package.json be placed in the /ClientApp subfolder, which is not something that is going to change.
This is clearly not my issue here. Any help hint is appreciated!
The NPM Task Runner extension will only find tasks where the Visual Studio project folder contains a "package.json" file. If this file is in a sub-folder (or parent folder, even if you consider this the main "project" folder), you will not see those tasks in Task Runner Explorer.
The questioner uses the word "project" to mean two different things. He says that he has a "React project with multiple sub-projects". A "Visual Studio project" cannot have "sub-projects", so I am wondering where exactly the package.json file was. [He subsequently changed the wording, but I think this may have been the most likely reason for problem.]
If you create a package.json file in one of your VS project folders you will immediately see TR Explorer add that project to its drop-down list and you can select to see its tasks in TR Explorer. You will not need to restart VS or even do a re-build.
There are some projects created by the SPA templates, which put the client code in a sub-folder of the project folder. For example, "dotnet new angular" puts the client code in the sub-folder "ClientApp" along with its package.json file. In this case, if you want to have access to these tasks from TR Explorer, you need to do the following: Create a package.json file in the VS project folder that will proxy to the ones you want to use. For example:
{
"scripts": {
"serve": "cd ClientApp && npm run serve",
"build": "cd ClientApp && npm run build"
},
"-vs-binding": {
"BeforeBuild": [
"build"
]
}
}
The Task Runner Explorer eventually works as it should after I performed the following steps (in no specific order):
I marked two of my sub-projects as startup project, one of which has a package.json in the the subfolder (which is essentially the root folder of that sub-project).
I (re-)installed the NPM Task Runner and restarted Visual Studio afterwards.
My colleagues suggested also to reboot of the machine, but I am not sure that this was necessary.
I have been trying to deploy my create-react-app on a server but have been unable to do so. I created a homepage field in the package.json as instructed and set it to the https://... domain address. Then I ran npm run build and created the build file. I am finding resources sparse online, instructing me what to do after. Running npm start just runs from the root directory, not displaying anything. The source shows and index.html file which paths are stuck at the root. I am wondering what I need to do to run/deploy the build(production). I have tried downloading the npm package serve, but this seems to do the same as npm run, if not worse. I feel like I am only moving in the opposite direction, and would love some assistance. Thank you.
You need to run npm build.
This creates files in the build folder.
These files you then need to take and put them in a folder that is served by a web server.
You can use Nginx, Apache, IIS or any other production ready web server.
You have an IT department, ask them where exactly you need to put your files.
I am currently getting to grips with angular using a book, currently on testing. So I have the tutorial project folder set up in localhost C:\xampp\htdocs\projects\learningangular. So I installed nodejs as the book instructs and from then on I don't know where to install the modules and dependencies - Karma, Jasmine, Angular-mock...... and what needs to go where because the book doesn't really help with that in the chapter. Do I have to move the tutorial project folder from localhost to nodejs folder which is located in the C:\Program Files\nodejs and also install the modules and dependencies there? Or can I still work from localhost. Also how does one change the npm install destination folder when using the console?
You use the project folder and install the local packages there. The NPM Getting Started will give you the missing information from your book you need to get up and running.
I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)