I am building multiple applications with nwjs(node webkit).
My applications will use the same nw runtime, installing multiple instances of nw on the same machine is not productive and useless.
At the moment, I am launching my apps with a shell script pointing to nw executable and passing as argument the path to my .nw archive.
The apps are located in different folders, not in the same folder as nw executable.
So far no issues, but one of the client requests is autoupdates. In order to do that I need to download a new nw archive containing the app source and replace the old one with the new one.
The problem I'm facing is not being able to find the archive path within the running app.
Following commands fails:
process.cwd() - pointing to unpacked archive in a temp folder.
process.execPath - pointing to nw executable
All other attempts (ie window.location etc) fails, since all points to the unpacked files from where the app runs.
Is there a way to get the path of the original archive(nw file)?
I recommend to install nw.js as local module: npm install nw --save for each your project. Then you can run your project with npm start command, assuming you have "start": "./node_modules/.bin/nw" script in the package.json.
Pros:
you can choose nw.js version and build type (SDK/Normal) for each project
you can update nw.js whenever you like
you can pack the whole project into Windows/OSX/Linux installer
Cons:
more files on disk
Bonus: If you would like to programmatically retrieve the path to the nw.js binary use:
var findpath = require('nw').findpath;
var nwpath = findpath();
Related
My Environment
When I develop vue project, I keep track of files in dist folder.
My laptop
I develop vue project -> npm(yarn) run build -> git add everthing in dist folder -> git commit -> push
Production server
git pull -> Everything is good to go (since I already built dist folder on my laptop).
I have URLs of production server and localhost server in my .env file
VUE_APP_PRODUCTION_API=https://myprodserver.com/
VUE_APP_LOCAL_API=http://localhost:3000/
When I use
vue-cli-service serve, it uses localhost server url.
vue-cli-service build, it uses production server url.
(so URL is allocated in build-time, not run-time)
The Problem
But I came across a problem when I added a qa server.
Now, there are three envrionments
1. My laptop
2. qa server
3. production server
I found that vue project in qa server tries to talk to PRODUCION_API (since It pulled the dist folder for production server which I built on my laptop and committed).
What I tried
I created the .env.local in qa server and overwrote the VUE_APP_PRODUCTION_API
# qa server .env.local
VUE_APP_PRODUCTION_API=http://qaserver.com/
and installed npm, yarn
and build
it worked! But... the problem is it makes git status output dirty.
when I git status
changes:
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
I know I can .gitignore dist folder, and build everytime when I git pull in each environment... but that would be bothersome. that would make me have to install npm, yarn, and install whole dependency in production server too. (It wasn't necessary before since I used to build on my laptop)
Question
Do I have to build the project everytime just to change the base url?
Was it right to keep track of dist folder from the fist place?
Is there any Best-Practice you could share me?
Ideally, you would want to deploy your project using a tool like Github Actions or Gitlab CI.
This would allow you to build your projects with the necessary environment variables for the given target environment.
In general, the dist files aren't included in version control, as each developer working on your project would have different versions of it and you would encounter merging conflicts really often.
Here's an example using Github Actions, deploying on Github Pages
Let's say I initialize a project under react-native init <filename>, installed a bunch of node packages, and added code.
Then separately I initialize a different project under react-viro init <filename>, installed a bunch of node packages, and added code.
If I wanted to combine what I created under react-native init into what I created under react-viro init, is it as simple as copying files over and reinstalling missing node packages into the react-viro project?
Assuming you are working in the ./src folder, every file is independent of iOS or Android as part of the JavaScript bundle.
You can simply copy the .js files over and install the node packages in that project.
You probably should not copy any files that are outside the ./src folder, but I also suspect you wouldn't need to. Files in the Android and iOS folders are rarely touched as they contain operating system config settings and custom modules that you would have wrote in the native languages.
If the file renders JSX, you will be safe to just copy it over and hook it back up.
To state it another way, go into the folder that has node_modules in it. You shouldn't copy anything that is in that folder except additional files that you created. This is where people normally create an src folder and place all their JavaScript. You probably have an index file in there that points to ./src/app.js or you may have an index.ios.js and index.android.js that both point to a ./src/app.js. Anything inside src is safe.
That's my best answer without seeing your folders and files.
If you intend to copy code from one react native project to another, make sure the code you intend to copy is JS and not any native files. Make sure you do register the correct component using AppRegistry. Rest assured you can copy the code from one project to another.
Assuming you have a project at folder
/my-project/android
/my-project/ios
/my-project/src
Copy my-project and paste it at your desired folder like
/new-my-project
Change git origin
git remote set-url origin https://gitlab.com/..../**.git
Open /new-my-project/android in Android Studio, and then rename app/java/com.myproject to com.newmyproject
Go to app/build.grade and change com.myproject to com.newmyproject and sync
Create firebase project and download google-services.json file and add to new-my-project/android/app
Build application, then test application under metro bundler
npx react-native start
Create keystore, test notifications, change base_url_api, test apk etc Android finish now, iOS
Update pods on new-my-project/ios
pod install && pod update
open myproject.xcworkspace
Change bundle identifier to org.reactjs.native.newmyproject, version to 1.0, build to 1 and desired Display name. Let it index completely
Setup in firbase and replace GoogleService-Info.Plist file and Clean build folder in xcode
Go to developer.apple.com and create identifiers, APNS certificates, profiles
Download certificates from keychain and upload to firebase
Build the project in simulator/device and test it.
Done
When I build my Electron app for production I still get a node_modules folder with the dependencies. The folder is constituted by:
The dependencies which are installed via package.json I already noticed that I can just delete them from the folder (since their code is inside webpack bundle.js )
ffprobe-static, which actually occupies the largest amount with 40Mb
The nodejs modules such as ajv,deferential, debug, decamelize, etc (158 folders total, while I don't even know most of them, let alone use them directly)
Regarding 2: Is it mandatory to have the binary for ffprobe-static? Can I use ffprobe-static with the ffmpeg.dll given alongside Electron binary?
Regarding 3: Why do I need these and how can I get rid of them? Also, Electron binary already comes with an 18.9Mb node.dll file. Again, can't I use this instead of having again the node_modules?
When I work locally I want to share code among two or more (nwjs and other kinds of) projects. Folder structure:
-project 1
-project 2
-shared code
When releasing the apps I build the external files into a file inside each project app.
But I cannot access files outside the node-webkit/nwjs app folder.
I tried things like:
Setting "chromium-args": "--allow-file-access-from-files" in the manifest file but I think this is default now.
Using file:/// and chromium-extension:/// prepending the relative paths but I think this is only for absolute paths?
Load files dynamically and using path.relative( process.cwd(), "../shared_code/scripts/controllers/searchController.js" );
The user of the app will be able to put it anywhere on his computer.
Is it possible to load js and css files and images from outside the nwjs project folder locally?
nwjs sdk version 0.19.5
I had a similar problem trying to load images outside of the NW.js application. I found that this fixed my issues. Try adding this to your JSON manifest file. This worked for me...
"chromium-args": "--allow-file-access-from-files --allow-file-access --user-data-dir"
Just so you know, I had originally tried this...
"chromium-args": "--allow-file-access-from-files --allow-file-access --user-data-dir --mixed-context"
But it stopped jquery loading.
You can then access files with file:/// and use absolute paths anywhere on the machine.
I hope that helps.
For sharing code, when the code is (or can be) a node module, it's very helpful to be able to npm link it into your project. (It works the same with NW.js apps as for Node.js:)
cd shared-code
npm link
cd ../project-1
npm link shared-code
cd ../project-2
npm link shared-code
I have installed SenchaSDKTools-2.0.0-beta3-windows on my windows Xp 32-bit.
following is the command I am running on command prompt.
C:\Program Files\SenchaSDKTools-2.0.0-beta3>sencha app create MyApp c:\xampp\htdocs\sencha\myapp\
Giving following error
[ERROR] the current workind directory (C:\Program
Files\SenchaSDKTools-2.0.0-beta3>) is not valid SDK directory. Please
'cd' in to a SDK directory before executing this command.
environment variable has been set following way.
Variable name : Path
Value : C:\Program Files\SenchaSDKTools-2.0.0-beta3
can anyone figure out what exactly wrong in this process ?
*****Sencha Touch setup Guide steps(in Window)******
Download Sencha Touch SDK Tool. (http://www.sencha.com/products/touch/download/ -->SDK Tools Beta for Developers). Run .exe file. It will install tool to default path. (i.e. C:\Program Files\SenchaSDKTools-2.0.0-beta3)
Download Sencha Touch SDK. (Download openSource version file licensed under GPL.).
Extract SDK you just download in step 2.
Open Command line terminal (start->Run->type cmd). Change directory path to SDK path as you just extracted in step3.
Verify that Sencha Command is working properly on your machine. So Type Sencha.
E.g. sdkPath>sencha
you will see "Sencha Command v2.0.2" message with other sencha command detail.
Create app in your web directory by typing following.
E.g. sdkpath> sencha app create firstSenchaApp "path/ to/ www"
(If you have tomcat 7 installed in your computer, give path to \apache-tomcat-7.0.30-windows-x86\apache-tomcat-7.0.30\webapps)
Note: There must not be space in directory path name. _(underscore),- (desk) are allowed.
If app is not generated in step 6. There might be an error. There are as follow:
If error message appear is "sencha' is not recognized as an internal or external command, operable program or batch file.”, follow these steps to troubleshoot:
The path to SDK Tools directory is prepended to your system's PATH environment variable.
From the terminal, run
echo $PATH or echo %PATH% .
The SDK Tools directory should be displayed in part of the output. If this is not the case, add it to your PATH manually.
The environment variable SENCHA_SDK_TOOLS_{version} is set, with the value being the absolute path to the installation directory mentioned above.
For example: If the installed version is '2.0.0-beta2', a SENCHA_SDK_TOOLS_2_0_0_BETA2 must be set.
From the terminal, run
echo $SENCHA_SDK_TOOLS_2_0_0_BETA2 or echo %SENCHA_SDK_TOOLS_2_0_0_BETA2% on Windows.
If the output is empty, set the environment variable manually.
Wrong Current Working Directory
A common mistake is not running Sencha Command within either a valid SDK directory or an application directory. If the current directory is not a SDK or application directory, "sencha" command will fallback to backwards-compatible mode. As of SDK Tools release "2.0.0-beta2", you should see a clear warning in such case:
"The current working directory (...) is not a recognized Sencha SDK or application folder. Running in backwards compatible mode." So in this case follow proper step as mentioned above.
Reference:
http://www.sencha.com/forum/showthread.php?192169-Important-SDK-Tools-Sencha-Command-Update
There is an invisible file that you need to copy, called .senchasdk. Make sure it is in the folder.
I think you're having the same problem I had; I had attempted to run 'sencha app create...' from the folder containing sencha.bat. Instead, you need to run 'sencha app create...' from the sencha-touch-2.0.1.1 folder (which contains the .senchasdk file).
See this previous SO question!
Save my days.
By the way, if you can't extract the sencha-cmd to sdk tools, try to extract on other location and copy the folder [3.0.0.250] to your sdk tools > [bin] folder.
hope this helps.