
<p>Last week I published a new npm package for Frontity so that you can use the form plugin Gravity Forms. Here are some thoughts on why we need the packages, and why I love to write them.</p>



<p>An important part of any business online is contact forms. It&#8217;s one of the main ways that people can reach out to you. When it comes to Frontity, it does not support sending forms out of the box, because there are so many form plugins for WordPress.</p>



<p>When I started to use Frontity, there was one package for CF7, but it did not work. At that time, I had little to no experience with JS and React. But I was making a website for a company that required a contact form, so I had to make it work. So I read a lot of documentation and got to work. I started with a fix in my project, that seemed to work, and I thought about leaving it there. But as I read in the <a href="https://community.frontity.org/" target="_blank" rel="noreferrer noopener">community forum</a>, more and more people posted about errors with the CF7 package. So I decided to publish my bug-fixed package on npm.</p>



<h2 id="publishing-the-new-package">Publishing the new package</h2>



<p>It&#8217;s been a few months since I published it, and I&#8217;m really happy that I did it. One of the reasons that I originally wasn&#8217;t going to publish the package was because I was new to JS and React, and because I was so new, I was afraid that I would make mistakes that could affect not just me, but other people if they decided yo use my package. So even though I had a working package, I was afraid of failure.</p>



<p>But at last, I decided to publish it, and so far it has worked out great. The feedback I have received from people so far has been good, and there have been no big problems that I haven&#8217;t been able to fix. Over the last few months, I have learned a lot more than I thought I would, because of the CF7 package. That&#8217;s why I also have published a new form package, this one for Gravity Forms. It supports the standard input and text area fields, and also single select and date fields. I have also updated the CF7 package to support the same.</p>



<h2 id="the-packages">The packages</h2>



<p>Here are the links to the packages, and also the GitHub repos if you want to contribute with new features or bug fixes:</p>



<h3 id="cf7">CF7:</h3>



<p><a href="https://www.npmjs.com/package/@aamodtgroup/frontity-contact-form-7">https://www.npmjs.com/package/@aamodtgroup/frontity-contact-form-7</a></p>



<p><a href="https://github.com/aamodtgroup/frontity-contact-form-7">https://github.com/aamodtgroup/frontity-contact-form-7</a></p>



<h3 id="gravity-forms">Gravity Forms:</h3>



<p><a href="https://www.npmjs.com/package/@aamodtgroup/frontity-gravity-forms">https://www.npmjs.com/package/@aamodtgroup/frontity-gravity-forms</a></p>



<p><a href="https://github.com/aamodtgroup/frontity-gravity-forms">https://github.com/aamodtgroup/frontity-gravity-forms</a></p>



<h2 id="a-big-thank-you-to-the-community">A big thank you to the community</h2>



<p>Of course, much of the work I have done over the last few months would not have been possible without the great Frontity community, where I have asked many questions, and gotten a lot of great responses. And also the employees of Frontity, who have answered a lot of my questions, and pointed me in the right direction when needed. At the end of the day, that&#8217;s why I want to continue to learn and develop for Frontity, because of the community. I love being able to help others in their quest for a good website because, only a few months ago, I was the one that needed help to get going on my journey.</p>


Frontity Gravity Forms package, and why I love to make packages


<p>I&#8217;m a big fan of Frontity, and one of the things I really like is the ease of hosting the frontend. I chose Vercel out of the options available, and could not be happier with the choice. But one thing that I could not find much information on was deploying the site to Vercel with GitHub.</p>



<p>That&#8217;s why I&#8217;m writing this article, so that you can learn to deploy Frontity to Vercel with GitHub. When I first tried it, I got an error that the build could not be completed because it did not find a public folder. So I gave up for a bit, and just went back to deploying with the CLI. But today I sat down and tried for real. </p>



<p>After searching for a while in the community, I found nothing. So I decided to just try my luck. I have been messing around in the project settings for Vercel before, so I started there again. Under the general tab of the project settings, I found &#8220;Build &amp; Development Settings&#8221;. Here I entered the frontity build commands, instead of the default ones.&nbsp;</p>



<p>And that did the trick, when I added a new commit to my &#8220;main&#8221; branch, the Vercel system made a new production commit, and it was deployed successfully. So here are the steps you need to take to make it work:</p>



<h2>Change the Build &amp; Development Settings</h2>



<p>First, you need to change the Build &amp; Development Settings, you can do this in the project settings, under the general tab.&nbsp;Switch the button on the right of every field to override, and then enter the following for each field:</p>



<ul><li>Under framework, select &#8220;other&#8221;</li><li>Build command -&gt; frontity build</li><li>Output directory -&gt; /</li><li>Install command -&gt; npm install</li><li>Development command -&gt; frontity dev</li></ul>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="614" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1024x614.png" alt="" class="wp-image-302" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1024x614.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-300x180.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-768x461.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36-1536x922.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.21.36.png 2030w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>When you have changed all the settings, click save.</p>



<h2>Connect Vercel to Github</h2>



<p>The next step is to connect Vercel to GitHub, you can do this in the project settings under the git tab. Just select GitHub, and go through the steps and connect your account.&nbsp;</p>



<p>Before you click, it should look something like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="424" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1024x424.png" alt="" class="wp-image-301" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1024x424.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-300x124.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-768x318.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35-1536x636.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.20.35.png 2032w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>And after you have gone through the steps and selected a repo, it should look like this:</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="421" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1024x421.png" alt="" class="wp-image-299" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1024x421.png 1024w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-300x123.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-768x316.png 768w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29-1536x632.png 1536w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/Screenshot-2021-05-26-at-01.19.29.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>PS! If you want to deploy from a GitHub organization, you need Vercel Pro.&nbsp;</p>



<h2>Make a commit to the repo</h2>



<p>Now all that remains is to make a commit to the repo. By default, Vercel sets the production branch to &#8220;main&#8221;, so if you use something else, like for instance &#8220;master&#8221;, you need to change that in the project settings as well, under the git tab.&nbsp;</p>



<figure class="wp-block-image size-large"><img loading="lazy" width="1016" height="404" src="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3.png" alt="" class="wp-image-296" srcset="https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3.png 1016w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3-300x119.png 300w, https://wp.aamodtgroup.com/wp-content/uploads/2021/05/image-3-768x305.png 768w" sizes="(max-width: 1016px) 100vw, 1016px" /></figure>



<p>So now, every time you make a commit to the production branch, Vercel will automatically make a production deployment with that brach. And if you want to preview something that you have done, you can create a new branch, and commit it. Vercel will then automatically make a preview deployment of that brach.</p>



<p>PS! Make sure that you include the vercel.json file in the repo, the deployment won&#8217;t work without it.</p>



<pre class="wp-block-code"><code>{
  "version": 2,
  "builds": &#91;
    {
      "src": "package.json",
      "use": "@frontity/now"
    }
  ]
}</code></pre>



<p>So that&#8217;s it, that&#8217;s how you deploy Frontity to Vercel with GitHub. If you have any questions, feel free to reach out to me, either by <a href="mailto:kasper@aamodtgroup.com">email</a> or <a href="https://twitter.com/kasperaamodt" target="_blank" rel="noreferrer noopener">Twitter</a>.</p>


Frontity

Frontity

Frontity Gravity Forms package, and why I love to make packages

Deploying Frontity to Vercel with GitHub