diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js index 9a22c0b71..aad6e4849 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js +++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/bundles/HelloWorld/components/HelloWorldServer.js @@ -2,4 +2,4 @@ import HelloWorld from './HelloWorld'; // This could be specialized for server rendering // For example, if using React-Router, we'd have the SSR setup here. -export default HelloWorld; \ No newline at end of file +export default HelloWorld; diff --git a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js index df3e1aa79..2500bef98 100644 --- a/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js +++ b/lib/generators/react_on_rails/templates/base/base/app/javascript/packs/server-bundle.js @@ -4,5 +4,5 @@ import HelloWorld from '../bundles/HelloWorld/components/HelloWorldServer' // This is how react_on_rails can see the HelloWorld in the browser. ReactOnRails.register({ - HelloWorld + HelloWorld, }) diff --git a/lib/generators/react_on_rails/templates/base/base/babel.config.js b/lib/generators/react_on_rails/templates/base/base/babel.config.js index 1515815ce..cdfa99159 100644 --- a/lib/generators/react_on_rails/templates/base/base/babel.config.js +++ b/lib/generators/react_on_rails/templates/base/base/babel.config.js @@ -1,20 +1,21 @@ +// The source code including full typescript support is available at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/babel.config.js + module.exports = function (api) { - var validEnv = ['development', 'test', 'production'] - var currentEnv = api.env() + const validEnv = ['development', 'test', 'production'] + const currentEnv = api.env() // https://babeljs.io/docs/en/config-files#apienv // api.env is almost the NODE_ENV - var isDevelopmentEnv = api.env('development') - var isProductionEnv = api.env('production') - var isTestEnv = api.env('test') + const isDevelopmentEnv = api.env('development') + const isProductionEnv = api.env('production') + const isTestEnv = api.env('test') - if ( !validEnv.includes(currentEnv)) { - throw new Error( - 'Please specify a valid `NODE_ENV` or ' + + if (!validEnv.includes(currentEnv)) { + throw new Error(`${'Please specify a valid `NODE_ENV` or ' + '`BABEL_ENV` environment variables. Valid values are "development", ' + - '"test", and "production". Instead, received: ' + - JSON.stringify(currentEnv) + - '.' - ) + '"test", and "production". Instead, received: '}${ + JSON.stringify(currentEnv) + }.`) } return { @@ -23,11 +24,11 @@ module.exports = function (api) { '@babel/preset-env', { targets: { - node: 'current' + node: 'current', }, - modules: 'commonjs' + modules: 'commonjs', }, - '@babel/preset-react' + '@babel/preset-react', ], (isProductionEnv || isDevelopmentEnv) && [ '@babel/preset-env', @@ -36,17 +37,17 @@ module.exports = function (api) { useBuiltIns: 'entry', corejs: 3, modules: false, - exclude: ['transform-typeof-symbol'] - } + exclude: ['transform-typeof-symbol'], + }, ], [ '@babel/preset-react', { development: isDevelopmentEnv || isTestEnv, - useBuiltIns: true - } + useBuiltIns: true, + }, ], - ['@babel/preset-typescript', {allExtensions: true, isTSX: true}] + ['@babel/preset-typescript', { allExtensions: true, isTSX: true }], ].filter(Boolean), plugins: [ 'babel-plugin-macros', @@ -56,48 +57,48 @@ module.exports = function (api) { [ '@babel/plugin-proposal-class-properties', { - loose: true - } + loose: true, + }, ], [ '@babel/plugin-proposal-object-rest-spread', { - useBuiltIns: true - } + useBuiltIns: true, + }, ], [ '@babel/plugin-transform-runtime', { helpers: false, regenerator: true, - corejs: false - } + corejs: false, + }, ], [ '@babel/plugin-transform-regenerator', { - async: false - } + async: false, + }, ], [ - "@babel/plugin-proposal-private-property-in-object", + '@babel/plugin-proposal-private-property-in-object', { - "loose": true - } + loose: true, + }, ], [ - "@babel/plugin-proposal-private-methods", + '@babel/plugin-proposal-private-methods', { - loose: true - } + loose: true, + }, ], process.env.WEBPACK_SERVE && 'react-refresh/babel', isProductionEnv && [ 'babel-plugin-transform-react-remove-prop-types', { - removeImport: true - } - ] - ].filter(Boolean) + removeImport: true, + }, + ], + ].filter(Boolean), } } diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js index ddc944160..cb674b721 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/clientWebpackConfig.js @@ -1,3 +1,6 @@ +// The source can be found at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/clientWebpackConfig.js + const commonWebpackConfig = require('./commonWebpackConfig') const configureClient = () => { diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js index e93fa5ba8..8cb88e869 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/commonWebpackConfig.js @@ -1,11 +1,14 @@ +// The source can be found at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/commonWebpackConfig.js + // Common configuration applying to client and server configuration const { webpackConfig: baseClientWebpackConfig, merge } = require('@rails/webpacker') const commonOptions = { resolve: { - extensions: ['.css', '.ts', '.tsx'] - } + extensions: ['.css', '.ts', '.tsx'], + }, } // Copy the object using merge b/c the baseClientWebpackConfig and commonOptions are mutable globals diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js index cd5bb0eb8..c3a96e5f5 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/development.js @@ -1,40 +1,24 @@ +// The source code including full typescript support is available at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js + process.env.NODE_ENV = process.env.NODE_ENV || 'development' -const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin') -const path = require('path') +const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin') + const { devServer, inliningCss } = require('@rails/webpacker') const webpackConfig = require('./webpackConfig') -const developmentEnvOnly = (clientWebpackConfig, serverWebpackConfig) => { - - const isWebpackDevServer = process.env.WEBPACK_DEV_SERVER - - //plugins - if (inliningCss ) { +const developmentEnvOnly = (clientWebpackConfig, _serverWebpackConfig) => { + // plugins + if (inliningCss) { // Note, when this is run, we're building the server and client bundles in separate processes. // Thus, this plugin is not applied. - const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin') - clientWebpackConfig.plugins.push( - new ReactRefreshWebpackPlugin({ - overlay:{ - sockPort: devServer.port - } - }) - ) + clientWebpackConfig.plugins.push(new ReactRefreshWebpackPlugin({ + overlay: { + sockPort: devServer.port, + }, + })) } - - // To support TypeScript type checker on a separate process uncomment the block below and add tsconfig.json - // to the root directory. - // As a reference visit https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/development.js - - // clientWebpackConfig.plugins.push( - // new ForkTsCheckerWebpackPlugin({ - // typescript: { - // configFile: path.resolve(__dirname, '../../tsconfig.json') - // }, - // async: false - // }) - // ) } module.exports = webpackConfig(developmentEnvOnly) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js index 86ee77315..7bd119aec 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/production.js @@ -1,7 +1,8 @@ +// The source can be found at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/production.js + process.env.NODE_ENV = process.env.NODE_ENV || 'production' -// Below code should get refactored but the current way that rails/webpacker v5 -// does the globals, it's tricky const webpackConfig = require('./webpackConfig') const productionEnvOnly = (_clientWebpackConfig, _serverWebpackConfig) => { diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js index 4edf3eeac..149cd8c2e 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/serverWebpackConfig.js @@ -1,3 +1,9 @@ +/* eslint-disable no-unused-vars */ +/* eslint-disable no-param-reassign */ + +// The source can be found at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/serverWebpackConfig.js + const { merge, config } = require('@rails/webpacker') const commonWebpackConfig = require('./commonWebpackConfig') @@ -12,7 +18,7 @@ const configureServer = () => { // We just want the single server bundle entry const serverEntry = { - 'server-bundle': serverWebpackConfig.entry['server-bundle'] + 'server-bundle': serverWebpackConfig.entry['server-bundle'], } if (!serverEntry['server-bundle']) { @@ -26,20 +32,16 @@ const configureServer = () => { // replace file-loader with null-loader serverWebpackConfig.module.rules.forEach((loader) => { if (loader.use && loader.use.filter) { - loader.use = loader.use.filter( - (item) => - !(typeof item === 'string' && item.match(/mini-css-extract-plugin/)) - ) + loader.use = loader.use.filter((item) => + !(typeof item === 'string' && item.match(/mini-css-extract-plugin/))) } }) // No splitting of chunks for a server bundle serverWebpackConfig.optimization = { - minimize: false + minimize: false, } - serverWebpackConfig.plugins.unshift( - new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 }) - ) + serverWebpackConfig.plugins.unshift(new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 1 })) // Custom output for the server-bundle that matches the config in // config/initializers/react_on_rails.rb @@ -55,18 +57,16 @@ const configureServer = () => { // Don't hash the server bundle b/c would conflict with the client manifest // And no need for the MiniCssExtractPlugin - serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter( - (plugin) => - plugin.constructor.name !== 'WebpackAssetsManifest' && + serverWebpackConfig.plugins = serverWebpackConfig.plugins.filter((plugin) => + plugin.constructor.name !== 'WebpackAssetsManifest' && plugin.constructor.name !== 'MiniCssExtractPlugin' && - plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin' - ) + plugin.constructor.name !== 'ForkTsCheckerWebpackPlugin') // Configure loader rules for SSR // Remove the mini-css-extract-plugin from the style loaders because // the client build will handle exporting CSS. // replace file-loader with null-loader - const rules = serverWebpackConfig.module.rules; + const { rules } = serverWebpackConfig.module; rules.forEach((rule) => { if (Array.isArray(rule.use)) { // remove the mini-css-extract-plugin and style-loader @@ -100,10 +100,6 @@ const configureServer = () => { } }); - // TODO: DELETE NEXT 2 LINES - // Critical due to https://github.com/rails/webpacker/pull/2644 - // delete serverWebpackConfig.devServer - // eval works well for the SSR bundle because it's the fastest and shows // lines in the server bundle which is good for debugging SSR // The default of cheap-module-source-map is slow and provides poor info. diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js deleted file mode 100644 index 065efa78c..000000000 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/test.js +++ /dev/null @@ -1,9 +0,0 @@ -process.env.NODE_ENV = process.env.NODE_ENV || 'development' - -const webpackConfig = require('./webpackConfig') - -const testOnly = (_clientWebpackConfig, _serverWebpackConfig) => { - // place any code here that is for test only -} - -module.exports = webpackConfig(testOnly) diff --git a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js index 5f52597e2..e4b075893 100644 --- a/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js +++ b/lib/generators/react_on_rails/templates/base/base/config/webpack/webpackConfig.js @@ -1,3 +1,6 @@ +// The source can be found at: +// https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh/blob/master/config/webpack/webpackConfig.js + const clientWebpackConfig = require('./clientWebpackConfig') const serverWebpackConfig = require('./serverWebpackConfig')