Skip to content

Commit

Permalink
Merge branch 'next-32786/fix-storefront-watch-6-6' into 'trunk'
Browse files Browse the repository at this point in the history 
NEXT-32786 - Fix storefront watch

See merge request shopware/6/product/platform!12849
  • Loading branch information
@tobiasberge
tobiasberge committed Feb 7, 2024
2 parents fc8a0f7 + 5f50847 commit e3d5783
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 87 deletions.
6 changes: 3 additions & 3 deletions src/Storefront/Resources/app/storefront/build/live-reload-server/index.js
View file
Expand Up @@ -10,7 +10,7 @@ module.exports = function createLiveReloadServer() {

const compiler = webpack(webpackConfig);

const devServerOptions = Object.assign({}, webpackConfig.devServer, {
const devServerOptions = Object.assign({}, webpackConfig[0].devServer, {
open: false,
devMiddleware: {
stats: {
Expand All @@ -20,9 +20,9 @@ module.exports = function createLiveReloadServer() {
});

// start the normal webpack dev server for hot reloading the files
const server = new WebpackDevServer(compiler, devServerOptions);
const server = new WebpackDevServer(devServerOptions, compiler);

server.listen(devServerOptions.port, '0.0.0.0', (err) => {
server.start(devServerOptions.port, '0.0.0.0', (err) => {
if (err) {
reject(err);
}
Expand Down
5 changes: 0 additions & 5 deletions src/Storefront/Resources/app/storefront/src/main.js
View file
Expand Up @@ -39,11 +39,6 @@ initialisation
*/
new ViewportDetection();

// Necessary for the webpack hot module reloading server
if (module.hot) {
module.hot.accept();
}

/*
register plugins
*/
Expand Down
125 changes: 52 additions & 73 deletions src/Storefront/Resources/app/storefront/webpack.config.js
View file
Expand Up @@ -87,51 +87,6 @@ const coreConfig = {
experiments: {
topLevelAwait: true,
},
devServer: (() => {
if (isHotMode) {
return {
static: {
directory: path.resolve(__dirname, 'dist'),
},
open: false,
devMiddleware: {
publicPath: `${hostName}/`,
stats: {
colors: true,
},
},
hot: true,
compress: false,
allowedHosts: 'all',
port: parseInt(process.env.STOREFRONT_ASSETS_PORT || 9999, 10),
host: '127.0.0.1',
client: {
webSocketURL: {
hostname: '0.0.0.0',
protocol: 'ws',
port: parseInt(process.env.STOREFRONT_ASSETS_PORT || 9999, 10),
},
logging: 'warn',
overlay: {
warnings: false,
errors: true,
},
},
headers: {
'Access-Control-Allow-Origin': '*',
},
watchFiles: {
paths: [`${themeFiles.basePath}/**/*.twig`],
options: {
persistent: true,
cwd: projectRootPath,
ignorePermissionErrors: true,
},
},
}
}
return {};
})(),
devtool: (() => {
if (isDevMode || isHotMode) {
return 'eval-cheap-module-source-map';
Expand All @@ -149,7 +104,7 @@ const coreConfig = {
if (isHotMode) {
return {
entry: {
app: [],
css: [],
storefront: [],
},
};
Expand Down Expand Up @@ -292,7 +247,6 @@ const coreConfig = {
output: {
path: path.resolve(__dirname, 'dist'),
filename: './storefront/[name].js',
// publicPath: 'auto',
chunkFilename: './storefront/[name].js',
},
performance: {
Expand All @@ -316,28 +270,6 @@ const coreConfig = {

return []
})(),
/**
* We hard-code the relocation of the core storefront.js from the configured webpack output directory
* to /dist/storefront/js/ to avoid breaking changes in the current theme.json which requires this location.
*/
new (class SwCopyAfterBuildPlugin {
apply(compiler) {
compiler.hooks.done.tap('sw-copy-after-build', () => {
const from = path.resolve(__dirname, 'dist/js/storefront.js');
const to = path.resolve(__dirname, 'dist/storefront/js/storefront.js');

if (!fs.existsSync(from)) {
return;
}

// Create output directory
fs.mkdirSync(path.resolve(__dirname, 'dist/storefront/js'), { recursive: true });

// Move file to new location which is used by theme.json
fs.renameSync(from, to);
});
}
})(),
],
resolve: {
extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json', '.less', '.sass', '.scss', '.twig' ],
Expand Down Expand Up @@ -415,7 +347,7 @@ if (isHotMode) {
throw new Error(`Unable to write file "${scssEntryFilePath}". ${error.message}`);
}

coreConfig.entry.app = [scssEntryFilePath];
coreConfig.entry.css = [scssEntryFilePath];

coreConfig.entry.storefront = [...themeFiles.script].map((file) => {
return file.filepath;
Expand All @@ -429,6 +361,7 @@ const pluginConfigs = pluginEntries.map((plugin) => {
let customPluginConfig = {};

if (plugin.webpackConfig) {
// eslint-disable-next-line no-console
console.log(chalk.green(`# Plugin "${plugin.name}": Extends the webpack config successfully`));

const pluginWebpackConfigFn = require(path.resolve(plugin.webpackConfig));
Expand All @@ -452,9 +385,10 @@ const pluginConfigs = pluginEntries.map((plugin) => {
[plugin.technicalName]: plugin.filePath,
},
output: {
path: path.resolve(plugin.path, '../dist/storefront'),
filename: `./js/${plugin.technicalName}/[name].js`,
chunkFilename: `./js/${plugin.technicalName}/[name].js`,
// In dev mode use same path as the core storefront to be able to access all files in multi-compiler-mode
path: isHotMode ? path.resolve(__dirname, 'dist') : path.resolve(plugin.path, '../dist/storefront'),
filename: isHotMode ? `./${plugin.technicalName}/[name].js` : `./js/${plugin.technicalName}/[name].js`,
chunkFilename: isHotMode ? `./${plugin.technicalName}/[name].js` : `./js/${plugin.technicalName}/[name].js`,
},
plugins: [
new WebpackBar({
Expand All @@ -474,6 +408,51 @@ const pluginConfigs = pluginEntries.map((plugin) => {
const mergedCoreConfig = merge([
coreConfig,
{
devServer: (() => {
if (isHotMode) {
return {
static: {
directory: path.resolve(__dirname, 'dist'),
},
open: false,
devMiddleware: {
publicPath: `${hostName}/`,
stats: {
colors: true,
},
},
hot: false,
compress: false,
allowedHosts: 'all',
port: parseInt(process.env.STOREFRONT_ASSETS_PORT || 9999, 10),
host: '127.0.0.1',
client: {
webSocketURL: {
hostname: '0.0.0.0',
protocol: 'ws',
port: parseInt(process.env.STOREFRONT_ASSETS_PORT || 9999, 10),
},
logging: 'warn',
overlay: {
warnings: false,
errors: true,
},
},
headers: {
'Access-Control-Allow-Origin': '*',
},
watchFiles: {
paths: [`${themeFiles.basePath}/**/*.twig`],
options: {
persistent: true,
cwd: projectRootPath,
ignorePermissionErrors: true,
},
},
}
}
return {};
})(),
entry: {
storefront: `${path.resolve('src')}/main.js`,
},
Expand Down
12 changes: 6 additions & 6 deletions src/Storefront/Resources/views/storefront/layout/meta.html.twig
View file
Expand Up @@ -197,12 +197,12 @@
{% block layout_head_javascript_hmr_mode %}
{% if isHMRMode %}
{% block layout_head_javascript_hmr_dev %}
<script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-node.js" defer></script>
<script type="text/javascript" src="/_webpack_hot_proxy_/js/vendor-shared.js" defer></script>
<script type="text/javascript" src="/_webpack_hot_proxy_/js/runtime.js" defer></script>
<script type="text/javascript" src="/_webpack_hot_proxy_/js/app.js" defer></script>
{# The storefront entry is a combined entry point which contains all plugins & themes #}
<script type="text/javascript" src="/_webpack_hot_proxy_/js/storefront.js" defer></script>
{# Entry point for dev-server CSS #}
<script type="text/javascript" src="/_webpack_hot_proxy_/storefront/css.js" defer></script>

{% for script in theme_scripts() %}
<script type="text/javascript" src="{{ script|replace({'js/': '/_webpack_hot_proxy_/'}) }}" defer></script>
{% endfor %}
{% endblock %}
{% else %}
{% block layout_head_javascript_prod %}
Expand Down

0 comments on commit e3d5783

Please sign in to comment.