I have to upgrade a legacy application that uses CKEdtior for the text editor features.
Since the Ruby gem for ckeditor is not so good maintained anymore and Rails 6 seems to be an issue anyway I decided to go straight with webpacker.
I added ckeditor v 4 with a yarn add command and then I am importing the js files in my application.js/active_admin.js files. (import "ckeditor4";)
According to documentation I have to set a CKEDITOR_BASEPATH constant as well. The constant should point to the path where the ckeditor files are located.
To have this files I have configured webpacker with this additional setting: environment.config.set('output.libraryTarget', 'umd')
I thought that this would create a ckeditor directory in my public/packs/js folder but it's not working. How can I make webpack create this folded/files?
I fixed this problem with adding the CopyPlugin and configuring it like this:
environment.plugins.append('CopyPlugin',
new CopyPlugin({
patterns: [
{
from: '{config.js,contents.css,styles.js,adapters/**/*,lang/**/*,plugins/**/*,skins/**/*,vendor/**/*}',
to: resolvePath( distPath, 'js/ckeditor' ),
context: resolvePath( __dirname, '../../node_modules', 'ckeditor4' )
}
]
})
)
Related
TLDR: I NEED TO USE PRETTIER STANDALONE WITH WEBPACK IN RAILS 5.
Prettier docs: https://prettier.io/docs/en/browser.html
I can make it work with the cdn, but I don't want to use the cdn.
I need to format css in a text editor in the browser. I want to use Prettier Standalone for this.
The app is Rails 5.2 that uses Webpacker and Vue.
I am following the documentation here: https://prettier.io/docs/en/browser.html
I run yarn add prettier
Then, in my .js file I have:
import prettier from 'prettier';
import parserCss from 'prettier/parser-postcss';
prettier.format(".foo{color: red;}", {
parser: "css",
plugins: [parserCss],
});
This works in my local development environment, but when I try to deploy the application, the build fails during Webpack compile.
I think I need to configure my webpack or something. If you need more information just let me know and I will update the question.
I've run into an issue with webpacker in my rails app during development. Webpacker should also compile when some of the related config files change, but doesn't since they aren't in the app/javascript folder.
Is there to have webpacker also watch additional files for changes?
More detailed:
I load my css through webpacker. For this I'm using TailwindCSS and postCSS. I tend to change the tailwind config file (located in the application root) quite a bit, to automatically generate additional utilities and/or variant.
However, when I change the tailwind config file it doesn't trigger webpacker to recompile on the next page load. It only recompiles when I change one of the files in the app/javascript folder - even if it is just adding an extra blank line. I would like to avoid having to manually trigger webpacker to recompile.
I have changed nothing to the Rails defaults for webpacker.
In config/webpacker.yml, you want to add files and directories to the resolved_paths section.
resolved_paths:
- app/assets
- tailwind.config.js
There’s more information in this article https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html
I'm trying to configure Webpacker to work with a Rails engine. I'm specifically interested in how people are setting up their webpacker.yml to move their engine's assets to the main app's /public/ folder.
First, I've followed the Webpacker instructions for Using in Rails Engines. However, Step 7 stumps me. The idea here is to set the public_root_path to your app's /public folder. I could obviously hard-code the correct path on my personal machine, but that's unsustainable for production or other devs. I can't rely on ERB to have a dynamic path either.
I also tried the second option of Step 7 which involves middleware, but it didn't seem to have any effect.
I ultimately want to be able to import JavaScript from the engine into the main app from the app/javascript/packs/application.js file. How do I get Webpacker to find the files from the engine without hard-coding the path?
I have tried using npm package reactstrap.
My components:
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
I'm getting the following error:
ExecJS::ProgramError at /dir/xyz
TypeError: require is not a function
The webpacker-gem is the way to go for react + rails, not sprockets, which is ok for jQuery style JS, but not for complicated ES6-based stacks.
From the README:
To use Webpacker with React, create a new Rails 5.1+ app using --webpack=react option:
# Rails 5.1+
rails new myapp --webpack=react
(or run bundle exec rails webpacker:install:react in a existing Rails app already setup with Webpacker).
The installer will add all relevant dependencies using Yarn, changes to the configuration files, and an example React component to your project in app/javascript/packs so that you can experiment with React right away.
Note that you'll be using yarn from then on, instead of npm.
I've got a Rails site with a Jekyll blog incorporated, using the Bloggy gem.
I'd like a similar look for the main site and the blog, so I want to use the css in app/assets/stylesheets, but those files are in css.scss format. Jekyll (in a Bloggy setup) looks for css in config/jekyll/css, and seems to only want .css files; symlinking the Rails css directory into the Jekyll hierarchy doesn't seem to to work.
Is there a way to take advantage of the asset pipeline so that when I run jekyll:build, SCSS files from the Rails app are made into CSS files, placed in the appropriate jekyll directory, and bundled with the latest Jekyll build as it's placed into the /public/blog folder?
Thanks!
Ended up getting through this by:
Using the jekyll-sass gem to allow automatic transformation of the Rails app's .css.scss into .css.css files. By symlinking the Rails app/assets/stylesheets directory into Bloggy's config/jekyll/css, this put files with the right content but wrong extensions in the correct place.
Writing a rake task to make the .css.css files into .css files.
desc 'Make .css.css files into .css files'
task :css_css do
Dir.glob('public/blog/css/*.css.css').each do |file|
puts `mv #{file} #{file.gsub(/\.css\.css$/, '.css')}`
end
end
Not the prettiest solution, but it works.
#Matthew.. You have a nice solution.. For this part I did some stuffs manually. Like I added config/jekyll/css files as .css extension rather than .css.scss so when we run "rake generate" for bloggy the right format files are created on the folder public/blog/ rather css.scss.
I have made the changes in my bloggy portfolio theme project repository. If you are planning to use my version of code, I have did some changes like added robots.txt, sitemap, and integrated bootstrap to the project. I have also removed all database connections from the rails project since it was showing errors while deploying into heroku.