Deploy Downloaded Experience to Website

462
3
Jump to solution
08-25-2021 10:09 AM
WaterHammer
New Contributor II

I have built an Experience using the Developer Edition and have downloaded the Experience directory and want to deploy it to my website (Wordpress site hosted through GoDaddy). 

The Experience directory has a "CDN" directory, and index.html, service-worker.js, and web.config files.

These are the only instructions I can find regarding how to deploy the experience:

https://developers.arcgis.com/experience-builder/guide/deployment-topics/

Question:

1. What would a "common" name be for the Experience directory that is downloaded?  A HTML site directory?  Trying to find another way of googling what I want to do but not sure of the correct terminology.

Any advice on how to proceed with using a downloaded Experience on a Wordpress website would be greatly appreciated.

0 Kudos
1 Solution

Accepted Solutions
WaterHammer
New Contributor II

Both responses got me to the answer, thank you.

In summary:

You can't upload an Experience into wordpress directly.  After publishing/downloading the site, the directory can be uploaded to the web server (https://nz.godaddy.com/help/upload-files-with-sftp-8940). 

Then in WordPress, you can embed the site into a WordPress page using the Custom HTML widget:

<div class="fullheight-container">

  <iframe #window1="" class="full-width" allowfullscreen="true" frameborder="0" src="https://yourDomain.com/theExperienceName"></iframe>

</div>

 

In the yourDomain.com/wp-admin dashboard, add to the CSS via:

Dashboard-Appearance-Customize-Additional CSS, then add:

.fullheight-container {
max-width: 100%;
max-height: 100%;
width: 90vw;
height: 90vh;
overflow: hidden;
}

.full-width {
min-width: 100%;
min-height: 100%;
background: black;
}

This will allow the Experience to be full width of the page and look like it does in Experience Builder.

View solution in original post

3 Replies
jcarlson
MVP Notable Contributor

I'm less familiar w/ Wordpress, but you should be able to just put the folder in your website's wwwroot directory.

https://your-portal/your-experience would correspond to C:/inetpub/wwwroot/your-experience, "your-experience" being the folder you downloaded from Experience Builder.

- Josh Carlson
Kendall County GIS
KevinHibma-EsriCA
Esri Contributor

Further to @jcarlson answer, from searching GoDaddy help, it sounds like despite the "wordpress" part of it, you should still have some sort of web space or directory. You'd use an FTP client to upload everything you get in your .zip file. Alternatively, do you have this "cPanel" thing, maybe you can do it directly from there.

My guess is you want to create a subdirectory, which in theory wouldn't touch the main entry/word press?

eg.

www.mydomain.com == your wordpress

www.mydomain.com/subDir = your deployed Experience Builder app

https://ca.godaddy.com/community/Using-WordPress/Adding-a-subfolder-to-a-Managed-Wordpress-site-Can-...

 

WaterHammer
New Contributor II

Both responses got me to the answer, thank you.

In summary:

You can't upload an Experience into wordpress directly.  After publishing/downloading the site, the directory can be uploaded to the web server (https://nz.godaddy.com/help/upload-files-with-sftp-8940). 

Then in WordPress, you can embed the site into a WordPress page using the Custom HTML widget:

<div class="fullheight-container">

  <iframe #window1="" class="full-width" allowfullscreen="true" frameborder="0" src="https://yourDomain.com/theExperienceName"></iframe>

</div>

 

In the yourDomain.com/wp-admin dashboard, add to the CSS via:

Dashboard-Appearance-Customize-Additional CSS, then add:

.fullheight-container {
max-width: 100%;
max-height: 100%;
width: 90vw;
height: 90vh;
overflow: hidden;
}

.full-width {
min-width: 100%;
min-height: 100%;
background: black;
}

This will allow the Experience to be full width of the page and look like it does in Experience Builder.