Deployment procedure

Hi, could anyone please direct me towards the docs or other detailed resource for app (manual) deployment procedure?

Thanks

Hi @shrey,
welcome to the community!

Could you clarify where do you need to deploy your app? And do you want to deploy an app built and exported from UI Bakery?

Hi @ev_jennie, i would like to deploy an app built and exported from UIBakery to my own hosting.

But i am not yet familiar with the exact form/configuration of an app export from UIBakery.
Hence, i would like to know the procedure, if possible, for exporting an app and deploying it on a general hosting site.

@shrey

  1. Go to UI Bakery.
  2. Find the Download button right here:
  3. Open the downloaded archive.
  4. Install all the modules and build a project: npm i && npm run build – --prod
  5. Find dist folder.
  6. Deploy wherever you need.

@ev_jennie Thanks for the detailed information!

Although, while installing the modules, i’m seeing the following errors:

npm WARN deprecated buffer@4.9.1: This version of ‘buffer’ is out-of-date. You must update to v4.9.2 or newer
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/@asymmetrik%2Fngx-leaflet - Not found
npm ERR! 404
npm ERR! 404 ‘@asymmetrik/ngx-leaflet@5.0.1’ is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of ‘SampleProject’
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

Could you please also advise regarding this?

@ev_jennie
So, i’ve managed to build the project (Sample Project).
Apparently, there’s some issue with the npm registry.

But now, the app files seem to be configured for ‘root’ folder deployment only.
Hence, the deployed app is not working at all (neither in local nor in cloud).

How can i change the default path for the app as per my destination ?

@shrey
it’s rather difficult to figure out what’s wrong exactly in your case :thinking:
We can suggest checking the guide from Angular on how to deploy their apps. I believe it may help!

Hi @ev_jennie, after a day long triage on this issue, this is what i’ve found so far:

  1. This seems to be a well know issue with Angular. See:

  2. This bug is valid for ALL apps, deployed on ANY hosting (particularly, in subfolders).

  3. To remedy the issue, i:

    • Set the “–baseHref=” in package.json (works for all the files in the App’s root folder, but not subfolders like Assets)
    • tried the following HTML edit in the browser:
      **Original:
      <img _ngcontent-wug-c112="" src="/assets/images/ezgif.com-gif-maker (6)2.jpg" class=“image18”>

      **Modified:
      <img _ngcontent-wug-c112="" src=“assets/images/ezgif.com-gif-maker (6)2.jpg” class=“image18”>

    Worked for some time until the page was refreshed.

  4. Given that this is an App structure/coding based issue, i would like to ask you to make the necessary adjustments in the app generation/code export process to resolve this issue.

Thanks.

Hi @ev_jennie, is there any update on this issue?

Thanks.

Hey @shrey,
Could you please share your username and the project name with me? In direct messages.
We’ll check what’s wrong.

Thanks!

Hello Shrey!
We found the issue but we need more time to fix the bug.
But as a workaround, you need to open your project and change the way to all images from src="/assets/…" to src="./assets/…"
I hope this helps

Hi Artem,
Thanks for the information.
It seems to be working for now.

But i’ll also wait for the permanent fix for this bug.
Because otherwise it’s a bit of a task to make sure to replace the text in all the project files.

I absolutely agree, the fix is in process now.
Thank you for your time