Pub/sub after separating folder for client and server code - javascript

This is my current app structure:
/client/client.js
/server/server.js
collection.js
There are HTML and CSS files, but those aren't relevant to my problem. Before splitting my app into this current structure it worked great, but it was one big JavaScript file. My Meteor.publish and Meteor.subscribe are not working, along with my accounts-ui being misconfigured.
This user had a similar problem, but my collection is defined in collection.js
My client.js folder consists of all the code that was in Meteor.isClient and server.js consists of all the code that was in Meteor.isServer along with Meteor.methods.
Collection.js is just Tweets = new Mongo.Collection("tweets");.
Why is my publish and subscribe not working? I don't know if it's related, but accounts ui is also misconfigured.

According to the meteor doc http://docs.meteor.com/#/full/structuringyourapp
In the File Load Order section
There are several load ordering rules. They are applied sequentially
to all applicable files in the application, in the priority given
below:
HTML template files are always loaded before everything else
Files beginning with main. are loaded last
Files inside any lib/ directory are loaded next
Files with deeper paths are loaded next
Files are then loaded in alphabetical order of the entire path
Your client.js and server.js are loaded before collection.js they are one level deeper than collection.js
Try this:
Move collection.js into lib/collection.js so your file structure looks like this
/client/client.js
/server/server.js
/lib/collection.js

Related

What is the use for the special "public" folder in a Meteor app?

I'm currently using Meteor and trying to learn more about the framework. In the documentation about special directories the following is said about the public/ special directory:
All files inside a top-level directory called public/ are served as-is to the client. When referencing these assets, do not include public/ in the URL, write the URL as if they were all in the top level. For example, reference public/bg.png as <img src='/bg.png' />. This is the best place for favicon.ico, robots.txt, and similar files.
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
I failed to find any docs that explains what is done to files inside this directory in detail (I only found what I quoted above). So if any documentation of that kind is available it would help a lot!
My question is: since I refer to files inside of public/ directory as if they were located in the root folder of my application, what's the different between putting the files in the public/ folder and in the root folder? Or is it just for organization sake?
Just because you can reference or "import" a file from public/ doesn't mean it functions in the same way to how a normal file import would work. Files located in public gets served as is without being minified/run through the Meteor pipleline. Second, these files are accessible to the client which makes sense given how'd import them without preceding slashes and keep them mostly to serve stuff like favicon and what not.
So in a sense, such files within public are made available within relation to your client bundle/code whilst not being a part of them, get it?
This way of serving assets isn't unique to Meteor, even React has a public directory.
Also the documentation I quoted above makes some examples using assets (some pngs and favicon.ico) and no JavaScript or HTML files. Am I able to put some JavaScript code in there and then import them in another file by referencing as if this code was located in the root of my app? Or is the public/ directory somewhat made only for assets?
AFAIK, you can have files of any type in public but since
It's served as is to the client, meaning it's exposed to the public
It doesn't get minified (i.e being part of the final application build code)
You're advised to not have any of the application code within this directory.
The Public folder is how you serve your static files, when you put a file in your root folder it will not be sent to the client by default and you can't use it in your css, when you put that file (say an image) in your public folder you can use it from the css and refer to it as if it was in your root folder, so if I put a.jpg in the public folder I can use url(/a.jpg) in my css, that won't work if a.jpg is simply in your root folder, that's what the docs mean when they say it's served as if it was the root folder.
unlike in Rails, Meteor initiatives don’t have a rigid document structure and you are quite a whole lot free to prepare your projects as you want. a few folder names but have unique which means, and documents within them will be dealt with in a different way.
consumer
files here will be loaded at the client simplest. files in that folder don’t need things like Meteor.isClient.
server
Loaded on the server best, duh! No need for Meteor.isServer whilst files are in that folder, the client won’t see these files.
public
This directory is for property like photographs. on your initiatives, you reference stuff in the public folder as if they have been in the root folder. as an example, when you have a report: public/nude.jpg, then for your app you include it with .
personal
files only available at the server facet thru the assets API.
checks
documents in there received’t be loaded anywhere and are used for checking out your app.
lib
documents in that folder are loaded earlier than whatever else, which makes it the best listing to vicinity the distinct libraries used on a undertaking.

Is it necessary to add an "android_assets" folder to my app's main?

