I set up new project with Rails 5.1.4, webpacker 3.0 and Vue.js, i used webpack doc to install Vue with Rails.
When I hit foreman with my Procfile the Vues part fails.
I thought wepacker is smart enough for installing all the basic stuff to run app...
Edit:
bundle exec rails webpacker:install:vue
Gave me this, still doesnt work
const { dev_server: devServer } = require('#rails/webpacker').config
const isProduction = process.env.NODE_ENV === 'production'
const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
const extractCSS = !(inDevServer && (devServer && devServer.hmr)) || isProduction
module.exports = {
test: /\.vue(\.erb)?$/,
use: [{
loader: 'vue-loader',
options: { extractCSS }
}]
}
As webpacker problems don't stop in development, but make deployment more difficult, i just want to mention that it is very easy to avoid the whole issue. Just don't use webpacker, unless you know you really really have to.
Use the cdn's where vue is. Write app code into rails templates (i use halm and either javascript or ruby2js filter). Even small components can be done that way, or then with the x-template syntax.
Works a charm for small scale
So I get rid off this.
I installed vue with rails manually and added vue loader with yarn command
yarn add vue vue-loader vue-template-compiler without from "." at the end.
Thanks for help guys! :)
To get the Javascript dependencies installed so that webpacker can run:
bundle install
yarn install
Then restart the bin/webpack-dev-server since it rarely likes large changes or files moving around.
If you are running Vue on Rails after 2018, you should use the Vue on Rails app template
rails new app -m https://vueonrails.com/vue -d postgresql
It ships with the default configuration and shortcuts. Check out all the things that it ships with -> http://github.com/vueonrails/vueonrails
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 have a docker using rails 5 with react and I am using webpack for the js.
Can i run both rails and node.js (to handle react) on the same AWS task definition (i.e same docker inside Fargate) or do I need to split it in 2 AWS task definitions; One for rails and one for node.js?
I would prefer having everything onto one task definition but I am struggling to find example script for it.
I probably need to tune the webpacker.yml but can't find the right configuration.
Also i wondering how to manage the port 3000 from rails and 3035 from node
Did anybody went through similar case before? or try to do similar thing?
Thanks
If possible, I would recommend precompiling your assets in your Rails container, rather than running a dynamic node.js process to do this on the fly.
Something like:
bundle exec rake assets:precompile
In your Dockerfile should work out.
I am writing a Rails 6 webapp using Webpacker. Its my understanding that auto-prefixing in Rails 6 works out of the box via PostCSS and its autoprefixer plugin.
However I cannot verify if this library is in fact prefixing my css or not.
Is there a way to confirm if a standard default Rails 6.0.0 app auto-prefixes out of the box?
I have run yarn autoprefixer --info to see the css rules and browsers it applies to and its def applying to my browser chrome 77. And I tried using a parameter that it lists as applying to. It still however dosn't show any prefixed css in dev or production.
Im not sure how postcss-preset-env works so i'm not sure if the css only gets prefixed when using a browser that needs the prefix.
Im coming from using autoprefixer-rails gem that hooks into sprockets and just prefixes everything.
Here is my .postcss.config.js file...
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
You can test what your compiled CSS (including PostCSS's output) would look like in production by running
$ RAILS_ENV=production bundle exec rails webpacker:compile
I've started a rails project using rails new with --webpack=react.
I generated a new controller updated my PostgreSQL password in the database.yml.
Up to this point, everything works fine. At this point all I'm trying to do is get react to render the default hello_react.jsx file that was generated as an example by rails.
When I put <%= javascript_pack_tag 'hello_react' %> in my view and run the server I get the following error:
Webpacker::Manifest::MissingEntryError in Home#index Showing
G:/../../../myGroceryList/app/views/home/index.html.erb where line #1
raised:
Webpacker can't find hello_react.js in
G:/../../../myGroceryList/public/packs/manifest.json. Possible causes:
You want to set webpacker.yml value of compile to true for your
environment unless you are using the webpack -w or the
webpack-dev-server. webpack has not yet re-run to reflect updates. You
have misconfigured Webpacker's config/webpacker.yml file. Your webpack
configuration is not creating a manifest. Your manifest contains: { }
I have pushed the project up to GitHub. Any thought on what is going wrong and how to fix this error?
RESOLVED: Resolution in comments
Jonny B,
I encountered the same issue. I was able to determine that I needed to add '.jsx' to my webpacker.yml.
extensions:
- .js
+ - .jsx
- .sass
- .scss
- .css
I also found that webpacker:compile was not being run on page refresh or when files were changed. I needed to run bundle exec rake assets:precompile (or bundle exec rake webpacker:compile) manually after each change to be able to reload and see the changes.
I am running the application via Apache+Mod_Passenger rather than using rails s (I have too many apps in development at the same time to keep starting and stopping a server on the command line). It seems like this doesn't work well with Webpacker's compile-on-demand functionality. Starting a server with rails s will allow me to hit the app on localhost:3000, but the react app doesn't render correctly. After hitting the page via the Puma server on 3000, I can now see the compiled assets working in my Apache/Passenger instance. So, the on-demand compiling seems to only work properly when running in a server started on the command line (rails s) ...which doesn't render correctly. :-/
The other option (better than running 2 servers) is to compile on the command line using bundle exec rake assets:precompile or bundle exec rake webpacker:compile whenever you make a change. Still a PITA, but at least it works ...for now. If I find a better solution, I'll update the answer.
UPDATE
After a lot of playing around, installing different version of NodeJS, Ruby, rbenv, nvm, etc., I was able to determine that the NODE_ENV wasn't being set for the Apache/Passenger environment. Using Rbenv, I was able to add an .rbenv-vars file in my app root containing:
NODE_ENV=development
RACK_ENV=development
RAILS_ENV=development
Now, Webpacker (and NodeJS) see that I am running in development rather than production, and the compile-on-demand is working.
RESOLUTION: As best I can tell this error fires when your public/packs folder is missing the Manifest file or is missing all together. What was happening in my case was Webpackers compilation step was silently failing and not creating the public/packs folder. I checked in a fix to the webpacker gem for this. You can see that fix and conversation here.
if this is the root cause then you can fix with either of these depending on how you prefer to install node packages
yarn install
or
npm install
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.