Issue with deployment - Still looking for files at "//localhost:5173/assets/main.js" etc.

[DavidZudu]

All working fine locally, I then stop the watcher, run "npm run build", and upload the theme via FTP to a test site for the client at a sub directory ("dev.example.com/clientname"). I don't upload the node_modules folder.

Everything seems to work except the css and js files are 404ing. Looking at console i get the following:

Any idea what could be causing this? What I'm missing? I've tried the same but with updating the vite.config wordpressHost variable to the target url before building (not even sure if that does anything relevant).

The same process worked pre 2.0 - this is my first 2.0 theme.

Thanks.

[steffenbew]

Hey @DavidZudu, from the screenshot, it looks like your WordPress root URL and paths may be set up incorrectly.
It's trying to load the assets from the path localhost:5175/assets/ where it should be something like dev.example.com/clientname/wp-content/themes/flynt-theme/dist/assets/.
Please review your WordPress settings in regards to that.

Additionally, the asset file names should include a hash after having run npm run build, like that: main-48f23fde.css. Please ensure the build process ran without errors before deploying.

[purchasingtoolpak]

I wanted to share how I deployed Flynt from Local to production. I use Wpvivid free migration plugin to upload and deploy to a new website.

After running 'npm run build' or 'npm run build:production' command you will see a new folder named themes/flynt-theme/dist/assets. In this folder you will find files 4 files you need to enqueue to the website: 1. main-xxxxx.css 2. print-xxxx.css 3. admin-xxxxx.js 4. admin-xxxx.css

Now you need to update how the files are enqueued for deployment in themes/flynt-theme/inc/assets.php. Here is how the code looks in assets.php . You'll need to manually change assets.php file based upon production or development. The below example is for development with production commented out.

`// enqueue files for development
wp_enqueue_style('Flynt/assets/main', Asset::requireUrl('assets/main.scss'), [], null);
wp_enqueue_style('Flynt/assets/print', Asset::requireUrl('assets/print.scss'), [], null, 'print');
// enqueue files for production / deployment (folder and filename change)
// wp_enqueue_style('Flynt/assets/main', Asset::requireUrl('dist/assets/main-xxxxx.css'), [], null);
// wp_enqueue_style('Flynt/assets/print', Asset::requireUrl('dist/assets/print-xxxxx.css'), [], null, 'print');
});

add_action('admin_enqueue_scripts', function () {
wp_enqueue_script('Flynt/assets/admin', Asset::requireUrl('assets/admin.js'), [], null);
// wp_enqueue_script('Flynt/assets/admin', Asset::requireUrl('dist/assets/admin-xxxxx.js'), [], null);
wp_script_add_data('Flynt/assets/admin', 'module', true);

wp_localize_script('Flynt/assets/admin', 'FlyntData', [
    'componentsWithScript' => ComponentManager::getInstance()->getComponentsWithScript(),
    'templateDirectoryUri' => get_template_directory_uri(),
]);

wp_enqueue_style('Flynt/assets/admin', Asset::requireUrl('assets/admin.scss'), [], null);
// wp_enqueue_style('Flynt/assets/admin', Asset::requireUrl('dist/assets/admin-xxxxx.css'), [], null);`

Hope this helps.

Dave

[steffenbew]

Hey @purchasingtoolpak, thank you for your response and support!

I would like to point out, that the manual file changes you are describing shouldn't be necessary.

Here's why: The build process appends hashes to asset files, but it also generates a dist/manifest.json file which maps the file names (e.g. assets/admin.css => assets/admin-8ec00fe0.css). Flynt's Asset utility is designed to load the manifest file and automatically update the paths accordingly.

If you're finding that this isn't happening on your end, I'm really keen to figure out why. Could you share more details on what's going wrong or not working as expected?

[timohubois]

@purchasingtoolpak glad to read, that you found a solution! As @steffenbew noticed it would be keen to figure out why it does not work on your production site, because file changes shouldn't be necessary.

What came to my mind is that the check for the vite hot file is done with get_template_directory()(https://developer.wordpress.org/reference/functions/get_template_directory/) to the the base directory and maybe this does not work as aspected at the production environment or any other code is manipulating it with a hook https://developer.wordpress.org/reference/hooks/template_directory/.

Otherwise, maybe the manifest.json does not exist inside the dist folder or is not readable in relation to its file permissions.

Looking forward to reading again from you ✌️

[purchasingtoolpak]

I did locate the manifest.json file. The main.css and print.css files in json were listed as follows:

 "assets/main.scss": {
    "file": "assets/main-5d03c61d.css",
    "isEntry": true,
    "src": "assets/main.scss"
  },
  "assets/print.scss": {
    "file": "assets/print-3a2b8503.css",
    "isEntry": true,
    "src": "assets/print.scss"
  }

I noticed that there is no main.scss or print.scss in the flynt-theme/dist/assets/ folder. I moved these 2 files from flynt-theme/assets to the flynt-theme/dist/assets folder and ran npm run build:production. Both in Local and after deploying to a website the stylesheets file names were enqueued correctly (it worked).

Perhaps the json line should move up one folder level:
"src": ../assets/main.scss

After I made this change it worked as well.

Hope this helps.

Regards,

Dave