07.Deployment

Deployment

In this course we see how to host the website using Github pages and Vercel + Supabase.

Github pages

GH pages is a service offered by GitHub to host static website from a repository. The idea is to generate all the pages of the Nuxt project and then serve them by using GitHub Pages. GitHub Pages Docs

To add the gh-pages functionalities, you must follow these requirements:

• The repository needs to be public, unless you pay to keep it private.
• You must have a branch or folder in your current branch that contains the static HTML pages.

To generate static pages in Nuxt, use the “generate” command. This command pre-renders every route in your application and saves the result as plain HTML files. These files can be deployed on any static hosting service. The result can be found in the “.nuxt” folder, specifically in the “public” subfolder. Additionally a dist folder is created in the root folder. This is a shortcut to the public folder.

Install gh-pages as a developer dependencies of the project with npm install gh-pages --save-dev. Add the deploy script inside the package.json file of your project:

{
	// Other fields
	scripts: {
		// other scripts
		deploy: "gh-pages -d dist"
	}
	// Other fields
}

You can push the folder with all the static pages in the gh-pages branch of the repo with npm run deploy. We have to “fix” the correct path setting in nuxt config file (nuxt.config.ts):

export default defineNuxtConfig({
	//Other settings
	app: {
		baseURL: '/<name of the repository>/'
	}
})

To avoid that Jekyll see folder _nuxt as a special folder (in its syntax) we can add a .nojekyll file in the root of the project or chaning the name of the folder always in nuxt config file:

export default defineNuxtConfig({
	//Other settings
	app: {
		baseURL: '/<name of the repository>/'
		buildAssetsDir: "<new name for the folder>"
	}
})

Vercel and Supabase

GH Pages works only with static pages, so it’s not ideal for displaying dynamic content. Instead, we can use hosting services such as Vercel, which offers a free plan that suits our needs. For managing a Postgres db, we can use Supabase as an alternative to Firebase. Vercel simply is automagically and just need to be connected to the GitHub repo. Supabase is great for its easy-to-use database. No SQL is necessary, and data can be imported from various sources like csv files, Excel, or Google Sheets. Connecting to the database only requires a few simple steps:

npm install @nuxtjs/supabase --save-dev

and add the module in the nuxt config file:

export default defineNuxtConfig({
	//other settings ..
	modules: ['@nuxtjs/supabase']
})

Create a .env file in the root folder of your project with these values. The .env is used to store credentials (remember to not upload them).

SUPABASE_URL="https://example.supabase.co" 
SUPABASE—KEY="<your_key>"

and finally, install the Supabase integration from the Vercel Marketplace, add the integration to your Vercel project and set the environment variable for Supabase in your project settings.