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.

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

Consolidate .yml files into webpacker.yml #403

Merged
merged 27 commits into from
May 22, 2017
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
dc1e539
Consolidate yml config into one file webpacker.yml
gauravtiwari May 20, 2017
eaa5056
Remove enabled
gauravtiwari May 21, 2017
f03ed31
Change case and move extension out of paths
gauravtiwari May 21, 2017
c877358
Change output directory for test
gauravtiwari May 21, 2017
af4be41
Add back argv
gauravtiwari May 21, 2017
58c428d
Use 0.0.0.0 for cloud 9
gauravtiwari May 21, 2017
1702466
Remove manifest overide since we don't use different output
gauravtiwari May 21, 2017
099f080
Revert configuration.rb to use default path-per-key
gauravtiwari May 21, 2017
a60d569
Add https to dev server
gauravtiwari May 21, 2017
32f18cd
Move option up
gauravtiwari May 21, 2017
91c6c7b
Remove config and manifest option
gauravtiwari May 21, 2017
abc53ac
Remove reference to config_path
gauravtiwari May 21, 2017
37706a9
Flatten webpacker settings
gauravtiwari May 21, 2017
f76db0e
Fix extensions
gauravtiwari May 21, 2017
1140244
Update readme
gauravtiwari May 21, 2017
f992607
Update changelog
gauravtiwari May 21, 2017
5e363f3
Use 0.0.0.0 for host
gauravtiwari May 21, 2017
bb19d26
Fix typo
gauravtiwari May 21, 2017
6cdf5d0
Move dev_server to development env
gauravtiwari May 21, 2017
57e082c
Change wording
gauravtiwari May 21, 2017
3046503
Remove contentBase
gauravtiwari May 21, 2017
9d3288a
Fix typo
gauravtiwari May 21, 2017
bfab985
Update changelog and fix compile task
gauravtiwari May 22, 2017
c030cf9
Add a link break
gauravtiwari May 22, 2017
6b60766
Print stdout alongside stderr
gauravtiwari May 22, 2017
6cc0600
Use puts
gauravtiwari May 22, 2017
57e7ecf
Remove extra puts
gauravtiwari May 22, 2017
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@
- New app: `rails new <app> --webpack=elm`
- Within an existing app: `rails webpacker:install:elm`

- Support for custom `output` paths independent of `entry` in `paths.yml`. `output` is also now relative to `public/`. - [#397](https://github.com/rails/webpacker/pull/397)
- Support for custom `output` paths independent of `entry` in `config/webpacker.yml`. `output` is also now relative to `public/`. - [#397](https://github.com/rails/webpacker/pull/397)

Before (compile to `public/packs`):
```yaml
entry: packs
entry: packs
output: public
```
After (compile to `public/sweet/js`):
Expand Down
15 changes: 6 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,32 +101,29 @@ and
## Advanced Configuration

By default, webpacker offers simple conventions for where the webpack configs, javascript app files and compiled webpack bundles will go in your rails app,
but all these options are configurable from `config/webpack/paths.yml` file.
but all these options are configurable from `config/webpacker.yml` file.

```yml
# config/webpack/paths.yml
# config/webpacker.yml
source: app/javascript
entry: packs
output: public
config: config/webpack
node_modules: node_modules
```

*Note:* Behind the scenes, webpacker will use same `entry` directory name inside `output`
directory to emit bundles. For ex, `public/packs`

Similary, you can also control and configure `webpack-dev-server` settings from
`config/webpack/development.server.yml` file
`config/webpacker.yml` file

```yml
# config/webpack/development.server.yml
# config/webpacker.yml
enabled: true
host: localhost
port: 8080
https: false
```

By default, `webpack-dev-server` uses `output` option specified in
`paths.yml` as `contentBase`.
`webpacker.yml` as `contentBase`.

## Linking to static assets

Expand Down
29 changes: 17 additions & 12 deletions lib/install/bin/webpack-dev-server.tt
Original file line number Diff line number Diff line change
Expand Up @@ -10,25 +10,30 @@ RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]

APP_PATH = File.expand_path("../", __dir__)
APP_PATH = File.expand_path("../", __dir__)
CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml")
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")

begin
yaml_config = YAML.load_file(CONFIG_FILE)[NODE_ENV]
paths = yaml_config["paths"]
dev_server = yaml_config["devServer"]

WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "development.js")
DEV_SERVER_HOST = "http#{"s" if dev_server["https"]}://#{dev_server["host"]}:#{dev_server["port"]}"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of dropping ARGV entirely, maybe we should parse it and use the relevant options when supplied. Something along the lines of #{options["host"] || dev_server["host"]}. WDYT?


