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

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.

Related

Check Production and Staging environment inside HTML file in a React App

I am trying to integrate a 3rd party app inside my React App. I have to use different keys for production and staging but I am unable to figure out how to achieve that in React and Node applications I can do it by process.env but in index.html I am unable to figure out how can I achieve that.
Here is my pseudocode which I am trying to pull for my index.html file for my React project
<script>
if(env === production){
some_app.init('TOKEN_FOR_PRODUCTION');
}
else{
some_app.init('TOKEN_FOR_STAGING_OR_DEV');
}
</script>
While I personally prefer to store all API keys on the server itself, this guide indicates that there are other ways to do it:
https://www.geeksforgeeks.org/how-to-hide-your-api-keys-from-public-in-reactjs/
Additionally, to define differences between prod and staging in the front end alone, I recommend defining plug in variables using webpack:
https://webpack.js.org/plugins/define-plugin/

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

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.

Run intern functional tests against static web app on localhost

I have a static web app. Html, JS (requirejs modules), and some CSS.
Currently the 'serverUrl' is being set through a property module, which i can 'require' and use values from it:
define({
serverUrl: 'https://some.api/path/'
})
I have Intern setup to run functional tests in the browser using src/index.html as the entry point.
return this.remote
.get(require.toUrl('src/index.html'))
Given the serverUrl is hardcoded in the properties file, I'm trying to find a way to run tests against the web app where serverUrl is pointing to localhost:1234/someFakeServer so I can test error scenarios and such.
I've trawled the web but can't find anyone doing anything remotely similar to me, which makes me think I'm doing something obviously wrong. There's solutions for NODE apps, using config modules, but because I never 'start' my web app - its just files, these won't work for me.
Some solutions I've thought about, but can't figure out how to achieve:
Intern is proxying the files on :9000, so if I can somehow 'build' an application with another properties file pointing to localhost, all is good. But I've no idea how to do that - I've looked at webpack and similar but they don't seem to do what I want.
I've looked at Interns 'Setup' config item, which allows a function to be run before the tests are started - so I thought about modifying the properties file in there, but seems too hacky and not sure how I'd put it back...
Assuming the properties file is accessible to Intern, you could simply have Intern load the properties file and pull the server URL out of it. If you have multiple potential properties files, the one being used can be set in the Intern config or passed in as a custom command line variable (which would be used to set a property in the Intern config). The test module can get the name of the properties file from Intern's config and then load the relevant file. It could look something like this (untested):
// intern config
define({
// ...
propertiesFile: 'whatever',
})
// test file
define([ 'intern', ... ], function (intern, ...) {
registerSuite({
// ...
'a test': function () {
var did = this.async();
var remote = this.remote;
require([
intern.config.propertiesFile
], dfd.callback(function (props) {
return remote.get(props.url)
.otherStuff
});
}
});
});

angularjs undefined main module when minifying using typescript

I am trying to minify and uglify my angularjs + typescript app using grunt-minified. Currently I am getting an error that my main module for the app is not available when I minify. I know why this is occuring due variable names no longer matching the names of the modules they reference. How would I set up annotation so angular is able to identify my main module after minification?
declare module BB {
}
module BB.MyModule {
// initialize the module
export var module = angular
// load the dependencies
.module("MyModule", [
// dependancies
]);
}
This basic setup is working fine unminified, but MyModule is not defined when I minify it. How would I go about defining for safe minification?
You have:
declare module BB {
}
Probably BB has been minified to something else. That would make module BB.MyModule be different from BB.
Solution: Your code is already safe for minification if the point where you bootstrap angular https://docs.angularjs.org/api/ng/function/angular.bootstrap is minified through the same pipeline as BB.module is passed through.

Categories

Resources