Using yeoman with triggerio - trigger.io

I am trying to use trigger.io together with yeoman.
I use yeoman for the whole build cycle (scaffolding angularjs application / testing /..)
and trigger.io for the deployment.
Trigger.io generates all in 'src' and yeoman all in 'app' directory.
Is there anyway to make Trigger.io write to an 'app' and not to a 'src' directory?
Edit this seems to work but not very feasible since it requires keeping track of new directories / files generated by yeoman:
ln -s app/index.html index.html
ln -s app/styles styles
ln -s app/scripts scripts
: continue for anything relevant

I ended up symlinking dist to src because we needed Yeoman to compile out SCSS and CoffeScript files. The bummer here is yeoman server cannot be running when you yeoman build to create the dist directory. Additionally bummerish is when you yeoman server again, it cleans up the dist directory.
I plan on working on creating a yeoman generator for generator for Trigger and also add some grunt tasks that mimic the Rakefile tasks I created when we were testing and developing with Sinatra (e.g. yeoman simulator, yeoman device, yeoman testflight).
edit: I've added a few tasks directly to my gruntfile.js for now. I added grunt-contrib-copy and added the following subtasks.
copy: {
app: {
files: {
"src/": "app/**", // core app files
},
},
compass: {
files: {
"src/styles/": "temp/styles/**", // drop in the compiled coffeescript
}
},
coffee: {
files: {
"src/scripts/": "temp/scripts/**" // drop in the compiled scss
}
}
},
I added those tasks to the appropriate watch commands and added a new watch to watch the app dir.
watch: {
coffee: {
files: 'app/scripts/**/*.coffee',
tasks: 'coffee copy:coffee reload'
},
compass: {
files: [
'app/styles/**/*.{scss,sass}'
],
tasks: 'compass copy:compass reload'
},
app: {
files: [
'app/**/*.{html,png,json,css,js}'
],
tasks: 'copy:app'
},
}
Now yeoman server, which invokes yeoman watch, keeps src up to date.
I also brought in grunt-shell to do the following.
shell: {
forge_build: {
command: 'forge build ios 2>&1 | tee output',
stdout: true
},
forge_run_device: {
command: 'forge run ios --ios.device device',
stdout: true
},
forge_run: {
command: 'forge run ios',
stdout: true
}
}
And create some tasks like:
grunt.registerTask("sim", 'copy shell:forge_build shell:forge_run');
grunt.registerTask("device", 'copy shell:forge_build shell:forge_run_device');
I'm not entirely happy with it, but it lets me keep running yeoman server and drop to a console elsewhere and run yeoman device to bring it up in the device. it also keeps the src directory in a place where it can be checked in.
Eventually I'll move this to a yeoman plug in and add some more specific build tasks to clean up the src dir for the appropriate target (e.g. iOS, Android) to keep dir size small.
edit: I've created grunt-forge to help run forge from inside Yeoman. I've also blogged a bit about creating a more terse output for `forge.

Related

How do I get js: yarn build --watch working in my Procfile.dev in a new rails 7 project?

I created my new rails 7.0.3 project using
rails new my_app_name --css tailwind --database=postgresql
Noticed JS isn't working when I run bin/dev. To my Procfile.dev I added
js: yarn build --watch
Got an error saying I was missing a package.json file so I did
npm init --yes and npm install
Instead I got this error
error Command "build" not found.
I found this post, but still I haven't been able to figure out how to fix it for me
https://stackoverflow.com/a/72535848/15885731
From that post, I tried running
./bin/bundle add jsbundling-rails
./bin/rails javascript:install:[esbuild|rollup|webpack]
But I get this error
zsh: bad pattern: javascript:install:[esbuild
zsh: command not found: rollup
zsh: command not found: webpack]
The docs for the gem jsbundling-rails says
"You can configure your bundler options in the build:css script in package.json or via the installer-generated tailwind.config.js for Tailwind"
And I have a tailwind.config.js file, but have no idea what to do with it. It looks like this
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./public/*.html',
'./app/helpers/**/*.rb',
'./app/javascript/**/*.js',
'./app/views/**/*.{erb,haml,html,slim}'
],
theme: {
extend: {
fontFamily: {
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [
require('#tailwindcss/forms'),
require('#tailwindcss/aspect-ratio'),
require('#tailwindcss/typography'),
]
}
And my package.json created from the earlier command doesn't contain any scripts
"scripts": {
},
Any ideas how I solve this?

How can I fix the discrepancy between root directories when building an Electron.js project?

When running my Electron project normally, like electron ./artist-test-kit-main.js, everything works fine. When I build the project into an executable, attempts to load files start failing, like: Uncaught Error: ENOENT: no such file or directory, open 'asset-editor\data.json' So I ran a test to see if there's a difference in the root directory between the normal (electron ./artist-test-kit-main.js) execution and the .exe's.
Within index.js (launched by index.html, launched by artist-test-kit-main.js which is a standard electron.js initiator file):
console.log(fs.readdirSync('./'))
In the .exe, this outputs:
In the normal dev execution (electron ./artist-test-kit-main.js), this outputs:
This usual root directory of the project is, after being packaged, stored in the resources directory seen in the .exe execution root directory. So now all my file reads seem to be broken because of this discrepancy in root directories.
How can I solve this?
My package.json shows the build arguments used:
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "artist-test-kit-main.js",
"dependencies": {
...
},
"scripts": {
"start": "electron .",
"start-artist": "electron ./artist-test-kit-main.js",
"build": "electron-packager ./ game --platform=win32 --arch=x64 --overwrite=true",
"build-art": "electron-packager ./ asset-editor --platform=win32 --arch=x64 --overwrite=true"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"electron-packager": "^15.4.0"
}
}
TLDR
Use __dirname instead of .
Explanation
. refers to the current working directory (cwd), which is the directory in which the node process was started.
For an unpackaged app, this is usually the root folder of your project, producing the expected results. For a packaged app, the cwd will likely be where the Electron executable is stored. The app's contents (what was previously the root folder) are put inside resources/app or resources/app.asar relative to the executable.
The way to unify the packaged and unpackaged scenarios is to use __dirname, which contains the directory of the currently running Node script. This way, it will be the same as using . in an unpackaged app, but will return the path with resources/app in the packaged scenario, as that is then the location of the currently running Node script.
This is why you'll often see people using something like `file://${__dirname}/assets/index.html` to address files in Electron.
Side note
If you use require('./file.js'), the path is evaluated relative to the location of the calling script and will work as if you had used __dirname.

