How do I install and use Vue.js with Sails JS? - javascript

I've built my website's backend already via Sails JS and now I want to integrate Vue.js in to my project. I've installed Vue and VueResource via npm install --save and I've created an app.js file in my assets/js folder.
However, when I require Vue and VueResource in my app.js file I get these error messages in Chrome:
app.js:1 Uncaught ReferenceError: require is not defined
localhost/:57 Uncaught ReferenceError: Vue is not defined
I'm new to JavaScript so all I can figure out about this is that the Javascript isn't being built or something similar since require is a Node feature. How can I get my server to build the app.js file so that it functions on the client side? I can barely find any information on this via Google that explains it in a way that a beginner can understand and they seem to just skim over the entire installation part.

Installing and using Sails-Webpack fixed the issue.

yes.. there is no require global function in browser, you have to include the vuejs manually via script tag.
Simply download and include with a script tag. Vue will be registered
as a global variable.
That what the doc said.
If you really want to use require function like you've done on server side, you can use module loader like requirejs

As others have said, require is not a native JS function. You need to compile the JS with something like Gulp or Grunt (I'd suggest Gulp). If you want an out of the box solution try https://laravel.com/docs/5.2/elixir as it has a number of pre-built build scripts (one being for Browserify)

Related

Trying to import a third party library in Javascript - getting a 404

I have the a library referenced in my Asp.Net Core lib folder, under:
wwwroot/lib/vendor/product/dist/browser/library.js
I'm referencing that from my own JS module like this:
import { library } from '../lib/vendor/product/dist/browser/library';
The console error message tells me that this can't be found:
https://localhost:12345/lib/vendor/product/dist/browser/library (404)
When I look in sources, I can't find the library either - so it makes sense. My question is: why is this library not included in the sources? My understanding was that Visual Studio would do a local deploy, and anything inside wwwroot would get deployed to the local server; however, I assume this isn't happening, and that's why I'm getting the error.
As an aside, the library wasn't imported using npm, but copied manually into the lib folder; however, I've checked inside and outside VS, and the files are where they are supposed to be.
from your sample, the js extension is ommited. That might be the cause

Package an npm module so that it can work in the frontend (eg. with create-react-app) `You may need an appropriate loader to handle this file type`

I have written a node module and published it as a node package. It works when I use it in backend applications (pure nodejs, no babel or transpile).
However, when I use this same npm module in the frontend (in my case a 'create-react-app') application, it breaks. Bellow is the exact error:
Module parse failed: Unexpected token (14:2)
You may need an appropriate loader to handle this file type.
The error is referring to my use of the spread operator (...). I would prefer not to have to rewrite the library, and would rather add some kind of transpiler to package my library. I haven't found a clear solution to this, they are all very convoluted.
I have tried using rollupjs, and https://github.com/insin/nwb. Neither sadly seem to be what I'm after.
Run my code:
You can install the library to your create react app using npm i cbs-proxy-client#0.0.3. And then add the line const cbsProxyClient = require('cbs-proxy-client') or import cbsProxyClient from 'cbs-proxy-client' to any of your scripts.
Advice would be appreciated :)
A library used for frontend is expected to package an already transpiled version of the source javascript. To do this, you might want to use rollup as a build process in your library to create a bundle file. You can use babel to transpile your code for desired browser support. Let's say the bundle file is saved in dist/bundle.js. Now you will modify the package.json to load this bundled file as the entry file using main parameter in package.json
If you are building using rollup or webpack, it is easy to miss that the bundled file should be prepared as a library. This means that importing the file using commonjs should be able to export correct variables. A typical webpack build removes such exports because it is supposed to work straight on a browser. This blog is in my bookmarks titled "js library steps" since I was creating my first js library.
Note that you do not need to put your generated file in version control. You can use npm files property in package.json to package your bundled files while ignoring them in git.

Import local JS files into Meteor

