About a week ago I starded developing a white-label app, where the only thing that will differ from app to app are some color values, source of images and API endpoints, but the app itself does the exact same thing.
So the last couple of days I tryied to learn how to build multiple apps from the same project... (lets mainly focus on Android here) thru my journey I found a few guides and I managed to make it work by following this guide and setting product flavors in my build.gradle.
productFlavors {
firstapp {
applicationIdSuffix '.firstapp'
resValue "string", "build_config_package", "com.myapp"
}
secondapp {
applicationIdSuffix '.secondapp'
resValue "string", "build_config_package", "com.myapp"
}
}
Ok, now I can runreact-native run-android --variant=firstappDebug to emulate the app while developing, and latter on release gradlew assembleFirstappRelease and be able to generate multiple (in this case 2) different builds.
But, as im quite a begginer, I couldnt find the proper way to write flavor specific code to be rendered whenever I build for that specific flavor.
In addition, I followed this other guide that more or less shows how to do that, but again, I lack knowledge to proper execute some steps so I failed there. I couldnt figure out in what file should I right the code at STEP 2 and neither what is BuildConfig.FLAVOR, NSBundle.mainBundle(), and at STEP 3 UtilityManager.getTarget(), RNBuildConfig.FLAVOR
In conclusion.. Im still studying hard to grow and Ill look more deeply in environment varibles... but I felt the need to ask the community for help.
The workaround I'm using at the time of this post (That's very important) is:
Product Flavors (Android) and XCode Schemes (iOS) to build different apps with different names and icons.
To write code for specific Flavor/Scheme, I'm using environment variables. I created multiple .env files with the desired config variables. e.g.
//.env.mycustomenv
LOGIN_TITLE_TEXT= "My App"
LOGIN_STATUSBAR_CONTENT= "light-content"
LOGIN_BACKGROUND_COLOR= "#333"
LOGIN_SIMPLE_TEXT_COLOR= "#FFF"
LOGIN_TEXTINPUT_BACKGROUD_COLOR= "#FFF"
LOGIN_LOGIN_BUTTON_COLOR= "#009933"
To tell RN which .env file to look at im using react-native-config from the command line as simple as $env:ENVFILE=".env.mycustomenv" (On windows using powershell).
react-native-config should work to expose those variables above to your .js files, and it does, but for my experience it didn't work when using product flavors. So I started using react-native-build-config to do that task.. So in the end my code looks something like this:
import BuildConfig from "react-native-build-config"
export function MainStyle () {
return(
<>
<StatusBar barStyle={`${BuildConfig.LOGIN_STATUSBAR_CONTENT}`} backgroundColor={BuildConfig.LOGIN_BACKGROUND_COLOR} />
<TitleText>{CoBrandConfig.Login.LOGIN_TITLE_TEXT}</TitleText>
</>
)
}
So on and so on...
I hope that this answer helps other devs that find this post looking to find help.
Related
I'm learning how to make react based web pages.And after I've got to know that typescript can transpile to ES3 which is basically supported on all browsers. i started trying to make a simple Hello World React app that would use ES3 JavaScript, which i tested on an IE8 of a virtual machine Win7. but the thing is... to probably no one's surprise it did not work.
Here are the measures i took to configure my app:
At First I only changed tsconfig.json's { "target" : "es3" }
the results were a bunch of errors on npm start
so i added { "lib" : [... , "ES5", "ES6"] } (I added more ES# at first but it somehow gave more errors)
and the development server started successfully
but when i tried opening it in IE8 it gave an error that it didn't recognize => which is understandable
so i started searching for why is JavaScript Not transpiled correctly to ES3, and tried returning back to { "target" : "ES5" } , which shouldn't support arrow functions either.
but they still existed in the final code
so i tried building it instead, and i used npm run build
which did solve that problem, but the code now contained Symbols which gave errors on IE8.
so i just started trying random actions like adding the { "downlevelIteration": true, "importHelpers": true }, and tsc .
which of course didn't work.
then i found in a random website that i can add a ./src/tsconfig.json and a ./src/tsconfig.dev.json, so i configured the target downlevelIteration and importhelpers and built the webpage.
well it didn't work, same problem.
i started to get agitated, so i imported react-app-polyfill and babel-polyfill and built.
This Time although the final JavaScript file didn't contain Symbol, it did't work because of some dumb error that expected some string in some line that goes: name-idont-remember : function(){function i dont remember}. so understandably i Stopped My Self From Punching The Computer Having Wasted About 4/5 days with this problematic objective...
after "some" searching i think that, that code is needed to be ES3ifyed, because i see a resemblance between the forgotten line, and a line that was given in a ES3ify Example, where a line like that was converted to "name-idont-remember" : function(){function i dont remember} i think.
** EDIT: i Would Also Use VITE if it's easier. **
So Now all I Ask For is some Kind of Guideline/List of Steps,that i would take every time i want to make a ES3 React-App.
if you can Provide This Kind Of TODO List, or you have link to something like that which is clear, i would appreciate that act of kindness every time i stop myself from creating a beautiful Hole In the Screen of My Computer ( I would Appreciate it a lot )
so i would also appreciate it if you gave me guidance on where i went wrong, or even better, what was wrong with every step i took.
thank you people/(and AIs now too i guess) a lot.
I'm using the Boundless sdk suite to develop a complete web application, which until now worked pretty well. However, following the Opengeo documentation
(http://suite.opengeo.org/opengeo-docs/webapps/gxp/viewer/locale.html) changing the locale of the viewer, does not work for me as the documentation is unclear to me where to put the following statement:
GeoExt.Lang.set("fr");
So far everything I changed, I did in the app.js file. As the documentation states I should find the code block:
Ext.onReady(function() {
but it does not say where it actually is. It's not in app.js, so I derive it has to be somewhere else. Once I started tempering with the various geoext/ext extensions I messed up my application.
The only way I am able to find the upper statement in app.js, is when I proceed to the next step (packaging the app), unpack the war file, and search for it in lib/app.js. But I cannot imagine this to be the solution.
I can't believe no one has asked this question before. Is it so obvious, or am am I just slow on the uptake?
I resolved the issue. It was actually quite simple.
The GeoExt statement must be in between your dependencies and the var app code block (in the app.js configuration file).
.
.
* #require locale/es.js
*/
GeoExt.Lang.set("es");
var app = new gxp.Viewer({
As a fairly Microsoft-centric and predominantly back-end programmer, tackling all of these (cool) new technologies all at once has proved pretty daunting. I'm fairly pleased to say that I've got a lot of things wired together and that I feel as if i'm very close to breaking through one last hurdle to a point where i can finally begin to work and produce code efficiently in this brave new world, but there's a major obstacle I'm hung up right now. This is all new to me so i'll try to explain as i can:
I'm using VS 2015 and building up a DNX ASP.NET 4.5 MVC 6 web application. I've used NPM to install react, flux, and all manner of supporting modules. I'm working on my first fully-functional JSX screen which is using the flux pattern to load data and I'm receiving callbacks from my store when the data is loaded from an API service.
I love being able to use the require('xxx') syntax to chain the dependencies together, so I've formed that habit and i'm using browserify & reactify from my gulp task to manage the dependencies, gather all of the input files, and convert my JSX files to JS at, er, gulp-time i guess.
The issue i'm running into now is one that I never expected: when I use require() in a JS file to include a JSX source file that defines one of my react components and then attempt to mount an instance of that component using ReactDOM.render and JSX syntax, i'm receiving the following error:
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of xxx.
Up to this point in the other areas of my app I've always included the react components thusly:
ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);
That has always worked. But now that I've bought in to the browserify world to chain these source files together, if i include the line
var MyComponent = require('./MyComponent.jsx');
...and then proceed to try to include an instance of the component with:
ReactDOM.render(<MyComponent />, $("#reactTarget")[0]);
I receive the error above. Now given that all of this is new and somewhat fuzzy to me, i'm not 100% sure that it's the browserify aspect of this which is causing the issue, but it sure feels like it.
I've also tried react.createClass, passing in the 'MyComponent' variable from the requires line, but no joy.
I have this mostly working but of course putting the data on the screen - in this case using react - is the whole point of the thing so, the fact that i now have a functional dispatcher, actions, stores and API calls is exciting but i can no longer simply compose my react components as i used to.
what am i missing here? There must be a way to combine these techniques and technologies but i haven't been able to find an example that equates to this particular combination.
Thanks in advance.
I sometimes wonder what life would be like if I were a smarter animal. I've just spent an entire day - a weekend day, no less, chasing down phantom solutions and alternate configurations until I wanted to cry when in fact my issue was that I'd left off the 's' in module.exports at the end of my component definition. That bloody 's' cost me years of my life, I suspect. That's what I get for not copying/pasting when I'm toying with tings I barely understand. I guess I learned a lot in the process, maybe I'll get those hours back over time.
Thanks to anyone who made an effort here, or even pondered it at all.
recently I started to work on some big project written in php/js.
It is really big and I have constant problem of backtracing what functions are called where.
Is there any tool, that would import all the code files and draw/write connections between classes, objects, functions and such?
Regards
BOUML can create UML diagrams out of your code
http://www.bouml.fr/
old 4.23 version is also free if that is needed
http://download.cnet.com/BOUML/3000-2094_4-10788888.html
I am using Intellij IDEA with the PHP Storm Plugin for my PHP/JS-Projects. There I'm able to right click a function and choose "Find Usage ALT+F7". Now I can see, where this function is getting called.
Intellij IDEA/PHP-Storm is also able to generate UML-Diagrams if needed.
I guess Netbeans, Eclipse+PHP-Plugin do have similar functions [maybe execpt of the uml-generator], if you need an IDE at no costs.
I'm trying to run envjs and Rhino in a java application to render SVGs with D3.js.
So far, I can evaluate smaller functions using Rhino but when it comes to setting up envjs, the problems begin. The most important one is that the only tutorial for envjs talks about a file called env.rhino.js. But I have no idea where to find it.
Can anybody help me out?
(Yes, google shows some results but they are not officially belonging to Rhino or envjs)
I know this answer is very late. But I want to do the same and had the same problems - maybe this will help the next one. It took a while to figure out which one of the hundrets of github forks on env-js will do the job. I found out that this combination will work for a simple test:
git clone https://github.com/thatcher/envjs-site.git
#note the different fork!
wget https://raw.github.com/thatcher/env-js/master/src/dom/sizzle.js
wget http://d3js.org/d3.v3.min.js
java -jar dist/env-js-1.1.jar
load("lib/env.rhino.js");
load("sizzle.js");
load("d3.v3.min.js");
d3.select("body").append("svg").selectAll("line").data([1,2]).enter().append("line").attr("x1", function(d){return d;});
document.innerHTML;
<html><head/><body><line/><line/><svg xmlns="http://www.w3.org/2000/svg"><line x1="1"/><line x1="2"/></svg></body><line/><line/></html>
j
First, download env.rhino.js.
Then, use this Java code to start a Rhino instance and load Env.js:
import org.mozilla.javascript.Context;
import org.mozilla.javascript.tools.shell.Global;
import org.mozilla.javascript.tools.shell.Main;
Context cx = Context.enter();
Global scope = new Global(cx);
cx.setOptimizationLevel(-1);
cx.setLanguageVersion(Context.VERSION_1_5);
Now you can load and run a JavaScript file (using its absolute file-system path)
Main.processFile(cx, scope, ABSOLUTE_PATH_TO_SOME_JAVASCRIPT_FILE);
And/or evaluate JavaScript code and get its String result
(String)cx.evaluateString(scope, "alert('Its WORKING!')", "js", 1, null);
I did attempt this but couldn't go very far. I also wanted to generate SVGs on server side, with requests being initiated from java(Glassfish in my case). The only way you can do this is with jsdom & Node.js. I am able to do this successfully. Sadly, other than Node.js + jsdom, there seems no other way to do this.
Once you get it working, there are bigger problems lurking if you try to heavily load Node.js with SVG generation requests.