I installed node, bower and the polymer cli on a Windows 7 machine.
If I choose the "polymer-2-element" option and then defaults for the rest of the questions, the CLI builds a project but there is no bower_components folder created in the project. There are no bower errors as it downloads files. It is putting the files in the AppData\Local\bower\cache folder.
If I run the app with "polymer serve --open", the browser console shows 404's for anything in the bower_components folder.
Any ideas?
Related
I am working on a project on WSL 2 in windows. The project uses node to only compile sass and minify js. I have saved the project files on my Windows File System. I access the project files and run the project using Ubuntu on WSL 2. Everything works fine except gulp watch. I use VSCode as text editor. I have configured gulp watch properly to recompile sass files on changes but it does not seem to do that. On running the gulp watch, watch starts but on making any change, the SASS files are not compiled.
This is because of the way WSL 2 works. File changes made by Windows apps on Windows filesystem don't trigger notifications for Linux apps. This issue is currently open on GitHub at this link.
To make it work, store your project files in the home directory on Linux filesystem (cd ~ will take you to home directory). Run gulp watch again and you should be good to go !!!
I'm constantly working on new web development projects that don't ever, in practice, need their node_modules folder when deploying. It would suit me much more if I was just able to create a small gulpfile.js for each project, rather than 6000+ files contained in the node_modules folder for every project, that are only ever used by me on this machine.
I only use Gulp to compile SASS and prefix and minify my CSS. I don't need to worry about any other type of deployment issues, but the documentation says I need both: Global and local copies of Gulp.
Gulp needs to be installed locally, but you can link the local install to a global install:
npm install --global gulp
npm link gulp
See also https://stackoverflow.com/a/30742196/451480
Here is the Topeka app as it's found on Google App Engine Appspot.
Here is the (purported) Github index.html file.
Note: the app's source code is minified.
Question
Where is the un-minified source code for the Topeka app?
If it's the Github repository, then where (for example) is the file that's imported by <link rel="import" href="components/topeka-elements/topeka-app.html"> and the others in in lines 46-51 of index.html? I don't see any /contents/ directory in the repository.
If the source code is not the Github repository, where is it?
What's the deal with this minified build.js file, etc.? That's different from the customary index.html file. I haven't seen Polymer apps use that before.
Notes:
#bpowers says on 9-14-2015 in Polymer Slack Site:
it looks like they updated the build files a month ago, but its still old 0.5. I was able to build it by opening up a terminal and doing:
git clone https://github.com/Polymer/topeka && cd topeka && npm install && bower install && ./node_modules/vulcanize/bin/vulcanize -o build.html index.html --strip --inline --csp -- clone it, move into the dir, install the deps, and then run vulcanize. The vulcanize command is from the deploy.sh script in the repo.
if I run a web server in that directory, the build.html runs
That Github repo is the web application. The topeka elements are listed as a dependency in the bower.json - "topeka-elements": "Polymer/topeka-elements#^0.5.0"
Find the source here
Looks like they've checked in the vulcanized build output from the deployment - see deploy.sh
I'm getting started with WebStorm 9. I created an HTML 5 Boilerplate project and I noticed a src and a dist folder.
Is there a standard command to compile the content of the src folder into the dist folder?
This is how my project looks like:
It looks like HTML5 Boilerplate comes with a gulpfile.js file, so it looks like it wants to use Gulp to build assets from src into dist.
If you have Gulp installed, you can run gulp build in your project directory.
If you don't have Gulp installed, you should install it with npm. HTML5 Boilerplate has a package.json file that includes Gulp, so install npm and then run npm install in your project directory, and that should install everything that HTML5 Boilerplate expects.
If you are using webStorm: just right click the package.json, you will find something like run npm install. It will do everything for you. After this right click the gulpfile.js file, and choose show Gulp tasks. Then you will find what you can do in Gulp window.
I'm creating a yeoman generator for my web projects.
But I wonder how I can try and test my changes before publishing it?
Since I have installed it once, it will not run my local development version, instead it runs my installed version.
Any suggestions on how can test-run my local development version?
I finally found some information on how to accomplish this:
if you wish to develop on the generators code base, and debug locally, a common way to do so is to rely on npm link
git clone the generators repo locally
cd into that repository and run npm link. It'll install required dependencies and install the package globally, using a symbolic link to your local version.
If you want to install sub generators, you need to do so in the context of a yeoman-generator package linked earlier. Cd into the sub generators package you have cloned locally and run npm link.
We now have everything linked and known on the system, we now need to link the sub-generator repo into the parent one, yeoman-generator cloned and linked in step 1 & 2.
https://github.com/yeoman/generator/wiki/Testing-generators
EDIT:
Updated link for info: https://yeoman.io/authoring/index.html
If by "running locally" you mean the ability to test your generator and its flow you can simply do this.
In your project directory folder run npm link. If this passes in flying colors, go to step 2.
Open a terminal and cd into the folder you wish to initiate a project.
Run yo generator-theNameOfYourGenerator. This will run your generator.