I've finished making an app with HTML, CSS, and JS files, all of which I've stored in the 'assets' folder of Android Studio.
The app runs without crashing, but only this screen appears:
Empty app screen.
I've tried implementing each of the following file paths:
webView.loadUrl("file:///assets/menu.html");
webView.loadUrl("menu.html");
Neither of them work.
I've read that it's ideal to create a new folder in 'main' and call it 'android_assets' and then name the file path ("file:///android_assets/menu.html"); but I don't want to inadvertently create more problems in my code.
Should I create the 'android_assets' folder? Is there anything I'd risk in doing so?
Try this:
1.
Ensure your assets path is: assets/foldersIfAny/index.html
2.
Then use this:
webView.loadUrl("file:///android_asset/foldersIfAny/index.html");

Angular JS links from directories above

I've just found this weird looking issue. I run my angular app from the local server and gave my index.html file links from directories one level above it and program was unable to find them. My relative path looked like this:
<script src="../scripts/angular.min.js"></script>
Also when I run my app not from a server, just like a regular HTML file paths were correct. Is this a angular rule that files from directories above cannot be linked to the app. Or just I did something wrong?

ember.js include custom js

Attempting to wrap my head around Ember.js.
Seems I understand the complex things, but miss out on the little things.
How would one go about adding an example.js file?
For simplicity, let's say the example.js file only contains:
(function(){
console.log("example is alive in console");
})(window);
This should display "example is alive in console" within the browser console.
I have tried:
adding app.import('vendor/javascripts/example.js'); within ember-cli-build.js and adding <script src="{{rootURL}}vendor/javascripts/example.js"></script> to index.html
Console is showing
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
DEBUG: -------------------------------
DEBUG: Ember : 2.11.3
DEBUG: Ember Data : 2.12.1
DEBUG: jQuery : 3.2.1
DEBUG: -------------------------------
ⓧ GET http://localhost:4200/vendor/javascripts/example.js
All of the answers I have found stated that just adding custom.js to vendor file works. Sadly, I am missing something.
When modifying ember-cli-build.js you MUST RESTART the ember server manually. The livereload server will not pick up the changes.
This works for me when I don't nest assets in the /vendor directory. The ember-cli build process bundles JS files in /vendor into a single vendor.js file, which you can see linked in app/index.html. So place your example.js file at the root of /vendor, and then add the import to ember-cli-build.js:
app.import('vendor/example.js`);
Now when you start the server, your code from example.js should execute, since it will be included in assets/vendor.js.
Firstly, Ember.js has Convention Over Configuration approach, and your URL can do a lot of things than a normal HTML website.
Whatever you may want to do with your custom.js file it is not ember way of having it as a path. You need routes for navigation across the app. Although routes do much more than navigation. You specify the structure of your app that a user can browse through using Router's map function in app/router.js file.
However if you want to include custome.js file in your app, and have custom.js do some set of tasks for your app. You can simply go ahead and create a directory with any name, javascript for instance inside app directory. Have your javascript files placed inside it. Then you can import these files as simply as referencing any other files in ember:
import customObject from 'yourApp/javascript/custom.js';
Here, your custom.js should be exporting customObject.
Do read the guides if you want to learn more. And the API docs if you actually want to learn more.
Note: At the time of writing this answer current ember-cli version is #2.12.0

Working with meteor.js and mongoDB on windows

I am taking the first steps in learning how to develop within the meteor.js framework using my Windows 10 PC.
In windows, when creating a new app, the system creates a folder with
separate sub-folders for client and server .js files.
My question is if I define a new Mongo collection inside the server.js file, how can I access that collection from the client.js file?
what you're asking is OS-agnostic.
i think you already know that files within a folder called "server" are not seen by the client, and likewise files within a folder called "client" are not seen by the server.
Meteor will eagerly serve files outside such folders to both the client and the server (unless it's in a folder called "imports", more on that in a moment).
so if your project is set up with top-level folders called "client" and "server", it is common to make a folder called "collections", also at the top-level, to define the collections.
so let's say you have a file called collections/News.js:
News = new Mongo.Collection('news');
when that file is served to the server, it will create that collection in Mongo. when that file is served to the client, it will create a local collection in minimongo and associate it with the real collection. in both instances, "News" is a global variable you can access from anywhere.
so that should answer your question.
going further, MDG is recommending a new directory structure going forward. you can read about it here: https://guide.meteor.com/structure.html
in short, they want us to move to a model where files are not eagerly loaded, but explicitly imported by our code. during the transition period, we are meant to put our files into /imports. files in there are not eagerly loaded.
using the same example above, "News" would probably exist in its own area, as a module, in a file like this:
imports/api/news/News.js
const News = new Mongo.Collection('news');
export {News};
here, the file is not eagerly imported, but whatever code relies on News would have to import that module:
import {News} from '/imports/api/news/News';
that import would work in both client and server code.

Categories

Resources