Trouble getting the browserify example to run

Question

Trouble getting the browserify example to run

patrickdavey opened this issue 8 years ago · comments

Hi there,

I stumbled across your excellent tutorials as I'm playing with vue.js at the moment and I want to port a rails site across.

Anyway, I'm thinking of going down the browserify route, as it seems the best one for me. So I cloned the vue-browserify branch. I then bundled, and ran the Procfile as per the README. Then I ran into a quite a few issues with the browserify Procfile command falling over.

To fix it, I ran:

npm install -g npm-run-all
npm install -g watchify
npm install -g http-server

And then the system was able to start up correctly, and I could post the TODO's etc. So it's all working now.

My question is, should I need to have run these install -g commands? If so, I'm happy to add them to the README in a pull request. If not, can you tell me what I was doing wrong?

Many many thanks for putting this together, it's the perfect starting point for me.

Oh, finally (and this is cheeky to put in an issue!) but, I can see that the system is compiling the js perfectly, and it looks like it is being served on localhost, but I can see in the logs that the http-serve says:

22:41:24 browserify.1 | > http-server -c 1 -a localhost
22:41:24 browserify.1 |
22:41:24 browserify.1 | Starting up http-server, serving ./public
22:41:24 browserify.1 | Available on:
22:41:24 browserify.1 |   http://localhost:5000
22:41:24 browserify.1 | Hit CTRL-C to stop the server
22:41:29 browserify.1 | 22:41:29 GMT+0200 (CEST) [HMR] Emitting updates
22:41:29 browserify.1 | 22:41:29 GMT+0200 (CEST) [HMR] Listening on localhost:3123
22:41:30 browserify.1 | 1625519 bytes written to app/assets/javascripts/application.js (5.18 seconds)
22:41:31 browserify.1 | 22:41:31 GMT+0200 (CEST) [HMR] User connected, syncing

can you explain what's going on there? When I look at localhost:5000 I get nothing. I don't really mind, as the app is perfect, I was just a little confused with it.

Anyway, the main thing is whether the installs needed to happen, feel free to ignore the server question :)

Thanks again - really appreciated this tutorial / quickstart!

Chris Fritz · Answer 1 · Mon Jun 27 2016 07:21:01 GMT+0800 (China Standard Time)

Glad to hear it was helpful. 😃 Just as you have to bundle install for any Ruby project with dependencies in a Gemfile, you have to npm install for any project with dependencies in a package.json. I'm guessing that's the step you missed. No global installations should be necessary.

As for localhost:5000, you're right that it's not doing anything useful in this context and the example has been patched just now to remove http-server. 😜

Let me know if this resolves your questions.

Patrick Davey · Answer 2 · Mon Jun 27 2016 14:13:10 GMT+0800 (China Standard Time)

I uninstalled the global modules, pulled down the latest version, run an npm init and it all started up fine. I'd assumed that I didn't need to do an npm init as when I looked at the Procfile.dev I'd seen the npm install line and figured (incorrectly) that it would do the right thing anyway.

Would it be worth adding a line to the README to run an npm init first? Do you normally add node_modules to the .gitignore ? happy to make those changes if you like and send a PR.

One final question, with this setup, how do you do Capybara integration tests? That is, I want to write a test which boots up the server, has the user add a TODO and have it post the JSON and refresh the page say and see that the TODO is persisted. Or do you not do that style of testing, preferring to do rails specific tests and JS specific tests? If & when I get around to doing tests, would you want a pull request adding an example test to your app?

Thanks again for all the help!

Chris Fritz · Answer 3 · Mon Jun 27 2016 23:52:23 GMT+0800 (China Standard Time)

Oh yeah - I totally forgot that I put npm install into the Procfile. That means you shouldn't have to do anything but run the command for it to work. 😕 I just tested locally and I didn't encounter any problems. All I did was:

bundle install
bundle exec rake db:migrage
foreman start -f Procfile.dev

It takes a little longer for the app to boot up the first time, because it has to install all your NPM modules first, but it works.

npm init should definitely not be necessary. That's the command for initializing a new NPM-managed project and this one has already been initialized. So I'm actually not sure what's happening for you locally. Can you provide more details about the failure of the browserify Procfile command? What error(s) were you getting exactly?

For Capybara tests, all you need to do is run npm run build to produce the production build, then write and run your Capybara tests as you would normally. Nothing special. 😃 Since these integrations don't actually change how you'd write typical Rails tests, I'd like to leave them out of this repo.

Patrick Davey · Answer 4 · Tue Jun 28 2016 01:42:53 GMT+0800 (China Standard Time)

Hmmm, well, I nuked the local setup, checked out the original e991591 commit and tried to reproduce. Couldn't. Darn heisenbug. So, I'm not sure exactly what I did to cause the issue.

Thanks for the pointer on just running npm run build - I think that's really all I need now to get started properly playing with vue.

Thanks again for all the help & the great resource.

Chris Fritz · Answer 5 · Tue Jun 28 2016 05:20:28 GMT+0800 (China Standard Time)

Glad you found it useful. 😄 Thanks for helping improve it!

Patrick Davey · Answer 6 · Mon Jul 04 2016 04:06:59 GMT+0800 (China Standard Time)

Hi @chrisvfritz ,

Apologies for one more question - but I am having a problem getting poltergeist to run some integration specs. I did get local jasmine tests working though which is nice. If you like I can add a PR to add a basic viewmodel test ?

Anyway - I was just wondering, when you were running (capybara ?) specs if you have seen this issue:

  Capybara::Poltergeist::JavascriptError:
       One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

       TypeError: null is not an object (evaluating 'document.querySelector('meta[name="csrf-token"]').getAttribute')

I did build the production js first. The odd thing is that I don't see that error when I use Chrome / Firefox (and the production js). It might be an issue with poltergeist / phantomjs - I'm just not quite sure where to start looking into it. The only strange thing is that it doesn't have the ('content') after the .getAttribute' part, but that might just be the error message.

Anyway, I was just wondering if you'd come across this issue before, I'm happy to go ask other places too!

Chris Fritz · Answer 7 · Mon Jul 04 2016 04:23:02 GMT+0800 (China Standard Time)

Sorry, haven't seen that issue before. 😕 I'd also like to leave VM tests out of that branch, as they're not related to the integration with Rails and that's what I want to focus on here. Thanks though! 🙂

Patrick Davey · Answer 8 · Mon Jul 04 2016 05:24:12 GMT+0800 (China Standard Time)

Ah - with a little more investigation... Rails disables CSRF in the test environment .. so that's what it was.

No worries about leaving the tests out. I thought that it might count as part of the integration, as it meant tweaking the package.json to add the relevant testing libraries, configuring karma and then I also tweaked default rake task to run npm test. Anyway - all good and thanks again :)