Getting started with [Wrap]Bootstrap theme with Bower/Grunt - html

This is my first attempt at using a frontend package that uses Grunt/Bower.
I am specifically referring to a Wrapbootstrap theme.
I followed the instructions as follows:
npm install -g grunt-cli
npm install -g bower
npm install
bower install
I believe the process went fine. There were some deprecation warnings though.
What I ended up was with a file structure like this:
However, now I am lost as how to start.
The instructions says to do grunt live but it just opens up a blank page without anything on it. I opened every index.html in there but no luck.
Would really appreciate if you someone can set me on a path to realizing how to deal with the Grunt/Bower tools and how to troubleshoot this case.
Thank you.

Related

How do I use electron-compile?

I'm having trouble with electron-compile.
The docs state
How does it work? (Easiest Way)
Change your reference to electron-prebuilt to electron-prebuilt-compile. Tada! You did it.
What reference, where? You can't be talking about package.json?
I've always run electron using supervisor -x "electron" -i "./" .
What am I completely missing / what should be the contents of my pull request to make this clearer?
I've installed electron-compile with npm i electron-compile --save-dev
I'd like to have es2015/jsx precompiled to es5, so that I can run a react application in electron. electron-compile appears to solve this problem.
You should install Electron as a dev reference in package.json, yes:
npm install --save-dev electron-prebuilt-compile
Don't install Electron as a global because then other people have to set stuff up to run your app (i.e. they now have to micromanage which version of Electron they have installed globally)
With the recent versions (electron 1.3.5), I was unable to get electron-prebuilt-compile working, well it works for development but packaging for production has no real working examples.
It seems the compiling and packaging needs to be done manually, so in case anyone needs a working example, it's here. Hope to save someone some time and pain.

react-native init gives Error: Couldn't find preset "es2015"

When I'm trying to start a new react-native project from scratch I'm getting this message.
/Users/jorgevenegas/Dev/Projects/testreact/List/node_modules/react-native/node_modules/babel-core/lib/transformation/file/options/option-manager.js:327
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
^
Error: Couldn't find preset "es2015" relative to directory "/Users/jorgevenegas/Dev/Projects"
I have installed react-native-cli, of course. Using node v4.2.1, react-native 0.1.5, watchman and flow installed too.
Seems to be something related to babel. I can't figure out the reason, though.
I'm attaching a screenshot with a more detailed output.
Thanks in the advance!
This bugged me for a good 1 day. The issue was I had a .babelrc file up in my file hierarchy which was interfering with babel parsing. Got rid of that and it was fine. react-native uses es2015 by default so .babelrc is not required.
Try installing the following packages
npm install babel-preset-es2015 --save
npm install babel-preset-react --save
I had the same problem.
The solution for me was to switch from 'workspace/MyProject' (for you its "/Users/jorgevenegas/Dev/Projects" i guess) to 'workspace'.
I don't know why I had to do this, but when i ran
npm install babel-preset-es2015
npm install babel-preset-react
in my workspace instead, i could cd into 'MyProject' again and execute a react-native run-android from there.
Hope that helps at least some people encountering the same problem.
Add the following line to your .babelrc file:
{"presets": ["react"]}
I find solution from babel.io
I went through something similar, maybe this can help. In my case it was because for some reason I had two instances of react-native installed on my system.
Check the output of
which -a react-native
If you get more than one path with react native installed, get rid of the one that gives you the same error when executing init directly with the full path (my case was one installed at /usr/local/bin/react-native, but yours could be slightly different).
After removing the wrong one, you should be able to init projects without any problems.

How to install grunt file for bootstrap

