Develop Reference

Structuring js files vue cli project

How should I structure my Vue CLI project? I am unable to find any proper documentation regarding this.
Basically I have around 10 modules and each module has a js file associated with it.
Currently, I am putting all the pages written in my router.js in views directory and all the components in the components directory. I want to know where should I keep mine js files?
All the js api calls associated with every module
JS files containing all the constants related to every module??

Q1: Usually API calls are stored under a respective store if you are using Vuex. If not you can use define them as mixins and use where necessary. The mixins are the parts of the javascript code that are reused in different components. In a mixin you can put any component’s methods from Vue.js they will be merged with the ones of the component that uses it.
Q2: This can definitely go under mixins.
You can also have a util folder (optional) where it contains the functions that you use in components, such as regex value testing, constants, or filters.
Refer to this boilerplate if your project is mid-scale or large-scale.

create a service folder,create service.js -api call goes here(now all you need is to call it when ever you need it)
you have a store folder with store.js(index.js) inside store folder create modules folder
with you modules. inside store.js create modules:[user,event...]
basically that's it. edit your modules files event.js user.js.
you can add getters,mutations,state,actions. just dont forget export const namespaced = true so it`ll go to the global namespace

In my Angular JS application, I want to get know which services, modules are used in controllers?

In my Angular JS application, I have 30 controllers, 120 services, 60 directives, 20 filters, 10 modules. How to bring in a relationship between all four of them in a calling - called/injected services/factories relationship?
For example:
ControllerA has Service1, Service2 etc injected in it.
Service1 uses Service7, Service8 etc.
Service2 uses Filter1, Filter7 etc
I need to build a matrix by keeping these four of them in it.
As the code evolves, this help me to understand the code at a very high level.

Rather than starting from scratch, I would recommend taking a look at one of these npm modules. These generate reports in graph format. You can add it as a part of your CI build step to generate architecture diagrams as an artifact for each build.
https://github.com/lucalanca/grunt-angular-architecture-graph
https://github.com/vogloblinsky/gulp-angular-architecture-graph
These npm packages require you to install GraphZViz in the CI agents.
There are also couple of Google Chrome extensions like AngularJS Batarag and AngularJS Graph which can be helpful to visualize the dependencies.

I think Yes- we can get the registered services from our app.
In angular, module contains the _invokeQueue array which has list of all services in your application. So you can loop through the _invokeQueue.
angular.module('sampleApp')['_invokeQueue'].forEach(function(value){
console.log(value[1] + ": " + value[2][0]);
})

Trying to pass gulp environment-dependent web-pack variables into angularjs app

I'm fairly new to AngularJS and gulp and webpack so excuse me if I'm not using correct terminologies. Been reading stack overflow and angularjs stuff for 2 hours and can't make the connections with what I'm reading.
I'm coming into an already developed application and trying to find the best way to include analytics API keys from a webpack plugin variables into the AngularJS app to use.
The directory is setup as such:
ng_organize
/gulp
/tasks
webpack-development.js
webpack-production.js
/util
/src
/appName
/customer
CustomerController.js
...
/home
/shop
app.js
index.js
application.js
The webpack variables in ng_organize/gulp/tasks/webpack-development.js are:
gulp.task('webpack:development', function(callback){
webpack({
context: ...
plugins: [
new webpack.DefinePlugin {
GOOGLE_ANALYTICS_KEY: 'XXX',
...
}
]
});
});
Currently, the webpack variables can be accessed in ng_organize/application.js with GOOGLE_ANALYTICS_KEY. I'm trying to access them within ng_organize/src/appName/customer/CustomerController.js.
I want to create a service to store GOOGLE_ANALYTICS_KEY (and other keys) that is dependent on the environment. Is this possible? If so, how would I go about doing it?

It turns out they are automatically included globally in your app's code, you just won't be able to call the global variables in the debugger (which was how I was testing to see if they were accessible inside the CustomerController).
GOOGLE_ANALYTICS_KEY is still accessible inside CustomerController.

Maintaining and organizing ExpressJS routes

I'm new to NodeJS and Express moving from PHP. I have been following online tutorials on how to build web apps with Express and it has been an eye opener. So I decided to work on a project with just JavaScript. Problem is after adding a few route definitions in Express, I'm having trouble keeping track of my Express routes and fear it'll get even larger with time. Currently I have almost 45 lines (yes, I have a lot of route, some serve HTML templates files and other just return JSON for my Angular frontend). Is there any better way to manage this before it gets out of hand?

One possible way of organizing the routes is to groups of routes based on functionality and then create separate modules for these groups and then, import these modules to the main app file(app.js or server.js). For example, I am working on a project that has trading functionality, cash deposit functionality and then some other common tasks. So, I have created different modules for these routes and put them in a separate directory called routes.
For example, I have a module named site.js for all the common tasks.
module.exports = function(express,app,passport,router){
router.get('/auth/facebook',passport.authenticate('facebook'));
//other commin routes
};
and in my app.js file, I declare the router and then pass in to the modules that contain routes.
var router = express.Router();
app.use('/',router);
require('./routes/site.js')(express,app,passport,router);

If you are using Express version 4, i wrote a module to handle routes in a cleaner less bloated way. Checkout Exroute Module if it fits your current needs and please provide some feedback if it doesnt.

RequireJS - Package backbone-related modules for re-use in other Rails/JS applications

I am building a web application based on Rails and, on the client-side Backbone.js. For structuring my Coffeescript-Code, I used RequireJS and requirejs-rails. Each of my Backbone classes lives in its own RequireJS module.
I recently refactored a lot of code into some base classes and want to package them somehow to be able to easily reuse them in other projects (Rails and/or Javascript/Coffeescript, possible even without RequireJS) and share it on GitHub as a separate project from my Rails application. I read the RequireJS documentation on packages, but it doesn't go into the details very much. So this is what I would like to do:
Move my shared code into its own package, so views/base_collection_view becomes commons/views/base_collection_views and so on
Include the package into my requirejs-rails setup in my rails applications, and provide a compiled my-commons.js file to use within non-requirejs setups (I guess the latter would be done using almond fairly easily once I figured out how to layout the package)
A full example of a reusable RequireJS-package would really help me a lot at this point, along with some ideas how this could be transfered to requirejs-rails.

Not sure about requirejs-rails, but with RequireJS it's pretty easy.
define(['dep1', 'dep2'] , function ($, otherLibrary) {
return function () {
// your module code
};
});
Where 'dep1' and 'dep2' are other RequireJS modules that your module depends on. You can depend on as few or as many as you like. The var names you pass to the actual function ($ and otherLibrary in this example) are the names that those libraries will be assigned to within your module.
Anyone using RequireJS will be able to require your module this way, based on how the file is named and the folders it's in.
For instance, if this file was called "my-super-lib.js" inside of the libs directory, another module could just pass libs/my-super-lib to its dependency array and everything will be set up.
Update: just remembered you mentioned coffeescript. Same idea, but to be clear:
define ['dep1', 'dep2'], ($, otherLibrary) ->
() ->
// your module code
If you're into that. ;)