I'm using Intellij Idea 15.0.3. I tried to use it to develop a MEAN stack application.
I first File -> New -> Project -> Empty Project to create an empty project. Then in Intellij Idea's terminal I type npm init -y, a package.json is generated. However, when I tried to edit this generated package.json, a window pops up, saying: These files do not belong to the project, and asks me if I want to edit it anyway.
Also, after I edited the package.json, I run npm install in the terminal, a new directory node_modules is generated, but it's not shown in the Intellij Idea.
How can I add package.json and node_modules into project? Do I have to manually created file or folder through Intellij Idea project UI and give up using its terminal?
You need to create a new project from existing source so..
File->New Project - Select HTML5/Javascript application then select one of the options at the bottom with "Existing Sources" at the end of it, you then just specify the folder that it's already and in and you should be good to go.
Related
I have a simple WinForms app that I'm trying to package with MSIX. The app itself requires additional files that when I build the MSIX App Project doesn't copy/include.
Specifically this LIBVLC folder that gets included during the WinForms app build itself.
If I manually copy that folder over into the AppX build folder, everything works. Obviously I'm trying to automate including that folder.
Folder manually copied over in screenshot below:
How can I accomplish this? GitHub minimal repo:
https://github.com/aherrick/MSIXWinFormsLIBVLC
I suspect that this line is your issue : https://github.com/aherrick/MSIXWinFormsLIBVLC/blob/0e717828a16e796a7a27e415cf45d33a50327da9/MSIXWinFormsLIBVLC.AppPackage/MSIXWinFormsLIBVLC.AppPackage.wapproj#L80
The nuget package isn't really well understood by the build tools as those are native files that we collect "before build". It seems to cause issues when a project references a project that references the nuget package, and the usual workaround is to reference the nuget package directly in the topmost project.
Is it possible to reference a nuget package in a .wapproj ?
If it isn't, that's an issue for this repository https://code.videolan.org/videolan/libvlc-nuget/ . Contributions welcome
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 entered this command to the terminal:
create-react-app react-app
And I get this error:
The directory react-app contains files that could conflict: package.json
Either try using a new directory name, or remove the files listed above
Please help!
If you're on Windows, just go to the Users folder and you'll see that a folder of your project would have been created. Just delete the project folder you want to recreate. And it's done.
Temporarily move the files VScode complaints about to another folder (in your case package.json)
Then create-react-app react-app
Bring back the files
I had the same issue but with a .json file pre-built with new folder I make with VSCODE...deleting the file fixes this issue. Hope this helps someone.
P.S.
React package includes a .JSON file and VS code for some reason has a default .JSON file on new folders(yet to figure that out). Good luck!
In Visual Studio 2022, this happens if you put the project and the solution in the same folder when creating a new project.
SOLUTION
Uncheck the box
Uncheck the box in visual studio for standalone react app
Just delete the README.md
It's working for me.
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.
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! :)