Fun with Vercel

user: anonymous

{
  "path": "/blog/fun-with-vercel",
  "attrs": {
    "title": "Fun with Vercel",
    "splash": {
      "image": "/images/library.jpg"
    },
    "date": "2021-02-07",
    "layout": "BlogPostLayout",
    "excerpt": "How I deployed [jldec.fun](https://jldec.fun/) using the [Vercel platform](https://vercel.com/docs).\n"
  },
  "md": "# Fun with Vercel\n\nLast week I wrote about [First steps using Cloudflare Pages](first-steps-using-cloudflare-pages).\n\n[Vercel](https://vercel.com/home) is another leader in the trend toward static hosting, serverless, and [edge compute](why-serverless-at-the-edge).\n\n## [jldec.fun](https://jldec.fun/fun-with-vercel) 🤪\n\nThis is a walkthrough of how I deployed [jldec.fun](https://jldec.fun/) using the [Vercel platform](https://vercel.com/docs).\n\nMarkdown source files live in the same repo on [GitHub](https://github.com/jldec/cloudflare-pages-test) as before.\n\nThe Vercel signup starts a New Project workflow _(this could be simplified.)_\n\n![Vercel new project workflow with link to GitHub](/images/vercel-new-project.png)\n\nI clicked on 'Continue with GitHub', and then chose the first option in the dropdown below.\n\n![Vercel add GitHub account dropdown](/images/vercel-add-github-account.png)\n\nThis led to the GitHub form for granting repo access to the 'Vercel' GitHub app. (_Look for it later in your [GitHub Settings](https://github.com/settings/installations) to add more repos, or to revoke access._)\n\n![Authorize Vercel app on GitHub](/images/vercel-github-app.png)\n\nBack on Vercel, I selected my repo and used my 'Personal Account' scope. Team scope requires a paid plan.\n\n![Select scope for the new project](/images/vercel-select-project-scope.png)\n\nI continued with the default (root) project directory within the repo.\n\n![Select project direcotry inside repo](/images/vercel-select-directory.png)\n\nIn the last form of the Import Project flow, Project Name defaults to the name of the repo, so I changed that to 'jldec-fun'. I also configured a build command and an output directory.\n\nI didn't really need encrypted [environment variables](https://vercel.com/docs/environment-variables) here, but this step doesn't offer an alternative, so I made a note to change it later.\n\n![Configure the build command and output directory](/images/vercel-configure-build-jldec-fun.png)\n\nSubmitting the form triggered the first build, followed by a nice confetti shower. 🎉\n\n![First build and deploy confetti celebration](/images/vercel-confetti-jldec-fun.png)\n\nUnfortunately, visiting the site revealed a problem. Vercel does not automatically serve files stored with an '.html' extension, when a request comes in _without_ any extension.\n\n![Page not found when trying to browse toURL without extension](/images/vercel-without-clean-url-setting.png)\n\nThe fix requires [cleanUrls](https://vercel.com/docs/configuration#project/clean-urls) to be set in the `vercel.json` file at the project root.\n\n```json\n{\n  \"cleanUrls\": true\n}\n```\n\nAdding this setting fixed my 404 problem.\n\nThe same config file would also be useful for other common static hosting requirements like [redirects](https://vercel.com/docs/configuration#project/redirects), HTTP [headers](https://vercel.com/docs/configuration#project/headers), and the treatment of URLs with a [trailing slash](https://vercel.com/docs/configuration#project/trailing-slash).\n\nBack in the well-designed Vercel Settings UI, I was able to change my environment variables to plaintext. I liked the ability to set different values for preview builds.\n\n![Dashboard environment settings](/images/vercel-environment-settings.png)\n\nWhen I added my domain name, the form helpfully recommended configuring an IP address.\n\n![Dashboard domain settings](/images/vercel-domain-setting.png)\n\nOnce the DNS record was in place, the domain configuration changed to 'Valid'.\n\n![Dashboard domain settings fixed](/images/vercel-domain-setting-fixed.png)\n\n> Tada!\n\n[jldec.fun](https://jldec.fun/fun-with-vercel) is deployed from the `main` branch on [GitHub](https://github.com/jldec/cloudflare-pages-test). Commits to any other branch will trigger a preview deployment on a different URL.\n\n![screenshot of jldec.fun](/images/vercel-post.png)\n\n> Static websites are awesome!  \n> 👍\n\n_To leave a comment  \nplease visit [dev.to/jldec](https://dev.to/jldec/fun-with-vercel-3b6e)_\n\n",
  "html": "<h1>Fun with Vercel</h1>\n<p>Last week I wrote about <a href=\"first-steps-using-cloudflare-pages\">First steps using Cloudflare Pages</a>.</p>\n<p><a href=\"https://vercel.com/home\">Vercel</a> is another leader in the trend toward static hosting, serverless, and <a href=\"why-serverless-at-the-edge\">edge compute</a>.</p>\n<h2><a href=\"https://jldec.fun/fun-with-vercel\">jldec.fun</a> 🤪</h2>\n<p>This is a walkthrough of how I deployed <a href=\"https://jldec.fun/\">jldec.fun</a> using the <a href=\"https://vercel.com/docs\">Vercel platform</a>.</p>\n<p>Markdown source files live in the same repo on <a href=\"https://github.com/jldec/cloudflare-pages-test\">GitHub</a> as before.</p>\n<p>The Vercel signup starts a New Project workflow <em>(this could be simplified.)</em></p>\n<p><img src=\"/images/vercel-new-project.png\" alt=\"Vercel new project workflow with link to GitHub\"></p>\n<p>I clicked on 'Continue with GitHub', and then chose the first option in the dropdown below.</p>\n<p><img src=\"/images/vercel-add-github-account.png\" alt=\"Vercel add GitHub account dropdown\"></p>\n<p>This led to the GitHub form for granting repo access to the 'Vercel' GitHub app. (<em>Look for it later in your <a href=\"https://github.com/settings/installations\">GitHub Settings</a> to add more repos, or to revoke access.</em>)</p>\n<p><img src=\"/images/vercel-github-app.png\" alt=\"Authorize Vercel app on GitHub\"></p>\n<p>Back on Vercel, I selected my repo and used my 'Personal Account' scope. Team scope requires a paid plan.</p>\n<p><img src=\"/images/vercel-select-project-scope.png\" alt=\"Select scope for the new project\"></p>\n<p>I continued with the default (root) project directory within the repo.</p>\n<p><img src=\"/images/vercel-select-directory.png\" alt=\"Select project direcotry inside repo\"></p>\n<p>In the last form of the Import Project flow, Project Name defaults to the name of the repo, so I changed that to 'jldec-fun'. I also configured a build command and an output directory.</p>\n<p>I didn't really need encrypted <a href=\"https://vercel.com/docs/environment-variables\">environment variables</a> here, but this step doesn't offer an alternative, so I made a note to change it later.</p>\n<p><img src=\"/images/vercel-configure-build-jldec-fun.png\" alt=\"Configure the build command and output directory\"></p>\n<p>Submitting the form triggered the first build, followed by a nice confetti shower. 🎉</p>\n<p><img src=\"/images/vercel-confetti-jldec-fun.png\" alt=\"First build and deploy confetti celebration\"></p>\n<p>Unfortunately, visiting the site revealed a problem. Vercel does not automatically serve files stored with an '.html' extension, when a request comes in <em>without</em> any extension.</p>\n<p><img src=\"/images/vercel-without-clean-url-setting.png\" alt=\"Page not found when trying to browse toURL without extension\"></p>\n<p>The fix requires <a href=\"https://vercel.com/docs/configuration#project/clean-urls\">cleanUrls</a> to be set in the <code>vercel.json</code> file at the project root.</p>\n<pre><code class=\"language-json\">{\n  &quot;cleanUrls&quot;: true\n}\n</code></pre>\n<p>Adding this setting fixed my 404 problem.</p>\n<p>The same config file would also be useful for other common static hosting requirements like <a href=\"https://vercel.com/docs/configuration#project/redirects\">redirects</a>, HTTP <a href=\"https://vercel.com/docs/configuration#project/headers\">headers</a>, and the treatment of URLs with a <a href=\"https://vercel.com/docs/configuration#project/trailing-slash\">trailing slash</a>.</p>\n<p>Back in the well-designed Vercel Settings UI, I was able to change my environment variables to plaintext. I liked the ability to set different values for preview builds.</p>\n<p><img src=\"/images/vercel-environment-settings.png\" alt=\"Dashboard environment settings\"></p>\n<p>When I added my domain name, the form helpfully recommended configuring an IP address.</p>\n<p><img src=\"/images/vercel-domain-setting.png\" alt=\"Dashboard domain settings\"></p>\n<p>Once the DNS record was in place, the domain configuration changed to 'Valid'.</p>\n<p><img src=\"/images/vercel-domain-setting-fixed.png\" alt=\"Dashboard domain settings fixed\"></p>\n<blockquote>\n<p>Tada!</p>\n</blockquote>\n<p><a href=\"https://jldec.fun/fun-with-vercel\">jldec.fun</a> is deployed from the <code>main</code> branch on <a href=\"https://github.com/jldec/cloudflare-pages-test\">GitHub</a>. Commits to any other branch will trigger a preview deployment on a different URL.</p>\n<p><img src=\"/images/vercel-post.png\" alt=\"screenshot of jldec.fun\"></p>\n<blockquote>\n<p>Static websites are awesome!<br>\n👍</p>\n</blockquote>\n<p><em>To leave a comment<br>\nplease visit <a href=\"https://dev.to/jldec/fun-with-vercel-3b6e\">dev.to/jldec</a></em></p>\n"
}