I need to install bootstrap. So far I have done step 1 succesfully. I was able to install the grunt file but step two is giving me problems for days, and I do not want to spend a next day on it.
step 1: Install grunt-cli globally with npm install -g grunt-cli
step 2: Navigate to the root /bootstrap/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.
Whenever I do npm install, I get npm can't find a package.json file in your current directory. Well I do not know how to get it to my current directory, at the comand prompt it is C:\Users\Crisp>. the bootstrap file is in this directory C:\Users\Crisp\bower_components\bootstrap. There you will see the package.json file.
I really do not know what to do! I have searched on this site for supposed answers but no one says how to change the directory or actually get it to work. There is nowhere I see how to change a directory or root director but everyone keeps saying change root directory I am not a tech man, I do not know. PLEASE I NEED HELP!
I think what you are looking for if you are following instructions in this link (http://getbootstrap.com/getting-started/) you can go to the root directory by command line:
cd bower_components
then
cd bootstrap
just in case, to determine your current directory just type pwd
good luck
#contactmzn

Visual Studio 2015 - Where's the gulp task runner?

I heard Mads Kristensen in his videos mention that Gulp and Grunt are both first class citizens. I thought I even heard mention of the Gulp task runner.
But when I create a gulpfile and right click there's no task runner.
Has anyone been able to get the "native" gulp task runner (if there is one) in Visual Studio 2015 Preview to appear?
View > Other Windows > Task Runner Explorer and click refresh
or just Ctrl + Alt + Bkspace
The Preview version of VS2015 requires Gulp to be installed globally and has a few other issues with auto-discovery of the gulpfile.js. These issues will all be addressed by the time VS2015 ships.
I had this same problem with VS2015 - TRX was showing "no tasks found" even though I had a valid, linted, gulpfile.js in the site root. I found the answer here: http://www.roelvanlisdonk.nl/?p=4258
Steps: Close VS. Open a cmd prompt from the site root and run npm install. Re-open VS and you should see your tasks in TRX. It worked for me.
EDIT: I had gulp installed globally but still encountered this "error." The above steps resolved the issue though.
Well I solved the problem with several restarts of VS2015. Finally the task runner appeared for my gulpfile. I still have no idea why it did not appear from the start but it's a preview version so maybe something is not quite right yet.
Barryman9000's answer helped me on the right track. I started with an empty ASP.NET 5 project in VS2015 and had no package.json file at the project root. Running npm install gave me an error message about missing package.json. After adding that file with the default dependencies from another ASP.NET 5 project, the Dependencies started downloading and my gulpfile tasks appeared in the Task Runner Explorer.
In your bash, go to the directory gulpfile.js is installed in and run:
npm install gulp
Why the downvotes? Please read the OP's question and the comments beneath it. Also, note that the answer with, currently, the most points has nothing to do with the question. Also please note that Mads Kristensen himself said that the issue was to install gulp.
Also, as for the commenter "Bonner" of this answer, note that Bash doesn't mean Linux. You can install git bash for Windows and run all of your NPM and Git commands there. Most developers I know use that bash on windows for all npm needs.
Lastly, if your Gulp Task Runner is not working, that is most likely because it is not recognizing your gulpfile. That is due to gulp not being installed. VS2015 didn't always install gulp for you. So the fix was to install gulp globally (As Mads Kristensen said), or directly where your gulpfile is. Also, restarting or re-installing VS sometimes kickstarted the gulp installation if you're lucky.
Conclusion: My answer is the correct answer. I reference the actual OP Question, comments beneath it, Mads Kristensen, and even the accepted answer. Yet, this answer is in the negative and some random answer about how to use the "View" menu in Visual Studio has 40 points.

Yeoman 1.0 not webapp generator not found?

I am a newbee in the world of yeoman, grunt etc.. I played with Yeoman pre 1.0 and it worked very well. I upgraded to 1.0 and I am having trouble at the most basic level. Tried to run 'yo webapp' and getting 'You don't seem to have a generator with the name webapp installed.' What am I doing wrong? thanks for your help...
Ok, apparently there was a bug in the package I downloaded a few days ago... running
npm install --force -g generator-webapp
fixed it. (view solution on github)
npm install --force -g generator-webapp
I don't know why when I execute this,it still didn't work for me.
But when I execute this:
npm install -g generator-webapp
Then I fixed it.
In fact,when you use yeoman,you should install some generators first.
And if it comes to this:
Error webapp
You don't seem to have a generator with the name mocha:app installed.
You can see available generators with npm search yeoman-generator and
then install them with npm install [name] . To see the 18 registered
generators run yo with the --help option.
you can still execute:
npm install -g generator-[name]
Hope this useful for you.