Integrate react-native version 0.62.2 into existing IOs app error

Following react-native document to integrate react-native to existing IOs app. The structure of directory as document to integrate is
android/
ios/
Podfile
#...other ios file
node_modules/
react-native
react
#react-native-community
package.json
....
So that when run pod install from Podfile can call function use_native_modules
require_relative './libs/react-native-libs/node_modules/#react-native-community/cli-platform-ios/native_modules'
...
use_native_modules!
But I want to organize the project different due to not change my existing project structure,
so I add react-native-integrate module like as a part of my IOs project like this
my_ios_project
Podfile
libs/
... other modules
react-native-integrate
node_modules
react-native
#react-native-community
react
package.json
And then I change the path of relative-module:
require_relative './libs/react-native-libs/node_modules/#react-native-community/cli-platform-ios/native_modules'
...
use_native_module!
But the problem is in native_modules files and others libraries in node_modules use absolute require. For example in #react-community/cli-platform-ios/native_module.rb there is a line such as
cli_resolve_script = "try {console.log(require('#react-native-community/cli').bin);} catch (e) {console.log(require('#react-native/cli'))}"
that require absolute path '#react-native-community'. So that when I run Pod install my pod file from parent directory the node can not recognize my children module so that it cause error.
As I know the node_module 'spaths list is basically a list of node_modules directories under every directory from the current directory to the root directory. And the current directory is that the directory of the Podfile that call require 'native_module.rb'
Could you please give me a solution solve this problem like add node path from children directory or something else ? Thank you.
I found a solution:
add package.json file at root ios with property main
add react-native.config.js at root ios project, edit path to cli-platform-ios and cli-platform-android:
'use strict';
const ios = require('./node_modules/#react-native-community/cli-platform-ios');
const android = require('./node_modules/#react-native-community/cli-platform-android');
module.exports = {
commands: [...ios.commands, ...android.commands],
platforms: {
ios: {
linkConfig: ios.linkConfig,
projectConfig: ios.projectConfig,
dependencyConfig: ios.dependencyConfig,
},
android: {
linkConfig: android.linkConfig,
projectConfig: android.projectConfig,
dependencyConfig: android.dependencyConfig,
},
}
};
Run pod install again
Checkout my demo here:
https://github.com/lehoangnam97/demo-intergrate-rn-on-ios

