Rename javascript folder to frontend

README.md

@@ -116,7 +116,7 @@ yarn upgrade
 Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
 
 ```yml
-app/javascript:
+app/frontend:
   ├── packs:
   │   # only webpack entry files here
   │   └── application.js
@@ -160,7 +160,7 @@ to the standard Rails log.
 
 If you want to use live code reloading, or you have enough JavaScript that on-demand compilation is too slow, you'll need to run `./bin/webpack-dev-server` or `ruby ./bin/webpack-dev-server`. Windows users will need to run these commands
 in a terminal separate from `bundle exec rails s`. This process will watch for changes
-in the `app/javascript/packs/*.js` files and automatically reload the browser to match.
+in the `app/frontend/packs/*.js` files and automatically reload the browser to match.
 
 ```bash
 # webpack dev server
@@ -315,7 +315,7 @@ 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.
+project in `app/frontend/packs` so that you can experiment with React right away.
 
 
 ### Angular with TypeScript
@@ -333,7 +333,7 @@ setup with Webpacker).
 
 The installer will add the TypeScript and Angular core libraries using Yarn alongside
 a few changes to the configuration files. An example component written in
-TypeScript will also be added to your project in `app/javascript` so that
+TypeScript will also be added to your project in `app/frontend` so that
 you can experiment with Angular right away.
 
 By default, Angular uses a JIT compiler for development environment. This
@@ -369,7 +369,7 @@ rails new myapp --webpack=vue
 
 The installer will add Vue and its required libraries using Yarn alongside
 automatically applying changes needed to the configuration files. An example component will
-be added to your project in `app/javascript` so that you can experiment with Vue right away.
+be added to your project in `app/frontend` so that you can experiment with Vue right away.
 
 If you're using Rails 5.2+ you'll need to enable `unsafe-eval` rule for your development environment.
 This can be done in the `config/initializers/content_security_policy.rb` with the following
@@ -400,7 +400,7 @@ rails new myapp --webpack=elm
 (or run `bundle exec rails webpacker:install:elm` on a Rails app already setup with Webpacker).
 
 The Elm library and its core packages will be added via Yarn and Elm.
-An example `Main.elm` app will also be added to your project in `app/javascript`
+An example `Main.elm` app will also be added to your project in `app/frontend`
 so that you can experiment with Elm right away.
 
 ### Stimulus
@@ -424,7 +424,7 @@ run `bundle exec rails webpacker:install:coffee` on a Rails app already
 setup with Webpacker.
 
 An example `hello_coffee.coffee` file will also be added to your project
-in `app/javascript/packs` so that you can experiment with Coffeescript right away.
+in `app/frontend/packs` so that you can experiment with Coffeescript right away.
 
 ### Erb
 
@@ -433,7 +433,7 @@ run `bundle exec rails webpacker:install:erb` on a Rails app already
 setup with Webpacker.
 
 An example `hello_erb.js.erb` file will also be added to your project
-in `app/javascript/packs` so that you can experiment with Erb-flavoured
+in `app/frontend/packs` so that you can experiment with Erb-flavoured
 javascript right away.
 
 
@@ -444,13 +444,13 @@ app files and compiled webpack bundles will go in your Rails app.
 All these options are configurable from `config/webpacker.yml` file.
 
 The configuration for what webpack is supposed to compile by default rests
-on the convention that every file in `app/javascript/packs/*`**(default)**
+on the convention that every file in `app/frontend/packs/*`**(default)**
 or whatever path you set for `source_entry_path` in the `webpacker.yml` configuration
 is turned into their own output files (or entry points, as webpack calls it). Therefore you don't want to put anything inside `packs` directory that you do not want to be
 an entry file. As a rule of thumb, put all files you want to link in your views inside
-"packs" directory and keep everything else under `app/javascript`.
+"packs" directory and keep everything else under `app/frontend`.
 
-Suppose you want to change the source directory from `app/javascript`
+Suppose you want to change the source directory from `app/frontend`
 to `frontend` and output to `assets/packs`. This is how you would do it:
 
 ```yml

docs/assets.md

@@ -12,7 +12,7 @@ You can also import styles from `node_modules` using the following syntax.
 Please note that your styles will always be extracted into `[pack_name].css`:
 
 ```sass
-// app/javascript/styles.sass
+// app/frontend/styles.sass
 // ~ to tell webpack that this is not a relative import:
 
 @import '~@material/animation/mdc-animation'
@@ -21,7 +21,7 @@ Please note that your styles will always be extracted into `[pack_name].css`:
 
 ```js
 // Your main app pack
-// app/javascript/packs/app.js
+// app/frontend/packs/app.js
 
 import '../styles'
 ```
@@ -39,7 +39,7 @@ import '../styles'
 It's possible to link to assets that have been precompiled by Sprockets. Add the `.erb` extension to your JavaScript file, then you can use Sprockets' asset helpers:
 
 ```erb
-<%# app/javascript/my_pack/example.js.erb %>
+<%# app/frontend/my_pack/example.js.erb %>
 
 <% helpers = ActionController::Base.helpers %>
 const railsImagePath = "<%= helpers.image_path('rails.png') %>"
@@ -88,7 +88,7 @@ You can also link `js/images/styles/fonts` used within your js app in views usin
 create a `<link rel="prefetch">` or `<img />` for an asset.
 
 ```yml
-app/javascript:
+app/frontend:
   - packs
     - hello_react.js
   - styles

docs/css.md

@@ -7,7 +7,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
 ## Import global styles into your JS app
 
 ```sass
-// app/javascript/hello_react/styles/hello-react.sass
+// app/frontend/hello_react/styles/hello-react.sass
 
 .hello-react
   padding: 20px
@@ -16,7 +16,7 @@ Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScr
 
 ```js
 // React component example
-// app/javascript/packs/hello_react.jsx
+// app/frontend/packs/hello_react.jsx
 
 import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
@@ -35,7 +35,7 @@ const Hello = props => (
 Stylesheets end with `.module.*` is treated as [CSS Modules](https://github.com/css-modules/css-modules).
 
 ```sass
-// app/javascript/hello_react/styles/hello-react.module.sass
+// app/frontend/hello_react/styles/hello-react.module.sass
 
 .helloReact
   padding: 20px
@@ -44,7 +44,7 @@ Stylesheets end with `.module.*` is treated as [CSS Modules](https://github.com/
 
 ```js
 // React component example
-// app/javascript/packs/hello_react.jsx
+// app/frontend/packs/hello_react.jsx
 
 import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
@@ -82,14 +82,14 @@ You can use Yarn to add bootstrap or any other modules available on npm:
 yarn add bootstrap
 ```
 
-Import Bootstrap and theme (optional) CSS in your app/javascript/packs/app.js file:
+Import Bootstrap and theme (optional) CSS in your app/frontend/packs/app.js file:
 
 ```js
 import 'bootstrap/dist/css/bootstrap'
 import 'bootstrap/dist/css/bootstrap-theme'
 ```
 
-Or in your app/javascript/app.sass file:
+Or in your app/frontend/app.sass file:
 
 ```sass
 // ~ to tell that this is not a relative import
@@ -166,7 +166,7 @@ const styles = require('../hello_react/styles/hello-react');
 You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
 
 ```js
-// app/javascript/packs/hello_react.jsx
+// app/frontend/packs/hello_react.jsx
 import * as styles from '../hello_react.styles/hello-react.module.scss';
 ```
 

docs/folder-structure.md

@@ -9,7 +9,7 @@ here that you don't want to link in your views.
 
 ## Source
 
-You can put your app source under `app/javascript` folder or whatever you have configured
+You can put your app source under `app/frontend` folder or whatever you have configured
 in `config/webpacker.yml`.
 
 
@@ -18,16 +18,16 @@ in `config/webpacker.yml`.
 Let's say you're building a calendar app. Your JS app structure could look like this:
 
 ```js
-// app/javascript/packs/calendar.js
+// app/frontend/packs/calendar.js
 
 import 'calendar'
 ```
 
 ```
-app/javascript/calendar/index.js // gets loaded by import 'calendar'
-app/javascript/calendar/components/grid.jsx
-app/javascript/calendar/styles/grid.sass
-app/javascript/calendar/models/month.js
+app/frontend/calendar/index.js // gets loaded by import 'calendar'
+app/frontend/calendar/components/grid.jsx
+app/frontend/calendar/styles/grid.sass
+app/frontend/calendar/models/month.js
 ```
 
 ```erb
@@ -45,8 +45,8 @@ But it could also look a million other ways.
 You can also namespace your packs using directories similar to a Rails app.
 
 ```
-app/javascript/packs/admin/orders.js
-app/javascript/packs/shop/orders.js
+app/frontend/packs/admin/orders.js
+app/frontend/packs/shop/orders.js
 ```
 
 and reference them in your views like this:

docs/props.md

@@ -20,7 +20,7 @@ If you're not concerned with view helpers to pass props or server rendering, can
 ```
 
 ```js
-// app/javascript/packs/hello_react.js
+// app/frontend/packs/hello_react.js
 
 const Hello = props => (
   <div className='react-app-wrapper'>

docs/typescript.md

@@ -90,7 +90,7 @@ environment.loaders.append('html', {
 4. Setup a custom `d.ts` definition
 
 ```ts
-// app/javascript/hello_angular/html.d.ts
+// app/frontend/hello_angular/html.d.ts
 
 declare module "*.html" {
   const content: string

lib/install/config/webpacker.yml

@@ -1,7 +1,7 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
+  source_path: app/frontend
   source_entry_path: packs
   public_output_path: packs
   cache_path: tmp/cache/webpacker

lib/install/examples/typescript/tsconfig.json

@@ -8,7 +8,7 @@
     "moduleResolution": "node",
     "baseUrl": ".",
     "paths": {
-        "*": ["node_modules/*", "app/javascript/*"]
+        "*": ["node_modules/*", "app/frontend/*"]
     },
     "sourceMap": true,
     "target": "es5"

lib/install/javascript/packs/application.js → lib/install/frontend/packs/application.js

@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
+// a relevant structure within app/frontend and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate

lib/install/template.rb

@@ -14,10 +14,10 @@
 copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
 
 if Dir.exists?(Webpacker.config.source_path)
-  say "The JavaScript app source directory already exists"
+  say "The Frontend app source directory already exists"
 else
-  say "Creating JavaScript app source directory"
-  directory "#{__dir__}/javascript", Webpacker.config.source_path
+  say "Creating Frontend app source directory"
+  directory "#{__dir__}/frontend", Webpacker.config.source_path
 end
 
 apply "#{__dir__}/binstubs.rb"

lib/webpacker/helper.rb

@@ -45,7 +45,7 @@ def image_pack_tag(name, **options)
 
   # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  # app/frontend/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Example:
   #
@@ -57,7 +57,7 @@ def javascript_pack_tag(*names, **options)
 
   # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
   # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
-  # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
+  # app/frontend/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Note: If the development server is running and hot module replacement is active, this will return nothing.
   # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.

package/environments/__tests__/base.js

@@ -25,7 +25,7 @@ describe('Environment', () => {
     test('should return entry', () => {
       const config = environment.toWebpackConfig()
       expect(config.entry.application).toEqual(
-        resolve('app', 'javascript', 'packs', 'application.js')
+        resolve('app', 'frontend', 'packs', 'application.js')
       )
     })
 
@@ -57,7 +57,7 @@ describe('Environment', () => {
     test('should return default resolve.modules with additions', () => {
       const config = environment.toWebpackConfig()
       expect(config.resolve.modules).toEqual([
-        resolve('app', 'javascript'),
+        resolve('app', 'frontend'),
         resolve('app/assets'),
         resolve('/etc/yarn'),
         'node_modules'

test/compiler_test.rb

@@ -27,7 +27,7 @@ def test_default_watched_paths
     assert_equal Webpacker.compiler.send(:default_watched_paths), [
       "app/assets/**/*",
       "/etc/yarn/**/*",
-      "app/javascript/**/*",
+      "app/frontend/**/*",
       "yarn.lock",
       "package.json",
       "config/webpack/**/*"

test/configuration_test.rb

@@ -10,12 +10,12 @@ def setup
   end
 
   def test_source_path
-    source_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript").to_s
+    source_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/frontend").to_s
     assert_equal source_path, @config.source_path.to_s
   end
 
   def test_source_entry_path
-    source_entry_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/javascript", "packs").to_s
+    source_entry_path = File.expand_path File.join(File.dirname(__FILE__), "test_app/app/frontend", "packs").to_s
     assert_equal @config.source_entry_path.to_s, source_entry_path
   end
 

test/test_app/app/javascript/packs/application.js → test/test_app/app/frontend/packs/application.js

@@ -1,7 +1,7 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
+// a relevant structure within app/frontend and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate

test/test_app/config/webpacker.yml

@@ -1,7 +1,7 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
+  source_path: app/frontend
   source_entry_path: packs
   public_output_path: packs
   cache_path: tmp/cache/webpacker