Fix: Update asset path for flags in issue #172

[RashidHussain786]

Description

This PR addresses the issue of flag images not being displayed correctly. The changes made ensure that the correct paths are set for the flag assets, which allows them to be included in the build output. This resolves the visibility issue and improves user experience when selecting flags.

Changes Made

• Updated the asset path for flag images in the Vite configuration file to ensure correct inclusion in the build.
• Adjusted the build script to reference the updated flag paths.

Title	---
JIRA link	NA
Slack thread (if any)	NA
Product spec	NA
Tech spec/One-pager	NA
Bundle Size Difference	NA
Fixes Issue	#172

Type of change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• This change is a documentation update

How Has This Been Tested?

• Verified that the correct flag images are displayed after the build process.

• Tested on major browsers (Chrome and Firefox).

• Confirmed the issue does not reoccur in a local development environment.

• Is your change backward compatible ?

• Tested on major browsers (Chrome, Firefox, Safari, IE) ?

• Tested in a consumer application(s) ?

Additional Notes

The changes have been validated locally, and the flags now load as expected. If further adjustments are required, please let me know.

Checklist:

• Add Jira ID(s) in PR title and in the description?
• I have performed a self-review of my code
• I have commented my code, particularly in hard-to-understand areas
• My code is written in TypeScript and follows the coding standards of the project.
• I have added relevant documentation and updated the README if necessary.
• My commit messages are clear and follow the project's commit message conventions.
• Is any external library added?
• My changes do not introduce any new runtime errors or warnings.
• All relevant unit tests have been added/updated in my PR for the change.
• Any Screenshots (mobile & desktop) required for PR? If yes, have you added the respective screenshots ?
• Any manual dev testing done by you on beta/func environment?
• Reviewer added (SLA 2 days)

Reviewer Checklist

• Sufficient QA/Dev-Testing is done with proof (test cases list)
• Ensure that the change in bundle size falls within the acceptable range.

---

PR Title Format

Format: (fix: fix flag image loading issue)

Types can be as follows:

• feat: (new feature for the user, not a new feature for build script)
• fix: (bug fix for the user, not a fix to a build script)
• docs: (changes to the documentation)
• style: (formatting, missing semi colons, etc; no production code change)
• refactor: (refactoring production code, eg. renaming a variable)
• test: (adding missing tests, refactoring tests; no production code change)
• chore: (updating grunt tasks etc; no production code change)

[changeset-bot]

⚠️ No Changeset found

Latest commit: a1eb2a9

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[RgnDunes]

Test thoroughly

[RashidHussain786]

Hi @RgnDunes,

We need to build the i18nify-playground. In the current PR, I only made changes to the configuration file (vite.config.js) to address the flag image path issue, but I haven't included the built files.

The reason I didn't include the build is that generally, we avoid committing build artifacts (like the dist folder) directly into the repository, as these can be generated during the deployment process.

Would you prefer I include the built files in the PR, or should we rely on the existing build pipeline to generate them when the changes are merged?

Looking forward to your guidance on this!

[RgnDunes]

#177 (comment)

@RashidHussain786 it's a simple react application running it locally I should see the changes working, how is it linked with the build files ?

build is required only for deployment purpose and not for testing purpose. Once I spin up the server on local I should see the changes working

[RashidHussain786]

Hi @RgnDunes,

The issue occurs because the flag images are stored outside the public folder (in i18nify-data/assets/flags). React expects static assets to be in public to make them accessible. When I set up the code and ran it, I discovered during debugging that the assets folder did not contain the flag folder, which led me to identify the issue.

Two options to fix:

1. Modify the build process: Automatically copy the flag images from i18nify-data/assets/flags to public/assets/flags using:

   { src: '../../i18nify-data/assets/flags/*', dest: 'public/assets/flags' },

2. Manually copy the files: you can manually move the flag images into public/assets/flags . This works for local testing but isn’t ideal for deployment.

Let me know your preference!