generator-jhipster 7.1.0 → 7.4.0

package/generators/client/templates/react/src/main/webapp/app/modules/administration/user-management/user-management.tsx.ejs

@@ -18,7 +18,7 @@
 -%>
 import React, { useState, useEffect } from 'react';
 import { Link, RouteComponentProps } from 'react-router-dom';
-import { Button, Table, Row, Badge } from 'reactstrap';
+import { Button, Table, Badge } from 'reactstrap';
 import {
   Translate,
   TextFormat,
@@ -108,7 +108,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
       <h2 id="user-management-page-heading" data-cy="userManagementPageHeading">
         <Translate contentKey="userManagement.home.title">Users</Translate>
         <div className="d-flex justify-content-end">
-          <Button className="mr-2" color="info" onClick={handleSyncList} disabled={loading}>
+          <Button className="me-2" color="info" onClick={handleSyncList} disabled={loading}>
             <FontAwesomeIcon icon="sync" spin={loading} /> <Translate contentKey="userManagement.home.refreshListLabel">Refresh List</Translate>
           </Button>
           <Link to={`${match.url}/new`} className="btn btn-primary jh-create-entity">
@@ -188,7 +188,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
                 ) : null}
               </td>
 <%_ } _%>
-              <td className="text-right">
+              <td className="text-end">
                 <div className="btn-group flex-btn-group-container">
                   <Button
                     tag={Link} to={`${match.url}/${user.login}`}