def load_yaml_config(config_file)
YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
rescue Errno::ENOENT, NoMethodError
puts "Configuration not found in #{config_file}."
puts "Configuration not found in #{CONFIG_FILE}."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end

paths = load_yaml_config("config/webpack/paths.yml")
NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "development.server.js")

dev_server = load_yaml_config("config/webpack/development.server.yml")
DEV_SERVER_HOST = "http#{"s" if dev_server["https"]}://#{dev_server["host"]}:#{dev_server["port"]}"
newenv = {
"NODE_PATH" => NODE_MODULES_PATH.shellescape,
"ASSET_HOST" => DEV_SERVER_HOST.shellescape
}.freeze

newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape, "ASSET_HOST" => DEV_SERVER_HOST.shellescape }
cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG] + ARGV
cmdline = ["yarn", "run", "webpack-dev-server", "--", "--progress", "--color", "--config", WEBPACK_CONFIG]

Dir.chdir(APP_PATH) do
exec newenv, *cmdline
Expand Down
20 changes: 11 additions & 9 deletions lib/install/bin/webpack.tt
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,23 @@ RAILS_ENV = ENV["RAILS_ENV"]
ENV["NODE_ENV"] ||= RAILS_ENV
NODE_ENV = ENV["NODE_ENV"]

APP_PATH = File.expand_path("../", __dir__)
APP_PATH = File.expand_path("../", __dir__)
CONFIG_FILE = File.join(APP_PATH, "config/webpacker.yml")
NODE_MODULES_PATH = File.join(APP_PATH, "node_modules")

begin
yaml_config = YAML.load_file(CONFIG_FILE)[NODE_ENV]
paths = yaml_config["paths"]

WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{NODE_ENV}.js")

def load_yaml_config(config_file)
YAML.load_file(File.join(APP_PATH, config_file))[NODE_ENV]
rescue Errno::ENOENT, NoMethodError
puts "Configuration not found in #{config_file}."
puts "Configuration not found in #{CONFIG_FILE}."
puts "Please run bundle exec rails webpacker:install to install webpacker"
exit!
end

paths = load_yaml_config("config/webpack/paths.yml")
NODE_MODULES_PATH = File.join(APP_PATH, paths["node_modules"])
WEBPACK_CONFIG = File.join(APP_PATH, paths["config"], "#{NODE_ENV}.js")

newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
newenv = { "NODE_PATH" => NODE_MODULES_PATH.shellescape }
cmdline = ["yarn", "run", "webpack", "--", "--config", WEBPACK_CONFIG] + ARGV

Dir.chdir(APP_PATH) do
Expand Down
7 changes: 3 additions & 4 deletions lib/install/config/webpack/configuration.js
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
// Common configuration for webpacker loaded from config/webpack/paths.yml
// Common configuration for webpacker loaded from config/webpacker.yml

const { join, resolve } = require('path')
const { env } = require('process')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')

const configPath = resolve('config', 'webpack')
const configPath = resolve('config', 'webpacker.yml')
const loadersDir = join(__dirname, 'loaders')
const paths = safeLoad(readFileSync(join(configPath, 'paths.yml'), 'utf8'))[env.NODE_ENV]
const devServer = safeLoad(readFileSync(join(configPath, 'development.server.yml'), 'utf8'))[env.NODE_ENV]
const { paths, devServer } = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]

