Question: Website Layout Broken After Running Npm Run Build

Website Layout Broken After Running Npm Run Build

G'Day, I have successfully installed the app on my localhost and it was working fine. I then followed the instructions to translate the app to my language. I have done the following:

AM

Alessandro Masciadri

Asked
G'Day,

I have successfully installed the app on my localhost and it was working fine. I then followed the instructions to translate the app to my language.

I have done the following:
- copied the folder `lang/en` and renamed into `lang/it`
- copied the file `lang/en.json` and renamed into `lang/it.json`
- added this line `{ "value": "it", "label": "Italian", "flag": "IT" },` into the file `lang/languages.json`
- run `npm i`
- run `npm run build`

Unfortunately, the front end layout is now broken (attached screenshot). Any idea how to fix it?
  • MS

    Mian Saleem

    Answered
    Hello,

    Was the command completed successfully?

    If yes then please check the console in browser developer tools for error and check the like `@vite` in the `resources/views/app.blade.php` that should be `@vite('resources/js/app.js', '')`
  • N

    Nishad

    Answered
    Copy the /public/css folder from the originally downloaded WIMS package and replace the css folder /resources/css on your installed application then run "npm run build"
  • AM

    Alessandro Masciadri

    Answered
    Unfortunately neither of the above solution fixed the issue. I was actually able to get back to a working layout copying entirely the `public` folder. However, as soon as I redo the command `npm rub build` the app layout brakes down again.

    This is the output of the command:

    ```> build
    > rm -rf ./public/assets && vite build

    vite v5.4.11 building for production...
    ✓ 740 modules transformed.
    [plugin:vite:reporter] [plugin vite:reporter]
    (!) /app/lang/en.json is dynamically imported by /app/resources/js/app.js but also statically imported by /app/resources/js/Core/i18n.js, dynamic import will not move module into another chunk.

    [plugin:vite:reporter] [plugin vite:reporter]
    (!) /app/lang/languages.json is dynamically imported by /app/resources/js/app.js but also statically imported by /app/resources/js/Core/i18n.js, dynamic import will not move module into another chunk.

    rendering chunks (111)...
    PWA v0.20.5
    WARNING: "theme_color" is missing from the web manifest, your application will not be able to be installed
    public/registerSW.js 0.13 kB
    public/manifest.webmanifest 0.78 kB
    public/manifest.json 60.83 kB │ gzip: 4.44 kB
    public/assets/app-ComZMNmD.css 4.52 kB │ gzip: 1.32 kB
    public/assets/SectionBorder-BhNQHZX7.js 0.26 kB │ gzip: 0.21 kB
    public/assets/Label-CnLJ3ppa.js 0.33 kB │ gzip: 0.25 kB
    public/assets/SectionTitle-C09Hrcw-.js 0.34 kB │ gzip: 0.26 kB
    public/assets/InputError-D0vVUexW.js 0.35 kB │ gzip: 0.27 kB
    public/assets/AuthenticationCard-j5DVaPdy.js 0.42 kB │ gzip: 0.31 kB
    public/assets/ActionMessage-DkjV2EZF.js 0.45 kB │ gzip: 0.32 kB
    public/assets/AuthenticationCardLogo-DAHSNPzJ.js 0.51 kB │ gzip: 0.36 kB
    public/assets/ApplicationLogo-BTlL__tC.js 0.51 kB │ gzip: 0.36 kB
    public/assets/Input-CqSfLxP2.js 0.51 kB │ gzip: 0.34 kB
    public/assets/ActionSection-BxWGOh8t.js 0.52 kB │ gzip: 0.34 kB
    public/assets/DangerButton-DzHvE7-y.js 0.56 kB │ gzip: 0.38 kB
    public/assets/ValidationErrors-XghByvux.js 0.56 kB │ gzip: 0.39 kB
    public/assets/SecondaryButton-B14KTA5N.js 0.58 kB │ gzip: 0.39 kB
    public/assets/Checkbox-J6Yu4QSP.js 0.63 kB │ gzip: 0.41 kB
    public/assets/TermsOfService-C2kkW4Ts.js 0.71 kB │ gzip: 0.46 kB
    public/assets/PrivacyPolicy-CfthPVMO.js 0.71 kB │ gzip: 0.46 kB
    public/assets/DialogModal-0HuBL3Jh.js 0.76 kB │ gzip: 0.45 kB
    public/assets/v4-DvF23Exx.js 0.82 kB │ gzip: 0.45 kB
    public/assets/TrashedMessage-DjqNCIDl.js 0.82 kB │ gzip: 0.51 kB
    public/assets/Button-BEbimMcK.js 1.08 kB │ gzip: 0.48 kB
    public/assets/CheckBox-B-ysoEZp.js 1.15 kB │ gzip: 0.67 kB
    public/assets/LoadingButton-nRpT7Lvy.js 1.20 kB │ gzip: 0.76 kB
    public/assets/Error-97sbfORD.js 1.21 kB │ gzip: 0.66 kB
    public/assets/FormSection-BeGzXLXF.js 1.30 kB │ gzip: 0.71 kB
    public/assets/Dialog-bgTmda7J.js 1.36 kB │ gzip: 0.74 kB
    public/assets/TextareaInput-CWCB7eHv.js 1.39 kB │ gzip: 0.76 kB
    public/assets/SelectInput-CtACLJzU.js 1.42 kB │ gzip: 0.78 kB
    public/assets/ApplicationMark-OOlPl2lf.js 1.62 kB │ gzip: 0.49 kB
    public/assets/VerifyEmail-DTKyHtiG.js 1.81 kB │ gzip: 0.97 kB
    public/assets/ConfirmPassword-JWbq1Ksr.js 1.85 kB │ gzip: 0.97 kB
    public/assets/TextInput-BqVpDc4O.js 1.87 kB │ gzip: 0.79 kB
    public/assets/Show-BRt5-kNS.js 1.96 kB │ gzip: 0.95 kB
    public/assets/Show-CWrIJRcy.js 2.03 kB │ gzip: 0.97 kB
    public/assets/Show-CZ-UnMg-.js 2.04 kB │ gzip: 0.97 kB
    public/assets/Show-DO6xffyB.js 2.04 kB │ gzip: 0.97 kB
    public/assets/Show-Bn2myjWK.js 2.07 kB │ gzip: 0.97 kB
    public/assets/Show-BJGlaYjE.js 2.18 kB │ gzip: 0.97 kB
    public/assets/Modal-BdcSub5a.js 2.18 kB │ gzip: 0.99 kB
    public/assets/ForgotPassword-T0br-Ugm.js 2.33 kB │ gzip: 1.18 kB
    public/assets/DropdownLink-CT7DPOTY.js 2.35 kB │ gzip: 1.09 kB
    public/assets/Index-D4vyQmIz.js 2.43 kB │ gzip: 0.95 kB
    public/assets/SelectVariantModal-BI541z_W.js 2.56 kB │ gzip: 1.33 kB
    public/assets/FileInput-CHx0lmoj.js 2.57 kB │ gzip: 1.22 kB
    public/assets/ResetPassword-BPAOXVWL.js 2.59 kB │ gzip: 1.09 kB
    public/assets/Trail-p6wDuGM8.js 2.74 kB │ gzip: 1.28 kB
    public/assets/throttle-DMpMg2gK.js 2.78 kB │ gzip: 1.34 kB
    public/assets/DeleteUserForm-D5-RSbKB.js 2.83 kB │ gzip: 1.21 kB
    public/assets/UpdatePasswordForm-Br3cpmAl.js 3.01 kB │ gzip: 1.10 kB
    public/assets/TwoFactorChallenge-CuwDUVLq.js 3.06 kB │ gzip: 1.33 kB
    public/assets/Login-CYf56-cd.js 3.10 kB │ gzip: 1.42 kB
    public/assets/Alerts-DE_Z3X8G.js 3.24 kB │ gzip: 1.54 kB
    public/assets/Import-DmbZgr4-.js 3.33 kB │ gzip: 1.56 kB
    public/assets/Import-D3Imtdvh.js 3.36 kB │ gzip: 1.58 kB
    public/assets/Import-CyPMb3u1.js 3.36 kB │ gzip: 1.57 kB
    public/assets/Register-7TjnJP6Y.js 3.42 kB │ gzip: 1.38 kB
    public/assets/Import-u6NAGPZ-.js 3.43 kB │ gzip: 1.61 kB
    public/assets/Pagination-Ch0ceMbj.js 3.60 kB │ gzip: 1.24 kB
    public/assets/Import-CImGSZkX.js 3.82 kB │ gzip: 1.77 kB
    public/assets/Import-yQnV2KDw.js 3.82 kB │ gzip: 1.77 kB
    public/assets/UpdateProfileInformationForm-nU_-O9GS.js 3.84 kB │ gzip: 1.59 kB
    public/assets/Index-B0VOz104.js 3.92 kB │ gzip: 1.88 kB
    public/assets/Import-N9SgygH7.js 3.93 kB │ gzip: 1.82 kB
    public/assets/LogoutOtherBrowserSessionsForm-CCDTjBww.js 4.43 kB │ gzip: 1.91 kB
    public/assets/Index-hRn62qTY.js 4.48 kB │ gzip: 1.95 kB
    public/assets/Index-FWLTTR1R.js 4.81 kB │ gzip: 2.10 kB
    public/assets/Index-DxMc32Zp.js 5.22 kB │ gzip: 2.20 kB
    public/assets/Index-BPGMbV9M.js 5.49 kB │ gzip: 2.31 kB
    public/assets/Index-C0kXu8JH.js 5.64 kB │ gzip: 2.30 kB
    public/assets/Index-BIOYl4V3.js 5.65 kB │ gzip: 2.34 kB
    public/assets/Form-CSxPG9UA.js 5.96 kB │ gzip: 1.88 kB
    public/assets/Form-Dv0nYXbm.js 6.09 kB │ gzip: 2.27 kB
    public/assets/Adjustment-CyXqAm2a.js 6.19 kB │ gzip: 2.41 kB
    public/assets/Details-ByFBj9kK.js 6.20 kB │ gzip: 2.14 kB
    public/assets/Form-CBahKvWU.js 6.25 kB │ gzip: 2.25 kB
    public/assets/AutoComplete-C6mr2vQ1.js 6.27 kB │ gzip: 2.44 kB
    public/assets/Transfer-CMpPKaBW.js 6.28 kB │ gzip: 2.43 kB
    public/assets/Checkin-BUdohsIa.js 6.30 kB │ gzip: 2.44 kB
    public/assets/Checkout-DMjspCG7.js 6.33 kB │ gzip: 2.45 kB
    public/assets/Details-DbSZPqAS.js 6.57 kB │ gzip: 2.22 kB
    public/assets/TwoFactorAuthenticationForm-DedS0xb4.js 6.80 kB │ gzip: 2.36 kB
    public/assets/Details-DHVwZFQI.js 7.01 kB │ gzip: 2.23 kB
    public/assets/Form-CLzxOSQe.js 7.21 kB │ gzip: 2.49 kB
    public/assets/Form-DGOjba8y.js 7.32 kB │ gzip: 2.63 kB
    public/assets/SearchFilter-CgTmSZ-d.js 7.48 kB │ gzip: 3.55 kB
    public/assets/Details-BLiMoter.js 7.62 kB │ gzip: 2.57 kB
    public/assets/Details-DkuLeN-b.js 7.74 kB │ gzip: 2.60 kB
    public/assets/Index-AmgGOtOk.js 7.94 kB │ gzip: 2.48 kB
    public/assets/ApiTokenManager-CMgIdEwA.js 8.21 kB │ gzip: 2.94 kB
    public/assets/Form-DCP74QRM.js 9.01 kB │ gzip: 3.02 kB
    public/assets/Index-B79ckHmv.js 10.45 kB │ gzip: 3.49 kB
    public/assets/Index-CwEuRV0C.js 10.55 kB │ gzip: 3.54 kB
    public/assets/Index-DVNRbAD3.js 10.60 kB │ gzip: 3.54 kB
    public/assets/Index-SmA5dYC_.js 10.69 kB │ gzip: 3.54 kB
    public/assets/_baseIsEqual-Bf-KGvd3.js 12.36 kB │ gzip: 5.00 kB
    public/assets/Index-DJHAHOVK.js 12.84 kB │ gzip: 4.10 kB
    public/assets/Index-DTkDgz8B.js 14.29 kB │ gzip: 3.98 kB
    public/assets/Form-CnbyLEKn.js 14.56 kB │ gzip: 4.37 kB
    public/assets/Form-C7MT53nI.js 21.57 kB │ gzip: 4.24 kB
    public/assets/it-DvTgC80J.js 22.14 kB │ gzip: 6.50 kB
    public/assets/fr-C_MQm4GR.js 22.73 kB │ gzip: 7.35 kB
    public/assets/pt-kyGu0O9b.js 23.30 kB │ gzip: 8.74 kB
    public/assets/es-BBq6fVDy.js 23.85 kB │ gzip: 8.80 kB
    public/assets/bg-BCeZ6dM6.js 24.15 kB │ gzip: 10.21 kB
    public/assets/Form-CdHaYLMh.js 24.58 kB │ gzip: 6.55 kB
    public/assets/Form-C2StxA7M.js 24.70 kB │ gzip: 6.57 kB
    public/assets/Form-MiWD905j.js 24.85 kB │ gzip: 6.62 kB
    public/assets/Form-CzcEVNJr.js 24.85 kB │ gzip: 6.58 kB
    public/assets/AdminLayout-BcSp10G5.js 29.18 kB │ gzip: 7.01 kB
    public/assets/JsBarcode-C-9OWE7z.js 60.32 kB │ gzip: 11.92 kB
    public/assets/Index-JiUtuwj9.js 300.57 kB │ gzip: 111.16 kB
    public/assets/app-Bxpdjn0I.js 368.43 kB │ gzip: 125.67 kB
    ✓ built in 3.33s

    PWA v0.20.5
    mode generateSW
    precache 350 entries (4429.97 KiB)
    files generated
    public/sw.js
    public/workbox-e3490c72.js```
  • AM

    Alessandro Masciadri

    Answered
    All good my friends. It was a matter of permissions.
    When running `npm run build` changes the permissions to the `assets` folder. Once the right user permission are assigned everything get back to work.

    Thanks anyway for the great support.

    Cheers.
    Alex
  • N

    Nishad

    Answered
    It's good to know that your problem has been solved!
  • Login to Reply