@@ -216,11 +216,11 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
         </tbody>
       </Table>
 <%_ if (!databaseTypeCassandra) { _%>
-        { totalItems ? (<div className={ users && users.length > 0 ? '' : 'd-none' }>
-          <Row className="justify-content-center">
+        { totalItems ? (<div className={ users?.length > 0 ? '' : 'd-none' }>
+          <div className="justify-content-center d-flex">
             <JhiItemCount page={pagination.activePage} total={totalItems} itemsPerPage={pagination.itemsPerPage} i18nEnabled />
-          </Row>
-          <Row className="justify-content-center">
+          </div>
+          <div className="justify-content-center d-flex">
             <JhiPagination
               activePage={pagination.activePage}
               onSelect={handlePagination}
@@ -228,7 +228,7 @@ export const UserManagement = (props: RouteComponentProps<any>) => {
               itemsPerPage={pagination.itemsPerPage}
               totalItems={totalItems}
             />
-          </Row>
+          </div>
         </div>) : '' }
 <%_ } _%>
     </div>

package/generators/client/templates/react/src/main/webapp/app/modules/home/home.tsx.ejs

@@ -18,7 +18,11 @@
 -%>
 import './home.<%= styleSheetExt %>';
 
+<%_ if (authenticationTypeOauth2) { _%>
 import React, { useEffect } from 'react';
+<%_ } else { _%>
+import React from 'react';
+<%_ } _%>  
 import { Link } from 'react-router-dom';
 import { Translate } from 'react-jhipster';
 import { Row, Col, Alert } from 'reactstrap';
@@ -49,7 +53,7 @@ export const Home = () => {
         <h2><Translate contentKey="home.title">Welcome, <%= backendName %> Hipster!</Translate></h2>
         <p className="lead"><Translate contentKey="home.subtitle">This is your homepage</Translate></p>
         {
-          (account && account.login) ? (
+          (account?.login) ? (
             <div>
               <Alert color="success">
                 <Translate contentKey="home.logged.message" interpolate={{ username: account.login }}>You are logged in as user {account.login}.</Translate>

package/generators/client/templates/react/src/main/webapp/app/modules/login/logout.tsx.ejs

@@ -23,16 +23,12 @@ import { logout } from 'app/shared/reducers/authentication';
 
 export const Logout = () => {
   const logoutUrl = useAppSelector(state => state.authentication.logoutUrl);
-  const idToken = useAppSelector(state => state.authentication.idToken);
   const dispatch = useAppDispatch();
 
   useLayoutEffect(() => {
     dispatch(logout());
     if (logoutUrl) {
-      // if Keycloak, logoutUrl has protocol/openid-connect in it
-      window.location.href = logoutUrl.includes('/protocol')
-        ? logoutUrl + '?redirect_uri=' + window.location.origin
-        : logoutUrl + '?id_token_hint=' + idToken + '&post_logout_redirect_uri=' + window.location.origin;
+      window.location.href = logoutUrl;
     }
   });
 
@@ -44,4 +40,3 @@ export const Logout = () => {
 };
 
 export default Logout;
-

package/generators/client/templates/react/src/main/webapp/app/shared/auth/private-route.spec.tsx.ejs

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary-route.spec.tsx.ejs

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import React from 'react';
 import { Router } from 'react-router-dom';
 import { createMemoryHistory } from 'history';

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary.spec.tsx.ejs

@@ -1,6 +1,3 @@
-/**
- * @jest-environment jsdom
- */
 import React from 'react';
 import { render } from '@testing-library/react';
 

package/generators/client/templates/react/src/main/webapp/app/shared/error/error-boundary.tsx.ejs

@@ -22,8 +22,7 @@ class ErrorBoundary extends React.Component<IErrorBoundaryProps, IErrorBoundaryS
   render() {
     const { error, errorInfo } = this.state;
     if (errorInfo) {
-      const errorDetails =
-        process.env.NODE_ENV === 'development' ? (
+      const errorDetails = DEVELOPMENT ? (
           <details className="preserve-space">
             {error && error.toString()}
             <br />

package/generators/client/templates/react/src/main/webapp/app/shared/layout/footer/footer.tsx.ejs

@@ -22,7 +22,7 @@ import React from 'react';
 import { Translate } from 'react-jhipster';
 import { Col, Row } from 'reactstrap';
 
-const Footer = props => (
+const Footer = () => (
   <div className="footer page-content">
     <Row>
       <Col md="12">

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header-components.tsx.ejs

@@ -23,8 +23,6 @@ import { NavItem, NavLink, NavbarBrand } from 'reactstrap';
 import { NavLink as Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import appConfig from 'app/config/constants';
-
 export const BrandIcon = props => (
   <div {...props} className="brand-icon">
     <img
@@ -34,15 +32,15 @@ export const BrandIcon = props => (
   </div>
 );
 
-export const Brand = props => (
+export const Brand = () => (
 <NavbarBrand tag={Link} to="/" className="brand-logo">
   <BrandIcon />
   <span className="brand-title"><Translate contentKey="global.title"><%= capitalizedBaseName %></Translate></span>
-  <span className="navbar-version">{appConfig.VERSION}</span>
+  <span className="navbar-version">{VERSION}</span>
 </NavbarBrand>
 );
 
-export const Home = props => (
+export const Home = () => (
   <NavItem>
     <NavLink tag={Link} to="/" className="d-flex align-items-center">
       <FontAwesomeIcon icon="home" />

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.spec.tsx.ejs

@@ -16,9 +16,6 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-/**
- * @jest-environment jsdom
- */
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Provider } from 'react-redux';

package/generators/client/templates/react/src/main/webapp/app/shared/layout/header/header.tsx.ejs

@@ -93,7 +93,7 @@ const Header = (props: IHeaderProps) => {
         <NavbarToggler aria-label="Menu" onClick={toggleMenu} />
         <Brand />
         <Collapse isOpen={menuOpen} navbar>
-          <Nav id="header-tabs" className="ml-auto" navbar>
+          <Nav id="header-tabs" className="ms-auto" navbar>
             <Home />
             {props.isAuthenticated && <EntitiesMenu />}
             {props.isAuthenticated && props.isAdmin &&

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/account.spec.tsx.ejs

@@ -16,9 +16,6 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-/**
- * @jest-environment jsdom
- */
 import React from 'react';
 import { render } from '@testing-library/react';
 import { Router } from 'react-router-dom';

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/account.tsx.ejs

@@ -29,7 +29,7 @@ import { getLoginUrl } from 'app/shared/util/url-utils';
 import { NavDropdown } from './menu-components';
 
 
-const accountMenuItemsAuthenticated = (
+const accountMenuItemsAuthenticated = () => (
   <>
 <%_ if (!skipUserManagement) { _%>
     <MenuItem icon="wrench" to="/account/settings" data-cy="settings"><Translate contentKey="global.menu.account.settings">Settings</Translate></MenuItem>
@@ -42,7 +42,7 @@ const accountMenuItemsAuthenticated = (
   </>
   );
 
-const accountMenuItems = (
+const accountMenuItems = () => (
   <>
 <%_ if (!authenticationTypeOauth2) { _%>
     <MenuItem id="login-item" icon="sign-in-alt" to="/login" data-cy="login"><Translate contentKey="global.menu.account.login">Sign in</Translate></MenuItem>
@@ -57,7 +57,7 @@ const accountMenuItems = (
 
 export const AccountMenu = ({ isAuthenticated = false }) => (
   <NavDropdown icon="user" name={translate('global.menu.account.main')} id="account-menu" data-cy="accountMenu">
-    {isAuthenticated ? accountMenuItemsAuthenticated : accountMenuItems}
+    {isAuthenticated ? accountMenuItemsAuthenticated() : accountMenuItems()}
   </NavDropdown>
 );
 

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/admin.tsx.ejs

@@ -25,7 +25,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { NavDropdown } from './menu-components';
 import { Translate, translate } from 'react-jhipster';
 
-const adminMenuItems = (
+const adminMenuItems = () => (
   <>
 <%_ if (applicationTypeGateway && serviceDiscoveryType) { _%>
     <MenuItem icon="road" to="/admin/gateway"><Translate contentKey="global.menu.admin.gateway">Gateway</Translate></MenuItem>
@@ -44,14 +44,14 @@ const adminMenuItems = (
 <%_ } _%>
     {/* jhipster-needle-add-element-to-admin-menu - JHipster will add entities to the admin menu here */}
   </>
-  );
+);
 
-const openAPIItem = (
+const openAPIItem = () => (
   <MenuItem icon="book" to="/admin/docs"><Translate contentKey="global.menu.admin.apidocs">API</Translate></MenuItem>
 );
 
 <% if (devDatabaseTypeH2Any) { %>
-const databaseItem = (
+const databaseItem = () => (
   <DropdownItem tag="a" href="<% if (reactive) { %>http://localhost:8092/<% } else { %>./h2-console/<% } %>" target="_tab">
     <FontAwesomeIcon icon="database" fixedWidth /> <Translate contentKey="global.menu.admin.database">Database</Translate>
   </DropdownItem>
@@ -60,10 +60,10 @@ const databaseItem = (
 
 export const AdminMenu = ({ showOpenAPI <% if (devDatabaseTypeH2Any) { %>, showDatabase <%_ } _%>}) => (
   <NavDropdown icon="users-cog" name={translate('global.menu.admin.main')} id="admin-menu" data-cy="adminMenu">
-      {adminMenuItems}
-      {showOpenAPI && openAPIItem}
+      {adminMenuItems()}
+      {showOpenAPI && openAPIItem()}
 <% if (devDatabaseTypeH2Any) { %>
-      {showDatabase && databaseItem}
+      {showDatabase && databaseItem()}
 <%_ } _%>
   </NavDropdown>
 );

package/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-components.tsx.ejs

@@ -27,7 +27,7 @@ export const NavDropdown = props => (
     <FontAwesomeIcon icon={props.icon} />
     <span>{props.name}</span>
   </DropdownToggle>
-  <DropdownMenu right style={props.style}>
+  <DropdownMenu end style={props.style}>
     {props.children}
   </DropdownMenu>
 </UncontrolledDropdown>

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/authentication.spec.ts.ejs

@@ -16,10 +16,6 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
-
-/**
- * @jest-environment jsdom
- */
 import thunk from 'redux-thunk';
 import axios from 'axios';
 import sinon from 'sinon';
@@ -149,7 +145,7 @@ describe('Authentication reducer tests', () => {
 
   describe('Other cases', () => {
     it('should properly reset the current state when a logout is requested', () => {
-      <%_ if (authenticationTypeOauth2) { _%>const payload = { data: { idToken: 'xyz', logoutUrl: 'http://localhost:8080/logout' } };<%_ } _%>
+      <%_ if (authenticationTypeOauth2) { _%>const payload = { data: { logoutUrl: 'http://localhost:8080/logout' } };<%_ } _%>
       const toTest = authentication(undefined,
       <%_ if (authenticationTypeJwt) { _%>
       logoutSession()

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/authentication.ts.ejs

@@ -42,7 +42,6 @@ export const initialState = {
   errorMessage: null as unknown as string, // Errors returned from server side
   redirectMessage: null as unknown as string,
   sessionHasBeenFetched: false,
-  idToken: null as unknown as string,
   logoutUrl: null as unknown as string,
 };
 
@@ -218,7 +217,6 @@ export const AuthenticationSlice = createSlice({
         <%_ if (!authenticationTypeOauth2) { _%>
         showModalLogin: true
         <%_ } else { _%>
-        idToken: action.payload.data.idToken,
         logoutUrl: action.payload.data.logoutUrl
         <%_ } _%>
       }))

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/index.ts.ejs

@@ -19,25 +19,25 @@
 import { loadingBarReducer as loadingBar } from 'react-redux-loading-bar';
 
 <%_ if (enableTranslation) { _%>
-import locale, { LocaleState } from './locale';
+import locale from './locale';
 <%_ } _%>
-import authentication, { AuthenticationState } from './authentication';
-import applicationProfile, { ApplicationProfileState } from './application-profile';
+import authentication from './authentication';
+import applicationProfile from './application-profile';
 
-import administration, { AdministrationState } from 'app/modules/administration/administration.reducer';
+import administration from 'app/modules/administration/administration.reducer';
 <%_ if (!skipUserManagement) { _%>
-import userManagement, { UserManagementState } from 'app/modules/administration/user-management/user-management.reducer';
+import userManagement from 'app/modules/administration/user-management/user-management.reducer';
 <%_ } else if (authenticationTypeOauth2) { _%>
-import userManagement, { UserManagementState } from './user-management';
+import userManagement from './user-management';
 <%_ } _%>
 <%_ if (!skipUserManagement) { _%>
-import register, { RegisterState } from 'app/modules/account/register/register.reducer';
-import activate, { ActivateState } from 'app/modules/account/activate/activate.reducer';
-import password, { PasswordState } from 'app/modules/account/password/password.reducer';
-import settings, { SettingsState } from 'app/modules/account/settings/settings.reducer';
-import passwordReset, { PasswordResetState } from 'app/modules/account/password-reset/password-reset.reducer';
+import register from 'app/modules/account/register/register.reducer';
+import activate from 'app/modules/account/activate/activate.reducer';
+import password from 'app/modules/account/password/password.reducer';
+import settings from 'app/modules/account/settings/settings.reducer';
+import passwordReset from 'app/modules/account/password-reset/password-reset.reducer';
   <%_ if (authenticationTypeSession) { _%>
-import sessions, { SessionsState } from 'app/modules/account/sessions/sessions.reducer';
+import sessions from 'app/modules/account/sessions/sessions.reducer';
   <%_ } _%>
 <%_ } _%>
 /* jhipster-needle-add-reducer-import - JHipster will add reducer here */

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/locale.ts.ejs

@@ -31,7 +31,7 @@ export type LocaleState =  Readonly<typeof initialState>;
 
 export const setLocale: (locale: string) => AppThunk = locale => async dispatch => {
   if (!Object.keys(TranslatorContext.context.translations).includes(locale)) {
-    const response = await axios.get(`i18n/${locale}.json?buildTimestamp=${process.env.BUILD_TIMESTAMP}`, { baseURL: '' });
+    const response = await axios.get(`i18n/${locale}.json?_=${I18N_HASH}`, { baseURL: '' });
     TranslatorContext.registerTranslations(locale, response.data);
   }
   dispatch(updateLocale(locale));

package/generators/client/templates/react/src/main/webapp/app/shared/reducers/reducer.utils.ts.ejs

@@ -21,7 +21,6 @@ import {
   AsyncThunk,
   ActionReducerMapBuilder,
   createSlice,
-  PayloadAction,
   SerializedError,
   SliceCaseReducers,
   ValidateSliceCaseReducers,

package/generators/client/templates/react/src/main/webapp/app/shared/util/date-utils.ts.ejs

@@ -18,7 +18,7 @@
 -%>
 import dayjs from 'dayjs';
 
-import { APP_LOCAL_DATETIME_FORMAT, APP_LOCAL_DATETIME_FORMAT_Z } from 'app/config/constants';
+import { APP_LOCAL_DATETIME_FORMAT } from 'app/config/constants';
 
 export const convertDateTimeFromServer = date =>
   date ? dayjs(date).format(APP_LOCAL_DATETIME_FORMAT) : null;

package/generators/client/templates/react/src/main/webapp/app/typings.d.ts.ejs

@@ -16,6 +16,12 @@
  See the License for the specific language governing permissions and
  limitations under the License.
 -%>
+declare const VERSION: string;
+declare const SERVER_API_URL: string;
+declare const DEVELOPMENT: string;
+<%_ if (enableTranslation) { _%>
+declare const I18N_HASH: string;
+<%_ } _%>
 
 declare module '*.json' {
     const value: any;

package/generators/client/templates/react/webpack/environment.js.ejs

@@ -0,0 +1,35 @@
+<%#
+ Copyright 2013-2021 the original author or authors from the JHipster project.
+
+ This file is part of the JHipster project, see https://www.jhipster.tech/
+ for more information.
+
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-%>
+<%_ if (buildToolUnknown) { _%>
+const packageJson = require('./../package.json');
+<%_ } _%>
+
+module.exports = {
+<%_ if (buildToolUnknown) { _%>
+  VERSION: packageJson.version,
+<%_ } else { _%>
+  // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
+  VERSION: process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV',
+<%_ } _%>
+  // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
+  // If this URL is left empty (""), then it will be relative to the current context.
+  // If you use an API server, in `prod` mode, you will need to enable CORS
+  // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
+  SERVER_API_URL: ''
+};

package/generators/client/templates/react/webpack/webpack.common.js.ejs

@@ -24,12 +24,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const ESLintPlugin = require('eslint-webpack-plugin');
 <%_ if (enableTranslation) { _%>
+const { hashElement } = require('folder-hash');
 const MergeJsonWebpackPlugin = require('merge-jsons-webpack-plugin');
-<%_ } if (buildToolUnknown) { _%>
-
-const packageJson = require('./../package.json');
 <%_ } _%>
 const utils = require('./utils.js');
+const environment = require('./environment');
 
 const getTsLoaderRule = env => {
   const rules = [
@@ -50,15 +49,20 @@ const getTsLoaderRule = env => {
       }
     }
   ];
-  if (env === 'development') {
-    rules.unshift({
-      loader: 'react-hot-loader/webpack'
-    });
-  }
   return rules;
 };
 
-module.exports = options => merge(
+module.exports = async options => {
+  const development = options.env === 'development';
+<%_ if (enableTranslation) { _%>
+  const languagesHash = await hashElement(path.resolve(__dirname, '../<%= MAIN_SRC_DIR %>i18n'), {
+    algo: 'md5',
+    encoding: 'hex',
+    files: { include: ['*.json'] },
+  });
+
+<%_ } _%>
+return merge(
 {
   cache: {
     // 1. Set cache type to filesystem
@@ -68,7 +72,8 @@ module.exports = options => merge(
       // 2. Add your config as buildDependency to get cache invalidation on config change
       config: [
         __filename,
-        path.resolve(__dirname, `webpack.${options.env == 'development' ? 'dev' : 'prod'}.js`),
+        path.resolve(__dirname, `webpack.${development ? 'dev' : 'prod'}.js`),
+        path.resolve(__dirname, 'environment.js'),
         path.resolve(__dirname, 'utils.js'),
         path.resolve(__dirname, '../postcss.config.js'),
         path.resolve(__dirname, '../tsconfig.json')
@@ -92,21 +97,17 @@ module.exports = options => merge(
         use: getTsLoaderRule(options.env),
         include: [utils.root('./<%= CLIENT_MAIN_SRC_DIR %>app')],
         exclude: [utils.root('node_modules')]
-      },
-      {
-        test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i,
-        loader: 'file-loader',
-        options: {
-          digest: 'hex',
-          hash: 'sha512',
-          name: 'content/[hash].[ext]'
-        }
-      },
+      }
+      /*
+       ,
+       Disabled due to https://github.com/jhipster/generator-jhipster/issues/16116
+       Can be enabled with @reduxjs/toolkit@>1.6.1 
       {
         enforce: 'pre',
         test: /\.jsx?$/,
         loader: 'source-map-loader'
       }
+      */
     ]
   },
   stats: {
@@ -124,25 +125,17 @@ module.exports = options => merge(
     }
   },
   plugins: [
+    new webpack.EnvironmentPlugin({
+      // react-jhipster requires LOG_LEVEL config.
+      LOG_LEVEL: development ? 'info' : 'error',
+    }),
     new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: `'${options.env}'`,
-        <%_ if (enableTranslation) { _%>
-        BUILD_TIMESTAMP: `'${new Date().getTime()}'`,
-        <%_ } _%>
-<%_ if (buildToolUnknown) { _%>
-        VERSION: `'${packageJson.version}'`,
-<%_ } else { _%>
-        // APP_VERSION is passed as an environment variable from the Gradle / Maven build tasks.
-        VERSION: `'${process.env.hasOwnProperty('APP_VERSION') ? process.env.APP_VERSION : 'DEV'}'`,
+<%_ if (enableTranslation) { _%>
+      I18N_HASH: JSON.stringify(languagesHash.hash),
 <%_ } _%>
-        DEBUG_INFO_ENABLED: options.env === 'development',
-        // The root URL for API calls, ending with a '/' - for example: `"https://www.jhipster.tech:8081/myservice/"`.
-        // If this URL is left empty (""), then it will be relative to the current context.
-        // If you use an API server, in `prod` mode, you will need to enable CORS
-        // (see the `jhipster.cors` common JHipster property in the `application-*.yml` configurations)
-        SERVER_API_URL: `''`
-      }
+      DEVELOPMENT: JSON.stringify(development),
+      VERSION: JSON.stringify(environment.VERSION),
+      SERVER_API_URL: JSON.stringify(environment.SERVER_API_URL),
     }),
     new ESLintPlugin({
       extensions: ['js', 'ts', 'jsx', 'tsx']
@@ -186,3 +179,4 @@ module.exports = options => merge(
 }
 // jhipster-needle-add-webpack-config - JHipster will add custom config
 );
+};

package/generators/client/templates/react/webpack/webpack.dev.js.ejs

@@ -23,13 +23,16 @@ const SimpleProgressWebpackPlugin = require('simple-progress-webpack-plugin');
 const WebpackNotifierPlugin = require('webpack-notifier');
 const path = require('path');
 const sass = require('sass');
+<%_ if (enableI18nRTL) { _%>
+const postcssRTLCSS = require('postcss-rtlcss');
+<%_ } _%>
 
 const utils = require('./utils.js');
 const commonConfig = require('./webpack.common.js');
 
 const ENV = 'development';
 
-module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
+module.exports = async (options) => webpackMerge(await commonConfig({ env: ENV }), {
   devtool: 'cheap-module-source-map', // https://reactjs.org/docs/cross-origin-errors.html
   mode: ENV,
   entry: [
@@ -47,7 +50,20 @@ module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
     rules: [
       {
         test: /\.(sa|sc|c)ss$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader', {
+        use: [
+          'style-loader',
+          'css-loader',
+          {
+            loader: 'postcss-loader',
+<%_ if (enableI18nRTL) { _%>
+            options: {
+              postcssOptions: {
+                plugins: [postcssRTLCSS()],
+              },
+            },
+<%_ } _%>
+          },
+          {
             loader: 'sass-loader',
             options: { implementation: sass }
           }
@@ -56,9 +72,10 @@ module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
     ]
   },
   devServer: {
-    stats: options.stats,
     hot: true,
-    contentBase: './<%= DIST_DIR %>',
+    static: {
+      directory: './<%= DIST_DIR %>',
+    },
     port: <%= devServerPort %>,
     proxy: [{
       context: [
@@ -83,9 +100,6 @@ module.exports = (options) => webpackMerge(commonConfig({ env: ENV }), {
       target: 'ws://127.0.0.1:<%= serverPort %>',
       ws: true
     }<% } %>],
-    watchOptions: {
-      ignore: [/node_modules/, utils.root('src/test')],
-    },
     https: options.tls,
     historyApiFallback: true
   },