function removeOuterSlashes(string) {
return string.replace(/^\/*/, '').replace(/\/*$/, '')
Expand Down
17 changes: 16 additions & 1 deletion lib/install/config/webpack/development.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,30 @@

const merge = require('webpack-merge')
const sharedConfig = require('./shared.js')
const { devServer, output } = require('./configuration.js')

module.exports = merge(sharedConfig, {
devtool: 'sourcemap',
devtool: 'cheap-module-source-map',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a necessary change or just better source map option?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Recommended source map option in development


stats: {
errorDetails: true
},

output: {
pathinfo: true
},

devServer: {
clientLogLevel: 'none',
host: devServer.host,
port: devServer.port,
contentBase: output.path,
publicPath: output.publicPath,
compress: true,
headers: { 'Access-Control-Allow-Origin': '*' },
historyApiFallback: true,
watchOptions: {
ignored: /node_modules/
}
}
})
17 changes: 0 additions & 17 deletions lib/install/config/webpack/development.server.js

This file was deleted.

17 changes: 0 additions & 17 deletions lib/install/config/webpack/development.server.yml

This file was deleted.

33 changes: 0 additions & 33 deletions lib/install/config/webpack/paths.yml

This file was deleted.

4 changes: 2 additions & 2 deletions lib/install/config/webpack/shared.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,11 +48,11 @@ module.exports = {
extensions: paths.extensions,
modules: [
resolve(paths.source),
resolve(paths.node_modules)
'node_modules'
]
},

resolveLoader: {
modules: [paths.node_modules]
modules: ['node_modules']
}
}
51 changes: 51 additions & 0 deletions lib/install/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
devServer: # https://webpack.js.org/configuration/dev-server/
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

camelCase is uncommon in other .yml files. Maybe rename to dev_server?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will fix 👍

enabled: true # Enabled by default in development
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we using this option anywhere? What's it supposed to do?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yes, we are not using this anymore after #397. Will remove 👍

host: localhost # Dev server host
port: 8080
https: false

paths: # ~ = Rails.root
source: app/javascript # ~/:source
entry: packs # ~/:source/:entry
output: packs # ~/public/:output
manifest: manifest.json # ~/public/:output/:manifest
config: config/webpack # ~/:config
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd like to propose a flattened set of options that drops paths entirely and helps clarifies each option's meaning (the fact that I added the ~ legend is a smell):

 source_path: app/javascript
 source_entry_path: packs
 public_output_path: packs

In doing so, we'd drop the manifest and config options. I'm not sure why you'd want/need to change those, but I'm open to keeping them if there's a compelling reason to.

Copy link
Member Author

@gauravtiwari gauravtiwari May 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it makes sense and since the output directory can be modified the manifest can remain same 👍 Yep, was thinking same for config option - can't think of a scenario this will need changing in any app.

Copy link
Member Author

@gauravtiwari gauravtiwari May 21, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In regards to removing paths, I feel it's much nicer to keep it under some namespace like we have for dev-server - keeps it consistent and clean. WDYT?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually, we should probably flatten all of the namespaces. They don't merge into the environments like you'd expect:

>> config = YAML.load_file("webpacker.yml")

>> config["default"]["paths"]
=> {"source"=>"app/javascript", "entry"=>"packs", "output"=>"packs", "manifest"=>"manifest.json", "config"=>"config/webpack"}

>> config["test"]["paths"]
=> {"output"=>"packs-test"}

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So the dev server options should be flattened to dev_server_host: ..., dev_server_port: ..., etc. if we want to pick and choose options to override within each env.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yepp, that would work 👍 Although a bit repetitive and verbose if we start to have many options, especially for the dev server -dev_server-host, dev_server_port, dev_server_hot, dev_server_https. Namespace gives a bit flexibility on the JS side too - it's easy to extract objects using - { dev_server, paths }

default: &default
  dev_server_host: localhost           
  dev_server_port: 8080
  dev_server_https: false
  dev_server_hot: false
                
  source_path: app/javascript  
  source_entry_path: packs        
  public_output_path: packs     

VS

default: &default
  dev_server:                 # https://webpack.js.org/configuration/dev-server/
    host: localhost           # Dev server host
    port: 8080
    https: false
    hot: false

  paths:                       # ~ = Rails.root
    source: app/javascript     # ~/:source
    entry: packs               # ~/:source/:entry
    output: packs              # ~/public/:output

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The more important part is that those namespaces won't work if you want to change part of them in an environment. For example:

>> config = YAML.load("
default: &default
  paths:
    source: app/javascript
    entry: packs
    output: packs

production:
  <<: *default

  paths:
    output: foo
")
=> {"default"=>{"paths"=>{"source"=>"app/javascript", "entry"=>"packs", "output"=>"packs"}}, "production"=>{"paths"=>{"output"=>"foo"}}}
>> config["production"]["paths"]["source"]
=> nil
>> config["production"]["paths"]["entry"]
=> nil
>> config["production"]["paths"]["output"]
=> "foo"

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh I see 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about this ?

# Note: You must restart bin/webpack-dev-server for changes to take effect

dev_server_defaults: &dev_server_defaults  # https://webpack.js.org/configuration/dev-server/
  host: localhost                          # Dev server host
  port: 8080
  https: false

paths_defaults: &paths_defaults  # ~ = Rails.root
  source: app/javascript        # ~/:source
  entry: packs                  # ~/:source/:entry
  output: packs                 # ~/public/:output

default: &default
  dev_server:
    <<: *dev_server_defaults

  paths:
    <<: *paths_defaults

  extensions:
    - .coffee
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

test:
  <<: *default

  paths:
    <<: *paths_defaults
    output: packs-test

production:
  <<: *default

  dev_server:
    <<: *dev_server_defaults
    host: 0.0.0.0 # Cloud9
    port: 8080
    https: true

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking again - feels like it will be much better if we just flatten it 👍


extensions:
- .coffee
- .js
- .jsx
- .ts
- .vue
- .sass
- .scss
- .css
- .png
- .svg
- .gif
- .jpeg
- .jpg
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WDYT about moving extensions out of paths?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense I think 👍


development:
<<: *default

test:
<<: *default

devServer:
enabled: false

paths:
manifest: manifest-test.json
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe it'd be better to use output: packs-test instead of a different manifest? Then you won't end up with a mix of compiled .js files.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Will fix 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't think we need a different manifest filename if the files are all in separate dir.


production:
<<: *default

devServer:
host: example.com
port:
enabled: false
https: true
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for adding this? Seems like it's encouraging use in production.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some folks are using custom domain + https. Perhaps, I will change this to a dev domain.

Related to #319

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#319 is about using https in development mode if I'm reading it correctly. This is the production config.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh yes my bad, mixed it up with this one - #176. Changed it to 0.0.0.0

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still don't think we should provide any different dev_server options in production. Doing so suggests that we encourage running it in production, which probably isn't a good idea. People can customize if needed.

6 changes: 3 additions & 3 deletions lib/install/elm.rb
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@
"#{Webpacker::Configuration.entry_path}/hello_elm.js"

puts "Installing all elm dependencies"
run "yarn add elm"
run "yarn add --dev elm-hot-loader elm-webpack-loader"
run "yarn add elm elm-webpack-loader"
run "yarn add --dev elm-hot-loader"
run "yarn run elm package install -- --yes"

puts "Updating Webpack paths to include Elm file extension"
insert_into_file Webpacker::Configuration.file_path, " - .elm\n", after: /extensions:\n/
insert_into_file Webpacker::Configuration.file_path, " - .elm\n", after: /extensions:\n/

puts "Updating elm source location"
source_path = File.join Webpacker::Configuration.source, Webpacker::Configuration.paths.fetch(:entry, "packs")
Expand Down
14 changes: 11 additions & 3 deletions lib/install/template.rb
Original file line number Diff line number Diff line change
@@ -1,11 +1,19 @@
# Install webpacker
copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"

puts "Copying webpack core config and loaders"
directory "#{__dir__}/config/webpack", "config/webpack"
directory "#{__dir__}/config/loaders/core", "config/webpack/loaders"
copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"

puts "Copying .babelrc to app root directory"
copy_file "#{__dir__}/config/.babelrc", ".babelrc"
unless File.exist?(".postcssrc.yml")
puts "Copying .postcssrc.yml to app root directory"
copy_file "#{__dir__}/config/.postcssrc.yml", ".postcssrc.yml"
end

unless File.exist?(".babelrc")
puts "Copying .babelrc to app root directory"
copy_file "#{__dir__}/config/.babelrc", ".babelrc"
end

puts "Creating javascript app source directory"
directory "#{__dir__}/javascript", "#{Webpacker::Configuration.source}"
Expand Down
2 changes: 1 addition & 1 deletion lib/tasks/webpacker/verify_install.rake
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ namespace :webpacker do
puts "Webpacker is installed 🎉 🍰"
puts "Using #{Webpacker::Configuration.file_path} file for setting up webpack paths"
else
puts "Configuration config/webpack/paths.yml file not found. \n"\
puts "Configuration config/webpacker.yml file not found. \n"\
"Make sure webpacker:install is run successfully before " \
"running dependent tasks"
exit!
Expand Down
Loading