SyntaxError: Cannot use import statement outside a module when run gulp server / gulp watch in my ruby project

On my ruby project when I try to run gulp (gulp server, gulp watch) I have the following error :
Users/workspace/website2019/gulpfile.babel.js:1
import del from 'del';
^^^^^^
SyntaxError: Cannot use import statement outside a module
I don't get how can I fix it, if someone could help me please,
you use babel transpilation with gulp because of the file gulpfile.babel.js For this reason you need to install babel. according to the documentation you need #babel/register and #babel/preset-env for transpiling your import syntax.
So run the following command in your project folder
npm install --save-dev #babel/core #babel/register
Afterwards create the babel configuration file .babelrc in the root folder and add the following lines to it
{
"presets": [
[
"#babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
make sure you have this line in package.json
"type": "module"

Electron fix "ERROR:buffer_manager.cc(488)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL command"

I recently stepped down my electron application removed knex and sqlite since it was painfully complicated to creating a rebuild on windows also when i made an executable for windows sqlite database didn't seem to work. Linux executable worked fine with sqlite guessing the same with mac.
To use sqlite i had rebuilt the application using electron-rebuild. In order to clear the rebuild i did rm -rf node_modules && npm install
I have eventually decided to use IndexDB using dexie.
However now when i try to run my program from npm i get
ERROR:buffer_manager.cc(488)] [.DisplayCompositor]GL ERROR :GL_INVALID_OPERATION : glBufferData: <- error from previous GL command
How do i fix this, why is it happening ?
NB: The application works just fine but this error i the terminal is just annoying and i have no idea why its happenning
Do a test,
electron /path/to/the/app [You will get that Error]
Try
electron --disable-gpu /path/to/the/app [You mayn't get that Error]
The fix was to add "--disable-gpu" to the command-line to force the
web view not to use gpu features. I was able to accomplish this in an
electron app by editing the package.json file in app root and changing
the line like "start": "electron ." to "start": "electron .
--disable-gpu"
Refer https://github.com/electron/electron/issues/7834#issuecomment-275802528
Based on Sudhakar RS answer , I made a script in my package.json to not use GL
here is my package.json
{
...
"scripts": {
"start": "electron --disable-gpu .", // --disable GL ERROR and use CPU
...
}
...
}
Then in your terminal run
npm run start
I had the same error running electron-quick-start but not when running electron-boilerplate.
Investigating the error I found this question and for me also, starting with "electron --disable-gpu ." prevents the error message. But I didn't have to do that with electron-boilerplate. So, comparing the two I traced the difference to the inclusion of electron-debug in electron-boilerplate and, ultimately, to this: process.stderr.fd.
Thus far, the minimal change I have found sufficient to avoid the error is:
diff --git a/main.js b/main.js
index 3508c8e..7df262b 100644
--- a/main.js
+++ b/main.js
## -2,6 +2,8 ##
const {app, BrowserWindow} = require('electron')
const path = require('path')
+process.stderr.fd;
+
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow
So, now I am trying to understand what process.stderr.fd; does and how it prevents the error message from appearing. It seems odd that merely getting the file descriptor of stderr would prevent the error but evidently it does.
I am also curious about the relative merits of disabling the GPU Vs getting the file descriptor.
edit: it is sufficient to get the stream with process.stderr; it is not necessary to get the file descriptor.
My solution for issue:
"dev": ".electron-vue/dev-runner.js --disable-gpu"

Resources