I've got a Rails 6 project that I am doing by following the book Agile Web Development with Rails 5.1, and I am using Circle CI for the build and tests. I will basically list all my questions at the end of the post.
Below is the part where I install webpacker in my circle.yml
- run:
name: Install webpacker
command: bundle exec rails webpacker:install
That was fine until we've installed React. We've installed React using rails webpacker:install:react. After installing React, I push the code to GitHub and then CircleCI starts building the environment however when it tries to install webpacker I get this conflict below:
conflict config/webpacker.yml
rails aborted!rs/burak/git/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm]
You can see what happens below if I say "yes" to this.
ā°ā$ rails webpacker:install
Warning: you are using an unstable release of Node.js (v15.14.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node
conflict config/webpacker.yml
Overwrite /Users/burak/git/test/agile-rails/config/webpacker.yml? (enter "h" for help) [Ynaqdhm] Y
force config/webpacker.yml
Copying webpack core config
exist config/webpack
identical config/webpack/development.js
identical config/webpack/environment.js
identical config/webpack/production.js
identical config/webpack/test.js
Copying postcss.config.js to app root directory
identical postcss.config.js
Copying babel.config.js to app root directory
conflict babel.config.js
Overwrite /Users/burak/git/test/agile-rails/babel.config.js? (enter "h" for help) [Ynaqdhm] Y
force babel.config.js
Copying .browserslistrc to app root directory
identical .browserslistrc
The JavaScript app source directory already exists
apply /Users/burak/.rvm/gems/ruby-2.7.3/gems/webpacker-5.2.1/lib/install/binstubs.rb
Copying binstubs
exist bin
identical bin/webpack
identical bin/webpack-dev-server
File unchanged! The supplied flag value not found! .gitignore
Installing all JavaScript dependencies [5.2.1]
run yarn add @rails/[email protected] from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] š Resolving packages...
[2/4] š Fetching packages...
[3/4] š Linking dependencies...
warning " > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] šØ Building fresh packages...
[-/3] ā waiting...
success Saved 0 new dependencies.
āØ Done in 50.91s.
Installing dev server for live reloading
run yarn add --dev webpack-dev-server from "."
yarn add v1.22.10
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] š Resolving packages...
[2/4] š Fetching packages...
[3/4] š Linking dependencies...
warning " > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@babel/preset-react > @babel/plugin-transform-react-jsx > @babel/[email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "webpack-dev-server > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
[4/4] šØ Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
āā [email protected]
info All dependencies
āā [email protected]
āØ Done in 1.30s.
Webpacker successfully installed š š°
So the React gets removed from the project if I say "yes" to overwrite, as far as I've understood. If I say "no" to overwrite then everything is fine.
Does it make sense to run rails webpacker:install on another machine? Isn't that command just installing webpacker for the project and not for the machine?
Instead of running rails webpacker:install and then saying "no" to overwrite I can do rails assets:precompile as well which works. Which command do I need to use to be able to successfully setup a Rails project with Webpacker and React on another machine or could someone please show me the right way to set it up?
rails webpacker:install on the CI machine.rails assets:precompile. What it does it compiles all your assets for production, not development use and that's exactly what you'd want on the non-development machine (CI, staging, production).