Structuring js files vue cli project - javascript

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

Related

How to expose webpack dependencies in `window`?

This question comes from a Kirby CMS issue I am having. Here's a brief summary.
The Kirby panel uses Vue and Vuex and bundles them with Webpack (through Vue CLI). It has two chunks, vendors and app. People could also write plugins for that panel. The JS execution order is as follows:
vendors.js chunk
Plugins' JavaScript bundles (for instance, myplugin.js)
app.js chunk
The question is - how can myplugin.js reference the same Vuex as app.js? As I've described in my issue, there are problems with Vue if I use my own Vue and Vuex in myplugin.js. Since Kirby loads my Vue component in its own Vue instance, that component's store should use a Vuex Store bound to the same Vue instance, otherwise Vue's reactivity breaks.
We can't add the following in app.js:
import Vue from 'vue'
import Vuex from 'vuex'
window.KirbyVue = Vue
window.KirbyVuex = Vuex
because the app.js chunk is executed after myplugin.js. Therefore when imports in myplugin.js are resolved, references to KirbyVuex would not exist yet. So you couldn't do:
new KirbyVuex.Store({
...
})
because KirbyVuex would be undefined.
So apparently, those dependencies should be exposed in the vendors.js chunk. Is there a way that could happen? A plugin might need to use other panel dependencies aside from Vue and Vuex. It would be redundant to include them if they're already there. Also, it might be necessary for the plugin and panel to share the same dependency state, in which case using the same dependency is a requirement (as is my case here with Vuex).
Is there a way for the panel to expose its dependencies to the window object? It already creates window.panel which contains useful data for the plugins. Could it somehow add window.panel.vendors in there? Or perhaps just window.vendors? From there you'd be able to use new vendors.Vuex.Store(...) in the plugin.
Is there a functionality in Webpack that allows dependencies to be exposed to outside code?

Properties file in JavaScript / Angular

In Java I usually create application.properties in my resource folder and put configs in there.
And when I need it I just do Properties prop = new Properties(); prop.load(... my file) and then use prop.getProperty("Something")
I want to do something similar in Javascript
In my js code I have this:
// REST API Base URL
var baseUrl = "http://localhost:8083/api";
I want this to be in a application.properties file and then load the value.
How can I achive this?
Thanks
In angular 2+ projects and for a good practices you should create environments folder with one file per env like: environment.js, environment.prod.js.
and into file you can export a constant or by default like that
export const environment = {
apiUrl: '',
googleApiKey: '',
}
and you can import this environment in every file you will needed like
import { environment } from '{relativePath}/environment/environment.js'
If you create different files for every env like prod. You need to replace environment.js for env that you will be build. You have lot of info about this with webpack or other compilers.
I recommend you strongly to develop into a common.js project. It will be more friendly for you importing modules and you will have powerful possibilities of scalable app.
But the easy(Ugly) solution is:
index.html
<head>
<script src="environment.js">
<script src="app.js">
</head>
environment.js
// Declaring environment like that you will have window scoped the variable
// and you will have global access to environment with window.environment
var environment = {apiUrl: 'https://api.url:4100'}
app.js
function example(){
console.log(window.environment.apiUrl); // out https://api.url:4100
}
The approach depends on how you build and/or bundle your AngularJs application. But regardless of that, you'll need to create a config.json file to contain your settings.
If using browserify or webpack, you can import that file via require(...), otherwise you can simply request it via ajax before your app bootstraps.
In any of these cases, the best way to use the configuration data throughout your app is to define it as a constant at the bootstrap phase: app.constant('CONFIG', configData);, assuming that configData is a variable that contains the data from your config.json file.
Then you can use dependency injection to provide CONFIG to all your controllers, services and directives.

Why angular2 sources don't have typescript files in sources [duplicate]

When I work with angular2 code I often need to see the implementation of a class, let's say the Router class.
If I click on the Router type in my IDE WebStorm, e. g. inside the constructor of another class
export class myClass {
constructor(private router: Router) {}
// ...
}
my IDE takes me to the TypeScript definition file router.d.ts inside my node_modules folder. What I want is it to take me to the original router.ts file with the implementation of the router class, not just its definition.
The original .ts file is not included in the node_modules folder structure when you get angular2 from github via the standard package.json suggested in the Angular2 Quickstart. Currently, I have to look up the original code in the official github repo.
Any ideas how to get the .ts files into my node_modules/#angular folder instead of the .d.ts files?
Sadly, it's not possible since no TS files exist. Even if you add them it still not possible since you import real angular paths which always point to the definition files. On top of that the file structure of the project does not correlate to the structure of the import string literals.
Some background and more information
The NPM package does not include .ts files, this is by design from the angular team. Up until some time ago the .ts files were indeed supplied with the NPM package.
The reasoning for removing them is to disable abuse from users accessing private classes and #internal and private APIs which is public methods/properties in the API that are not supposed to be public but must be so other angular internal classes can use them.
We used to see a lot of code samples out there doing things like import { PromiseCompleter } from 'angular2/src/facade/lang'; (before RC0) but this was changed when the project structure had a big structure refactor in RC0. This abuse was wide and it's bad, very bad... For users and for Angular PR.
The Angular project has a complex and robust build process where all of the API is moved from .ts files into d.ts files using an automated process that limits exposure. (public_api_guard)
The end result is d.ts files only.
It's also not possible to clone the git repo and use it since, again, the file structure is way way different so imports will have to change. Most importantly without the build Angular will, most likely, not work.
A solution using a different approach
However, if you debug your app you notice that you reach actual angular core .ts files in the source view of the console, this is because the NPM package comes with source map files that include the whole TS source code. Nice trick they did there.
This is what I use to dig deep into angular, it works quite great and I get a lot from it.
It's not as nice as Goto Declaration but it something...
IMO it's also easier to understand when you step through code...

Create directories and files from a template for rapid development with node/npm

I am trying to setup a shortcut to generate new components. For example if I had a bunch of React or Angular components that had a particular dir/file structure and included sample code for a new component. Is there a way to do this with node? It's quite time consuming to keep adding the same directories and files whenever I need to create a new component.
I usually do this in a convoluted but workable way with bash and aliasing but would like to use node, ie. npm run component myNewComponent where 'myNewComponent' would act as the function name within a myNewComponent.js file etcetc
I would have an example directory structure templated somewhere that node could pick up from or have it hardcoded in the node script file itself.
Yeoman does this with generators, but I would like to achieve it purely through node/node modules and full control over the code output and locations.

ES6 import module as an object

I am using this GULP plugin which converts HTML files into ES6 exports so I could load them on the browser in my MVC (using rollup bundler).
Basically I have page controllers which are exported as modules.
Then, in my main JS file, I just import all the page controllers, once by one, like so (simplified):
import * as page__home from './pages/page1';
import * as page__home from './pages/page2';
...
Since this is an SPA, I would think it would be easier to somehow import all the page controllers into some object, so then when a controller is to be called, I could check if that name exist in that object which holds all the imported controllers, or something like that.
Or maybe there is a way to check if a module was imported somehow?
Is there any smarter way of doing this? Thanks
As noted above:
I think I got it actually, I will combine all the controllers files using gulp, then import that one file, and it will all be under that namespace, like so import * as pages from './pages/bundle'; then I could check if( pages["xxx"] )

Categories

Resources