Category: HTML

azure, HTML, Web

Step-by-Step Guide to Deploy Azure Static Web Apps

Jared Meredith

Enjoy this post of me bringing myself back into some of the basics to better help me keep my solutions architecture reflex fresh (ha)!

Use Case: I need a static page to host a logout page when users leave the SSO experience to land them to a custom-tailored page where I can provide the right guidance and support language related to the app.

So, where to begin?

First, here are some prerequisites to success:

Next, let’s pull down from a basic starter code kit to save some time on creating it from scratch:

https://github.com/new?template_name=vanilla-basic&template_owner=staticwebdev

And boom, just like that a repo with stuff:

But what to do now? Well so far we now have code, but still need a destination and a means to deploy it.

For a destination let’s go onward to Azure:

  • Go to the Azure portal and sign-in
  • Select Create a Resource.
  • Search for Static Web Apps.
  • Select Static Web Apps.
  • Select Create.

In the Basics section, begin by configuring your new app and linking it to a GitHub repository.

SettingValue
SubscriptionSelect your Azure subscription.
Resource GroupSelect the Create new link, and enter rg-static-app-deploy in the textbox.
NameEnter static-app-deploy in the textbox.
Plan typeSelect Free.
SourceSelect GitHub and sign in to GitHub if necessary.

If necessary, sign in with GitHub, and enter the following repository information.

SettingValue
OrganizationSelect (your organization).
RepositorySelect (your repo name).
BranchSelect (your branch e.g. main).

Once you have completed the wizard then you should see a successful creation of your resource to deploy to. (there are CLI references for those who prefer that below).

Your URL from the vanilla template should be live!

Within Github you can inspect the yaml that drove the deployment action (depending on what you pick for your token and deployment configuration this will vary):

You can also see where the secret is managed within Settings > Secrets and Variables > Actions:

Some extra credit -> want to add a custom domain to it?

Additional extra credit -> you can also have the app be front-ended with Azure Front Door.

Finally, if you’re not going to continue to use this application, you can delete the Azure Static Web Apps instance through the following steps:

  1. Open the Azure portal.
  2. Search for static-app-deploy from the top search bar.
  3. Select the app name.
  4. Select Delete.
  5. Select Yes to confirm the delete action (this action may take a few moments to complete).

References:

HTML, JavaScript, Troubleshooting, Web, Wordpress

SOLVED: Contact form 7 Submission Won’t Send, Stuck on Spinning Wheel

Jared Meredith

In a recent update on WordPress CMS and my existing plugins I noticed that form submissions started slowing a bit on entries. In checking this I found that the form would attempt to submit but would stay in a spinning stage and never validate or submit it.

So, here’s what I did to update for a fix.

1) Head to the plugin editor, update the link below:

https://yourwebsite.com/wp-admin/plugin-editor.php?plugin=contact-form-7%2Fwp-contact-form-7.php&Submit=Select

2) Look for the section:

if ( ! defined( 'WPCF7_LOAD_JS' ) ) {
	define( 'WPCF7_LOAD_JS', true );
}

3) Update this to:

if ( ! defined( 'WPCF7_LOAD_JS' ) ) {
	define( 'WPCF7_LOAD_JS', false );
}

4) Clear cache and try your form again. a good way to see if the spinning wheel issue goes away is if your required fields respond.

Caveats:

  • The form will no longer send with ajax since you have disabled the javascript.
  • If you update the plugin in any way and have the problem again you will need to reapply this change.

You can keep up with the ongoing reference to this issue on Contact Form 7’s website.

10/30/20 Update – Should you want to get out of having to update the plugin directly, you can set a constant in your wp-config.php file to set it and forget it. Link below! 

Controlling behavior by setting constants
HTML, JavaScript, Web, Wordpress

Need A Quick CSS Override On Just One Page Via JavaScript?

Jared Meredith

Found this to work really well for a WordPress custom theme where the only option I had was to drop an override via a header/footer plugin option:

<script>
var ref= window.location.pathname;
var search="/youruniquepagelink/";
if (ref.indexOf(search) > -1) {
let myElements = document.querySelectorAll(".your-class");
for (let i = 0; i < myElements.length; i++) {
	myElements[i].style.display = "none";
}
}
</script>
.Net, HTML, IIS, Sitecore, Visual Studio, Web, XML

Sitecore Error (SOLVED): An item name cannot contain any of the following characters: \/:?”\-|[] (controlled by the setting InvalidItemNameChars)

Jared Meredith

You may have ran into an issue during deployments when trying to publish in the past where you have seen this message:

“An item name cannot contain any of the following characters: \/:?”<>\-|[] (controlled by the setting InvalidItemNameChars)”

In order to help move forward on this you need to disable the default ItemNameValidation settings if you are having some deployment issues.

To do that (would only recommend temporarily) you can follow the steps below:

Add a config file to App_Config/Include named z.DisableItemNameValidation.config and put this in it:

<configuration xmlns:patch="http://www.sitecore.net/xmlconfig/">
  <sitecore>
    <settings>
      <setting name="ItemNameValidation">
        <patch:attribute name="value"></patch:attribute>
      </setting>
    </settings>
  </sitecore>
</configuration>

Again, when you are finished I would recommend taking this back out of your files to keep things as standard as possible.

HTML, Intercom, JavaScript, Web, Wordpress

So You Only Want Intercom Chat On Certain Pages In WordPress? Here’s How!

Jared Meredith

So I had a client want to use Intercom. Great! So I went to Intercom and signed up for an account, then went to our WordPress instance and downloaded the Intercom for WordPress plugin. Everybody wins! Until…I get the requirement after the fact that the client does not want the chat pop up on every page…but only on certain pages. However, the out of the box Intercom for WordPress plugin is only built to be supported for all pages and not some. What to do…what to do…let’s figure it out.

First, login into your WordPress (.org version) as an admin and uninstall the Intercom for WordPress plugin. Next install the Head, Footer and Post Injections Plugin:

Once installed, go to the Head, Footer and Post Injections plugin settings and insert the following script injection into the Desktop and Mobile (Check the Mobile checkbox) BEFORE THE CLOSING TAG (FOOTER). 

<script>
var ref1= window.location.pathname;
var search1 = "/pagepath1/";
var search2 = "/pagepath2/"; 
if (ref1.indexOf(search1) > -1 || ref1.indexOf(search2) > -1)
  window.intercomSettings = {
    app_id: "YourIntercomID"
  };
</script>
<script>(function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/nna8fbly';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()</script>

Save the plugin settings. This JavaScript will check on the specified page paths and only execute turning on Intercom for the specific page paths. Hope this helps!