Rails 7.0 application with bootstrap on development mode - ruby-on-rails

I have created a new rails app, after that I have installed bootstrap with cssbundling-rails,
I am now getting an error The asset "application.css" is not present in the asset pipeline. In order to have the application run I need to run the following script
"scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" },
Only after that there is an application file created on assets/builds path.
But I don't want to run this command every time I am updating the css files, I want the server to pick those updates without running the yarn script.
How can I achieve that?

I recently ran into an issue similar to this and the source of the problem was in fact npm and yarn.
A properly configured application using cssbundling-rails should not need to run the command
"scripts": { "build:css": "sass ./app/assets/stylesheets/application.bootstrap.scss ./app/assets/builds/application.css --no-source-map --load-path=node_modules" },
to get the application to generate the build/application.css
npm known issue
Check your npm version, there is an issue if you are not using npm 7.1+ that basically prevents yarn from setting things up correctly.
Run npm -v and if necessary, upgrade npm with npm install -g npm#latest
If you had to upgrade npm, you will then need to close out your terminal and launch a new one, verify that the npm version is greater than 7.1.
After upgrading, re run rails css:install:bootstrap
And everything should be configured correctly.
Bundle Watcher
From the documentation for cssbundling-rails
"You develop using this approach by running the bundler in watch mode in a terminal with yarn build:css --watch (and your Rails server in another, if you're not using something like puma-dev). You can also use ./bin/dev, which will start both the Rails server and the CSS build watcher (along with a JS build watcher, if you're also using jsbundling-rails)."
So, you can either run yarn build:css --watch from a separate terminal in your rails application or just use the ./bin/dev but either way should resolve the issue you are experience.

Related

In Rails 7 with esbuild build, how do I run a script of esbuild fails?

I have this script that runs when running Rails 7 with esbuild build, this is inside package.json in the scripts attribute, it's ran from the Rails procfile:
esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds
however I often find myself with errors with file configs, however the website I'm working on does not show any errors because the last build was there and working.
I'd like the webpage to bread if there's an esbuild error.
I was wondering how do I run another script that deleted the previous build, I tried this:
esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --onFailure \"rm ./app/assets/builds/application.js && rm ./app/assets/builds/application.js.map\"
However it's saying onFailure is an invalid flag.
Is there a way to make esbuild show the error on the site, or just show any error if the build fails?

NPM browserstack alias installed by package.json for TestCafe not recognized

Installing 'testcafe-browser-provider-browserstack' by package.json causes Jenkins job not to recognize 'browserstack'
Tried removing from package.json and install from command line but dependencies cause npm install to error.
testcafe 1.1.4
testcafe-browser-provider-browserstack 1.8.0
npm install
node_modules/.bin/testcafe -e browserstack:safari auth-subscriber-access-myaccount.js
ERROR Unable to find the browser. "browserstack:safari" is not a browser alias or path to an executable file.
One way to debug the issue would be to run the test explicitly with your BrowserStack credentials with the following command -
BROWSERSTACK_USERNAME="YOUR_USERNAME" BROWSERSTACK_ACCESS_KEY="YOUR_KEY" testcafe "browserstack:safari#12.0:OS X Mojave" "path/to/test/file.js"
I tried different paths and also moving to devDependencies in package.json but wasn't successful. I removed from package.json and installed command line at run time and it works.
Maybe I didn't find the right path to call it or it needs to be "local" installed but it now recognizes 'browserstack' this way.

Build executable for windows with Vue CLI Plugin Electron Builder in linux

I'm trying to build an executable file for windows from my linux but so far I have not been able to do it.
According to the documentation, it tells me that here I could configure, for example, the output folder.
pluginOptions: {
electronBuilder: {
outputDir: 'desktop-for-windows',
},
},
and if it works but does not say anything about how to change the platform (s.o) to build.
also try testing the following command:
npm run electron:build --win
but by default it builds for linux
Ran into same thing trying to move from an older boiler plate to using Vue-CLI 3 just now.
Run this from within the project directory and see if it works:
./node_modules/.bin/vue-cli-service electron:build --windows
I got the --windows from the ui.js file in the vue-cli-plugin-electron-builder directory under node_modules. Other options are --linux and --macos. I'm surprised I don't see a --all flag or that all isn't the default.
If you add "build:win": "vue-cli-service electron:build --windows" under scripts in your package.json then you can instead run npm run build:win from there on.
I just faced the same problem and found pretty easy answer.
You can just run npm run electron:build -- --linux deb --win nsis in the project directory.
There is more about it here: https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/recipes.html#multi-platform-build

Electron package no window

I run electron-packager to make a distributable from my app, but when I start the App.app, no window is shown, only the top menu.
Question: How do I best debug / troubleshoot this?
The app starts a web server and makes a tcp connection to another server. The html for the electron app is served from the local web server.
This is the output when building:
$ npx electron-packager ./ App --overwrite
Packaging app for platform darwin x64 using electron v1.8.4
Wrote new app to /Users/user/www/app/App-darwin-x64
I tried to run the node app manually in package, but got this:
$ cd App-darwin-x64/App.app/Contents/Resources/app/
$ npm start
electron not found
From package.json:
"devDependencies": {
"electron": "^1.8.4",
"electron-packager": "^12.0.1"
},
$ node -v
v8.11.1
You can't run the app like that, you need to run it without the Content/Resources/app, as thats not where its stored. You need to run it from App-darwin-x64/App.app. You also don't call npm-start, as that's only called for running in dev.
Maybe try having a look at some example electron apps with build processes, try electron-vue as that has some good examples

Can't run webpack in rails project

I'm trying to run the rails application https://github.com/lumenlearning/OpenAssessments on a linux server. I've been able to get most aspects of it working, but I can't get webpack to run correctly. The project readme states to run the following commands:
$ npm install -g webpack
$ cd client && webpack
Webpack installs correctly, but when I run it as stated, I just get the webpack usage help. I assume this is because there is no webpack.config.js file in the client directory. There is, however, one in client/config: https://github.com/lumenlearning/OpenAssessments/blob/master/client/config/webpack.config.js
If I run webpack in client/config, then webpack is able to find the config file, but I get the following error:
Config did not export an object.
Should I be running webpack in a different way? I am very new to webpack.
Thanks!

Resources