I'm pretty new to grunt & npm etc but I'll explain what my question is as best I can.
I've got a local Wordpress project running with FoundationPress as the theme. I have grunt running etc.
I have just installed Foundation Datepicker via 'bower'. From the terminal it looks like everything went well and the Foundation Datepicker files are in my bower_components/ folder.
However I'm not sure if I should be changing directory to the bower_components/foundation-datepicker/ folder and running 'grunt build' command in that directory to "install" the datepicker? That folder does have a Gruntfile.js in it.
After installing Foundation Datepicker I did run 'grunt build', however that was in the theme folder, so I don't know if that would of picked up the newly downloaded Foundation Datepicker and installed/built that too.
It does say on the GitHub page towards the bottom that I should do a 'grunt build'. Please see here again: https://github.com/najlepsiwebdesigner/foundation-datepicker
Thanks guys.
Daniel.
I can't see .bowerrc file in the project
In the .bowerrc file, you should have the path like bower_components/folder as you want or bower_components/foundation-datepicker/folder
Probable solution -
Make a file named .bowerrc at the root level and put the path there as
{
"directory" : "js" //according to your present "foundation-datepicker.js" file location
}
I have realised that in my lack of experience in installing bower components to FoundationPress, that I was supposed to reference the files in the DOM myself once they had been downloaded using the 'bower install foundation-datepicker' command.
I have copied the files over to the suggested folders as in he README.md file and referenced the files in the DOM. The datepicker feature is now working.
So in conclusion I did run 'grunt build' in my theme directory after the 'bower install foundation-datepicker' command, and I believe this was required based on the README.md.
Finally yes you do need to run 'grunt build' but only in your theme directory. But you need to refence the fils yourself in order to use them in your project.
Related
I am a dev on a team inside a very large project. This is the first time I have worked on a project where the node_modules/package-lock files are not in the root of the project. I am used to personal projects with a few folders, files, and the node_modules/package-lock in the root so I can always easily "npm install..." in the root.
I am running into an issue when I try to run npm install (package), it completely breaks my local project. I have to rollback the changes, rebuild, and it works fine again.
Things I have tried:
Navigate to the same directory that node modules is in.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration.
Node_modules and package-lock are located here along with ~20 other various folders.
Navigate to the root (even though node_modules isn't located here, figured I'd try).
Navigate to one folder above. I tried this because this is the directory where the Visual Studio .sln file is located.
Example: C:\Users\USERID\source\repos\companyName\companyName2\Web\companyName.Web.Administration.sln
For more context, the specific file I need to add a package to is: C:\Users\USERID\source\repos\companyName\companyName2\Web\Administration\ClientApp\app\letter\letter-create-main.component.ts
I am hoping I can get some clarity on how to properly run npm install in large projects so I can add packages that I need to this monster of a project, and hopefully help others that have this question at the same time!
I am using npm workspaces with typescript as specified in this git README https://github.com/Quramy/npm-ts-workspaces-example
When I do npm i from the project root directory it installs all packages in root directory (node_modules). It doesn't create node_modules directory in each workspace. Because of this, VSCode thinks 'module' is missing (Cannot find module 'abcde' or its corresponding type declarations), hence shows red under line on import line and doesn't show auto complete suggestion.
How can I make VSCode understand that packages are installed in root folder and use it for giving auto complete suggestion and remove red underlines under package import.
I had this issue when turning an existing project into a workspace of a larger project. Here are the steps that worked for me:
Delete package-lock.json and node_modules/ from the subdirectory
Restart VSCode, opening it to the project's new root directory
I think step (2) was the key to making it work, but I don't know for sure.
I have used the theme-generator to create a fresh theme.
Now I've created a second theme in the same directory and tried to set it's base/parent theme using gulp extend as explained on these pages:
https://github.com/liferay/liferay-theme-tasks
https://dev.liferay.com/de/develop/reference/-/knowledge_base/7-0/theme-gulp-tasks
After running the command and choosing option 1) to extend the Base Theme , I get the following options:
Styled
Unstyled
Search globally installed npm modules (development purposes only)
Search npm registry (published modules)
No matter if I choose 3) or 4) I cannot find the theme package.
Do I really have to publish the theme to npm to be able to find it?
Following this explanation I could achieve it using npm link:
npm link
Excerpt:
npm link: symbolic links to the rescue Fortunately npm provides a tool
to avoid this tedium. And it's easy to use. But there's a catch.
Here's how it's supposed to work:
cd to src/appy
Run "npm link". This creates a symbolic link from a global folder to the src/appy folder.
cd to src/mysite
Run "npm link appy". This links "node_modules/appy" in this particular project to the global folder, so that "require" calls
looking for appy wind up loading it from your development folder,
src/appy.
Mission accomplished... almost. If you installed Node in a typical
way, using MacPorts or Ubuntu's apt-get, then npm's "global" folders
are probably in a location shared system-wide, like /opt/local/npm or
/usr/lib/npm. And this is not good, because it means those "npm link"
commands are going to fail unless you run them as root.
EDIT: I was wrong to make a npm package out of it when you can also just require it locally. Even relative paths work. Example:
"dependencies": {
"my-liferay-theme": "file:../My-Liferay-theme",
}
I have a Team Foundation Build server behind a firewall, and I would like to check in a node_modules/ directory (powering both a Browserify client app and Node server app) associated with a project so that all of the files and dependencies needed to deploy a build are available without fetching anything.
Checking node_modules/ in to TFS seemed to work at first, except that the bin/ directories appearing in around 20 of my NPM dependencies were not checked in. bin/ does not appear in my .tfignore (or anywhere else I know of that could be preventing the check in).
These bin/ directories don't appear in the included/excluded changes in Team Explorer, at all. It's possible to locate one of these folders in Windows Explorer and add it with the TFS context menu, but doing that for all of the dependencies would be horrifically tedious and error prone.
How can I persuade TFS to detect changes in these folders? Is there some other configuration affecting included/excluded changes that I'm not aware of?
It is not recommended to upload "bin" folder or "node_modules" folder into Version Control. But if you do want to do this, following the steps below:
Go to "C:\Users\youraccount\AppData\Local\Microsoft\Team Foundation\x.0\Configuration\VersionControl" folder and open "LocalItemExclusions.config" file. (There may several folders named like 1.0, 2.0, 3.0, you need to make sure open the folder your VS current use.)
Delete the lines like following and save the file:
<Exclusion>bin</Exclusion>
<Exclusion>*.dll</Exclusion>
Close Visual Studio.
Delete "node_modules" folder.
Restart Visual Studio.
Run "npm install" command to reinstall the node modules.
Check "Pending Changes", files in "bin" folder should be listed in "Excluded Changes" section.
To check if the files and bin folders will get ignored by TFS. You could try to manually add them (such as drag to source control explorer). If you couldn't, then must related to some .tfignore settings , you may double check this such as if there is a .tfignore file in the root of the project folder level.
If you could, there maybe something wrong with your workspace or source control mapping of the bin folder. Try to remove the source control bindings and rebinding to TFS. Also give a try with delete the old workspace and use a new workspace.
You shouldn't check in node_modules - ever.
Rather use browserify or WebPack (I'd recommend WebPack) to package up your bundle.js.
Add the bundle.js to your source/scripts folder. Reference your bundle.js from your html instead of any <../node_modules/../scripts>.
Remove the npm install from your build script. you won't need it now due to referencing your bundle.js
WebPack is a dev-step, but it secures the version of packages you used during development and also saves you the npm install headache during deployment.
I try to build and debug an extension in Code.
I downloaded the sample of word-count from https://github.com/microsoft/vscode-wordcount.
When I clicked F5, ./out folder was not generated and I saw failure: Activating extension ms-vscode.wordcount failed: Cannot find module 'd:/VSCode/vscode-wordcount/out/extension'.
I found the post
https://github.com/Microsoft/vscode-go/issues/35
and I think this was because I failed to build the extension.
And I checked my path that node and npm were both set.
I found there were 2 possible issues.
I could not find .\node_modules folder in my extension folder. The folder structure is like
.vscode\
-- launch.json
-- settings.json
-- tasks.json
image\
test\
typings\
-- vscode-typings.d.ts
extension.ts
package.json
tsconfig.json
My node version is v0.12.2.
Could you give me some hints how to investigate the issue?
You probably downloaded directly from GitHub.
You will need to run npm install in your project's folder in order to create the node_modules directory and add the required dependencies.
If you simply want to install the extension to use it, you will also need to:
Move the folder to the correct place
npm install
OR
Install the built version directly from the Visual Studio Marketplace through the command pallet.