Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Compile locally for production? #969

Closed
hopewise opened this issue Mar 11, 2019 · 12 comments
Closed

Compile locally for production? #969

hopewise opened this issue Mar 11, 2019 · 12 comments
Labels
discussion

Comments

@hopewise
Copy link

Hi
I need to know how would I compile locally for production rather than at server, as my server resources can not afford the compilation process.
I was looking at this issue at webpacker

I tried : bundle exec rails webpacker:compile , I got error:

Error: Command 'webpacker:compile' not recognized

but I am already have gem 'webpacker' in my Gemfile and its installed..

Can you please tell me how did you compile locally? I just need to locally compile the react project, not the whole assets.
@BookOfGreg
Copy link
Member

BookOfGreg commented Mar 11, 2019 •
edited
Loading 

react-rails-example-app (master)$ rails webpacker:compile
Webpacker is installed 🎉 🍰
Using /Users/me/source/react-rails-example-app/config/webpacker.yml file for setting up webpack paths
Compiling…
Compiled all packs in /Users/me/source/react-rails-example-app/public/packs
react-rails-example-app (master)$

I was able to webpacker:compile on the react-rails-example-app running webpacker 3.0.2 :
https://github.com/BookOfGreg/react-rails-example-app
Are you able to clone this repo down and run that command yourself to rule out problems in your env?

When you run rails -T do you see all the normal webpacker tools?

rails webpacker                          # Lists all available tasks in webpacker
rails webpacker:check_binstubs           # Verifies that bin/webpack & bin/webpack-dev-server ar...
rails webpacker:check_node               # Verifies if Node.js is installed
rails webpacker:check_yarn               # Verifies if Yarn is installed
rails webpacker:clobber                  # Remove the webpack compiled output directory
rails webpacker:compile                  # Compile javascript packs using webpack for production...
rails webpacker:install                  # Install webpacker in this application
rails webpacker:install:angular          # Install everything needed for Angular
rails webpacker:install:elm              # Install everything needed for Elm
rails webpacker:install:react            # Install everything needed for React
rails webpacker:install:vue              # Install everything needed for Vue
rails webpacker:verify_install           # Verifies if webpacker is installed
rails webpacker:yarn_install[arg1,arg2]  # Support for older Rails versions

@hopewise
Copy link
Author

oh, it was because I am on rails 4, I get to use rake, so, it worked as:

bundle exec rake webpacker:compile

but I got this error:

ERROR in ./node_modules/css-loader??ref--1-2!./node_modules/postcss-loader/lib??ref--1-3!./app/javascript/devops/src/index.css
Module build failed: BrowserslistError: Unknown browser query `dead`
    at /Users/samir/Documents/projects/backend/node_modules/autoprefixer/node_modules/browserslist/index.js:164:11
    at Array.reduce (<anonymous>)
    at resolve (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/node_modules/browserslist/index.js:132:18)
    at browserslist (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/node_modules/browserslist/index.js:224:16)
    at Browsers.parse (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/lib/browsers.js:61:16)
    at new Browsers (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/lib/browsers.js:52:30)
    at loadPrefixes (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/lib/autoprefixer.js:70:24)
    at plugin (/Users/samir/Documents/projects/backend/node_modules/autoprefixer/lib/autoprefixer.js:81:24)
    at LazyResult.run (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:277:20)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:192:32)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
    at LazyResult.asyncTick (/Users/samir/Documents/projects/backend/node_modules/postcss/lib/lazy-result.js:204:22)
 @ ./app/javascript/devops/src/index.css 2:14-156
 @ ./app/javascript/devops/src ^\.\/.*$
 @ ./app/javascript/packs/devops.js

@BookOfGreg
Copy link
Member

That looks like an error with browserlist package that its outside of my knowledge I'm afraid.
Maybe related to these?
browserslist/browserslist#266

Did you successfully manage to compile the react-rails-example-app?

@hopewise
Copy link
Author

Yes, I managed to compile the react-rails-example-app successfully, but not my app 😿

@hopewise
Copy link
Author

@BookOfGreg I found a solution to my problem, I just removed the css files from the project, and it compiled normally 👍

Now I have to set compile: false at production for config/webpacker.yml ? as I already compiled locally, but then, I have to include public/packs in git ?

What do you recommend?

@BookOfGreg
Copy link
Member

If you deploy via Git and you want to pre-compile your assets, then you will have to include the public packs you want to deploy with.

The process I follow is to build on CI, and then tar the public folder and deploy the tar to the server rather than from Git directly.

@hopewise
Copy link
Author

I deploy via Capistrano.. I will set compile: false to save server power..

@BookOfGreg
Copy link
Member

That sounds good, if it works for you would you please close the issue. Thank you.

@hopewise
Copy link
Author

Sure, I will close it once I try deployment

@hopewise
Copy link
Author

Okey, here is my deployment log:

..
..

Webpacker is installed 🎉 🍰
Using /var/www/myapp/releases/20190314152431/config/webpacker.yml file for setting up webpack paths
Compiling…
Compilation failed:

Hash: e6a13856e42943387cfc
Version: webpack 3.12.0
Time: 7113ms
                             Asset       Size  Chunks             Chunk Names
    devops-fabf6ca4219f54c425c5.js     162 kB       0  [emitted]  devops
devops-fabf6ca4219f54c425c5.js.map     202 kB       0  [emitted]  devops
                     manifest.json  122 bytes          [emitted]
                  manifest.json.gz   83 bytes          [emitted]
 devops-fabf6ca4219f54c425c5.js.gz    50.9 kB          [emitted]

so, it seems that it does compile however, here is my config/webpacker.yml:

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs
  cache_path: tmp/cache/webpacker

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: false

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: false

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Cache manifest.json for performance
  cache_manifest: true

Any idea?

@PQALAB
Copy link

PQALAB commented Feb 14, 2020 •
edited
Loading

I got around this by using Rsync and a rake task for capistrano.

#app/lib/capistrano/tasks/precompile.rake
Rake::Task['deploy:assets:precompile'].clear

namespace :deploy do
  namespace :assets do
      desc 'Precompile assets locally and then rsync to web servers'
      task :precompile do
        on roles(:web) do
          execute "sudo chown -R deploy:deploy #{release_path}/public/packs/"
          execute "sudo chown -R deploy:deploy #{release_path}/public/assets/"
        end
        %x{bundle exec rake RAILS_ENV=staging assets:precompile assets:clean}
        on roles(:web), in: :parallel do |server|
          run_locally do
            execute :rsync,
              "-a --delete ./public/packs/ #{fetch(:user)}@#{server.hostname}:#{shared_path}/public/packs/"
            execute :rsync,
              "-a --delete ./public/assets/ #{fetch(:user)}@#{server.hostname}:#{shared_path}/public/assets/"
          end
        end

        run_locally do
          execute :rm, '-rf public/assets'
          execute :rm, '-rf public/packs'
        end
      end
    end
end

@hopewise
Copy link
Author

here is what has worked for me, I will close the ticket now

WEBPACKER_PRECOMPILE=false cap production deploy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@BookOfGreg @hopewise @PQALAB