I'm having terrible problems when trying to import an external JS project into my meteor folder. This is the project I'll like to use: http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
As you can see, it is necessary to import two scripts. The first one is JQuery, and that was easily solved by adding it with meteor add jquery.
The problem came out when I tried to import the second script. I'm not sure how I can use it because, as far as I know, on meteor you cannot just import your script into the head section. For that reason, I've created a new template that is rendered and I put the code in there, but nothing happenend. Later on I've created an event that calls the JS when the image is clicked but without any success.
My question is, Which is the correct way to import a local JS code in meteor as in HTML is done with:
<script type="text/javascript" src="../dist/jquery.imagemapster.js"></script>
Since jquery-imagemapster is available as an npm package you can do:
$ npm install jquery-imagemapster
In your project directory and make it available to your project that way.
In early versions of Meteor packages were only available via atmosphere and $ meteor add. Later they added npm support and all npm packages became available.
Prefix npm installs with “meteor” -> “meteor npm install —save ‘js file’. Initializing will be the same as it would be in any other front end environment as will importing it. If you’re having trouble after that, check for it’s existance in your browser console and work from there using its built in properties and methods.

NPM modules in Grunt based projects

Node has a simple module loading system which uses require() method call to load modules from different locations in the root folder.
E.g.
var qr = require('qr-image');
I am trying to do something similar in grunt but i am unsuccessful with that.
I had added this module to package.json file in the following fashion and then ran npm install at root directory of the project.
"devDependencies": {
.
.
.
"qr-image": "^2.0.0"
},
Now whenever I use require I get the following error on console and my code breaks.
ReferenceError: require is not defined
Please suggest as how to use the npm module in Grunt based project, Thanks.
The require function isn't available in web browsers. Instead it's part of nodejs, which is a server-side language (e.g., something you might run directly from your computer terminal, not in a browser) and used to load dependencies in that language.
In a web browser, I usually just include my dependencies as additional scripts on the page, e.g.,:
<script src="path/to/my/dependency.js"></script>
<script src="path/to/my/code.js"></script>
Some other options are RequireJS or what's listed in this question or as more of a general purpose dependency manager for front-end code: Bower.
Looking closer at your question, it's likely that the "qr-image" npm dependency won't work in client-side code for you (since it was built to run via node in server-side code).
A quick search for QR code client-side code brought up this SO post, which points to the QRCode.js project for client-side QR code generation—I haven't used it, but it looks like a step in the right direction for what you're working on.

How can I add third-party JavaScript libraries to a Meteor application?

I want to add a JavaScript front-end plugin, like jquery.center.js, to a Meteor app.
If I put it in my app/ directory and refresh the page I get this error:
Your app is crashing. Here's the latest log.
node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
ReferenceError: jQuery is not defined
at app/jquery.center.js:43:1
at /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:111:21
at Array.forEach (native)
at Function. (/Users/crapthings/Desktop/app/.meteor/local/build/server/underscore.js:76:11)
at /Users/crapthings/Desktop/app/.meteor/local/build/server/server.js:97:7
Exited with code: 1
Your application is crashing. Waiting for file change.
You are putting jquery plugin javascript file in app folder directly,so that javascript file will be be loaded for client as well as server.
As per Meteor documentation:
Client loads javascript from: project/public and project/client
Server loads javascript from: project/public and project/server folders.
As of v1.0, Meteor is using jQuery internally in the client, so you can use your library directly without adding jQuery. However, it's recommended that you add jQuery to your Meteor project explicitly:
meteor add jquery
The Meteor docs explain in depth how JavaScript files are loaded and where static assets should go (CSS, images).
See also how to repackage an existing library for Meteor.
Put it inside the client folder such that it is only loaded on the client, no need for jQuery on server.
One way to do this in MeterorJS 1.3.x
Add the JS files in the public\js\ directory
Load it up from Meteor.startup method using $.getScript in client/main.js
If you want to control script load sequence, control with multiple $.getScript for each js files.
Meteor.startup(function(){
$.getScript('js/fhir-client.js', function(){
// script should be loaded and do something with it.
});
});
Starting with Meteor 1.3, you can add 3rd party JavaScript libraries to a Meteor project directly via their npm package:
meteor npm install --save moment
Both server-side and client-side package work without modification because Meteor's ES2015 module system takes care of creating a Node-like environment in the client much as browserify or webpack do.
If an npm package happens to not function correctly, look for a wrapper on Atmoshpere. Atmosphere is Meteor's official 3rd package repository, but less and less relevant after Meteor v1.3. It will eventuall be phased out.
History
Before Meteor 1.3, you had to repackage 3rd party libraries for Meteor. A tool called Autopublish was developed to automate the process. After the Meteor Development Group stopped offering free hosting at meteor.com, Autopublish was discontinued.

Categories

Resources