HTTP ERROR 500 when deploying astrowind project

[codewithdary]

Hi All!

I've been using your template and I'm really enjoying it so far. I've ran into a small issue and I hope that anyone can help me out :)

I've cloned your repository and deployed it through Vercel. When I enter the production URL, everything seems to work fine on the / endpoint. If I try to enter the /blog endpoint, I'll receive a 500 HTTP error.

Here are the steps that I took from cloning the project to deployment.

Git clone [[email protected]:codewithdary/cdw-astro-test.git](mailto:[email protected]:codewithdary/cdw-astro-test.git)
cd cdw-astro-test

NPM installation

npm install
npm run build
npm run dev

Accessed website through localhost where everything seem to work fine, even the /blog endpoint.

http://localhost:3000/

Deployment through Vercel

npm install @astrojs/vercel

Added the following in my astro.config.mjs file

import { defineConfig } from 'astro/config';
import vercel from '@astrojs/vercel/serverless';

export default defineConfig({
  output: 'server',
  adapter: vercel(),
});

Added new files to Git

git add astro.config.mjs
git commit -m “Added Vercel”
git push

Installed Vercel CLI

npm i -g vercel
vercel

Configuration through Vercel CLI

? Set up and deploy “~/Desktop/workspace/cdw-astro-test”? [Y/n] y
? Which scope do you want to deploy to? codewithdary
? Link to existing project? [y/N] n
? What’s your project’s name? cdw-astro-test
? In which directory is your code located? ./
? Want to modify these settings? [y/N] N

Deployment was successful. If I try to access the page through my production URL, the homepage works fine, but once I click on the /blog endpoint in the navigation, I’ll receive the following URL error:

cdw-astro-test-kgybbvmqs-codewithdary.vercel.app is currently unable to handle this request.
HTTP ERROR 500

Can someone please guide me through this issue? The link to my GitHub repository can be found right here.

[codewithdary]

Just in case you don't want to dive into my GitHub repository: here's the /src/config.mjs file.

export const SITE = {
	name: 'AstroWind',

	origin: 'https://astrowind.vercel.app',
	basePathname: '/',

	title: 'AstroWind — Your website with Astro + Tailwind CSS',
	description: '🚀 AstroWind is a free and ready to start template to make your website using Astro and Tailwind CSS.',
};

export const BLOG = {
	disabled: false,
	postsPerPage: 4,

	blog: {
		disabled: false,
		pathname: 'blog', // blog main path, you can change this to "articles" (/articles)
	},

	post: {
		disabled: false,
		pathname: '', // empty for /some-post, value for /pathname/some-post 
	},

	category: {
		disabled: false,
		pathname: 'category', // set empty to change from /category/some-category to /some-category
	},

	tag: {
		disabled: false,
		pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
	},
};

[widgeter]

Hi @codewithdary
I just read this Issue and I'm going to start doing some tests to see what could be the problem.

The first thing that comes to mind is that for AstroWind you don't need the integration with vercel (@astrojs/vercel) since for now it is conceived to be static and has not yet been tested in SSR and that may be the problem.

Is there any specific reason why you have installed the vercel integration?
Anyway, it shouldn't be a problem to install some integration and maybe it's something we need to fix in the template.

I will be testing your repo and in a moment I will give you more details.

[widgeter]

Hi again @codewithdary,

We have reviewed in details. The thing is that AstroWind doesn't currently support SSR (or at least part of pages). Everything related to the Blog is developed using the standard for generating static pages through the getStaticPaths() function. Therefore, the code that follows that function expects certain parameters (for example, page) that are only available thanks to the result of that function.

code from slug.astro:

// (...)

export async function getStaticPaths() {
	if (BLOG?.disabled || BLOG?.post?.disabled) return [];
	const posts = await fetchPosts();
	return posts.map((post) => ({
		params: {
			slug: cleanSlug(post.slug),
			blog: POST_BASE || undefined,
		},
		props: { post },
	}));
}

const { post } = Astro.props;

// (...)

In this case the same file has the responsibility to decide which pages will be generated and then it waits for a 'post' parameter obtained through Astro.props that brings the useful data to continue with the singular page.

We are going to study the feasibility of providing a simple code that allows both SSR and static generation. As soon as we have something we will let you know.

For now, you can follow two paths:

1. If you don't need SSR, you can make a small adjustment in astro.config.mjs:

(...)

- import vercel from '@astrojs/vercel/serverless';
+ import vercel from '@astrojs/vercel/static';

(...)

-	output: 'server',
+	output: 'static',

2. Or if for you it is essential to have SSR (because you need fresh updates on certain pages or different pages depending on the user), then you should try to get the same information that is now obtained from Astro.props in all Blog pages.

Example:

-  export async function getStaticPaths() {
-	if (BLOG?.disabled || BLOG?.post?.disabled) return [];
-	const posts = await fetchPosts();
-	return posts.map((post) => ({
-		params: {
-			slug: cleanSlug(post.slug),
-			blog: POST_BASE || undefined,
-		},
-		props: { post },
-	}));
- }
- const { post } = Astro.props;

+ const { blog, slug } = Astro.params;
+
+ if (!isValidBlogBasepath(blog)) {
+  return new Response(null, {
+    status: 404,
+    statusText: 'Not found'
+  });
+ }
+
+ const post = await getPostBySlug(slug);

const meta = {
	title: `${post.title} — ${SITE.name}`,
	description: post.description,
	canonical: post.canonical || getCanonical(getPermalink(post.slug, 'post')),
	image: await findImage(post.image),
	ogTitle: post.title,
	ogType: "article"
};

I hope I can move forward with it. Anything else feel free to contact us.

[codewithdary]

Your solution worked perfectly, thank you so much @widgeter :)