Overriding the HTML / PHP
You can override index.html and any other static file by matching its path
By default, ScandiPWA provides this index file:
source: public/index.html<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" />​<!-- Muli font import from Adobe --><link rel="stylesheet" href="https://use.typekit.net/gbk7rfi.css">​<!-- Default Meta --><title>ScandiPWA</title><meta name="theme-color" content="#ffffff" /><meta name="description" content="Web site created using create-scandipwa-app" />​<!-- Default content-configurations --><script>window.contentConfiguration = {};window.storeList = ['default'];window.storeRegexText = `/(${window.storeList.join('|')})?`;</script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
If you want to change any of these values, or import additional assets, you will need to override this file. Simply copy it to public/index.html of your theme's directory, and make the changes you need.
When compiling into Magento 2 theme, the application is using different file, the public/index.php:
source: public/index.php<?php$colorConfig = $this->getThemeConfiguration('color_customization');$contentConfig = $this->getThemeConfiguration('content_customization');$icons = $this->getAppIconData();?><!DOCTYPE html><html lang="<?= $this->getLocaleCode() ?>"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover">​<!-- Muli font import from Abode --><link rel="stylesheet" href="https://use.typekit.net/gbk7rfi.css">​<script>(function() {if (typeof globalThis === 'object') return;Object.prototype.__defineGetter__('__magic__', function() {return this;});__magic__.globalThis = __magic__;delete Object.prototype.__magic__;}());​window.actionName = { type: `<?= $this->getAction(); ?>` };window.contentConfiguration = <?= json_encode($contentConfig) ?> || {};window.storeList = JSON.parse(`<?= $this->getStoreListJson() ?>`);window.storeRegexText = `/(${window.storeList.join('|')})?`;</script>​<!-- Icons --><link rel="shortcut icon" href="/pub/media/favicon/favicon.png">​<?php foreach ($icons['ios_startup'] as $icon): ?><?= sprintf('<link rel="apple-touch-startup-image" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?><?php endforeach; ?>​<?php foreach ($icons['ios'] as $icon): ?><?= sprintf('<link rel="apple-touch-icon" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?><?php endforeach; ?>​<?php foreach ($icons['icon'] as $icon): ?><?= sprintf('<link rel="icon" sizes="%s" href="%s">', $icon["sizes"], $icon["href"]); ?><?php endforeach; ?>​<!-- Manifest --><link rel="manifest" href="/pub/media/webmanifest/manifest.json"><style><?php if ($colorConfig['enable_color_customization']['enable_custom_colors'] !== "0"): ?><?php $colorArray = $colorConfig['primary_colors'] + $colorConfig['secondary_colors']; ?>:root {<?php foreach ($colorArray as $code => $color): ?><?php if (strpos($code, 'color') !== false): ?><?= sprintf('--imported_%s: #%s;', $code, $color); ?><?php endif; ?><?php endforeach; ?>}<?php endif; ?></style></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
If you want to change any of these values, or import additional assets, you will need to override this file. Simply copy it to public/index.php of your theme's directory, and make the changes you need.
Last updated 5 months ago