Build a Company Website with Bolt.new and Strapi 5 - Part 2

Introduction

In the first part of this tutorial series, we generated the initial version of our company website’s frontend using Bolt.new and explored how vibe coding helps speed up UI development.

We also set up our Strapi 5 backend on Strapi Cloud and prepared the project structure for integration.

Now, let's finish this tutorial. We will take the next big step:

• Versioning and safeguarding your Bolt.new project
• Installing and configuring the Strapi client in your frontend
• Fetching data from Strapi (blogs, slugs, dynamic zones)
• Debugging common Bolt.new errors
• Further Enhancements
• Deploying through GitHub → Netlify
• Best Practices for Prompting in Bolt

Tutorial Parts

This tutorial is divided into two parts:

• Part 1 — Planning and Building the Frontend: Using Bolt.new and Strapi 5
• Part 2 — Connecting Bolt.new to Strapi API and Deploying to Netlify

Prompt 4— Versioning Your Bolt App and Connecting to Strapi

Now that our Strapi backend is fully set up, we can connect it to the frontend we generated with Bolt.new.

Before doing that, it’s a good idea to save the current state of our project in case we need to revert during the integration process.

Versioning Your Bolt.new Project

Bolt.new automatically versions your project as you work, but it’s still good practice to confirm that your latest stable state is saved.

To view your versions:

• Click your Project Name in the top-left corner.
• Select Version History.
• You’ll see a list of automatically saved versions that you can restore at any time.

This built-in history is especially useful when you want to integrate external APSs or make major changes.

Connecting Bolt.new to Your Strapi Backend

With the Strapi backend deployed and available via a public API URL, we can now instruct Bolt to install the @strapi/client and configure our application for backend communication.

To integrate properly, Bolt.new needs to:

• Install the official Strapi client: @strapi/client
• Initialize and export a reusable Strapi SDK instance
• Provide a utility function for accessing the base URL of your Strapi Cloud project

We’ll use the Plan Mode for this step so Bolt understands the task and executes it precisely.

Now connect to Strapi v5. I want to use it as my backend.

1. Install Strapi Client:
npm install @strapi/client

2. Create a file: src/data/strapi-sdk.ts with this exact code:

import { strapi } from '@strapi/client';
import { getStrapiURL } from "@/lib/utils";

const BASE_API_URL = getStrapiURL() + "/api";
export const sdk = strapi({ baseURL: BASE_API_URL });


3. Update src/lib/utils.ts: 

export function getStrapiURL() { 
return process.env.VITE_STRAPI_URL || "https://superb-freedom-8531c68dfe.strapiapp.com/"; 
}

Ensure you click the implement.

After pasting this into Bolt.new, make sure to click Implement Plan.

Bolt will then:

• Install @strapi/client
• Add the strapi-sdk.ts file
• Update your utility file
• Rebuild your project with the new dependencies

With the Strapi SDK configured, we’re ready to fetch real content from our CMS.

Prompt 5— Fetching and Displaying Content from Strapi

With the Strapi client SDK now installed and configured in your Bolt.new project, the next step is to fetch real content from your Strapi backend and display it in the UI.

This is where your project transitions from a static prototype into a dynamic, CMS-driven application.

(Optional) Generate OpenAPI Specification of your Project

To give Bolt.new additional context about your available endpoints, you can generate an OpenAPI specification for your Strapi project.

This documentation describes all of your API routes, request parameters, and response structures without requiring source code access.

This step is optional, but helpful if your content types are complex.

Run the command to generate the JSON OpenAPI specification

npm run strapi openapi generate
# or 
yarn strapi openapi generate

Because Bolt.new has a limited context window, providing the entire OpenAPI file may consume unnecessary tokens for this tutorial.

Feel free to skip it unless you need deep endpoint documentation inside Bolt.

Fetching Basic Data from Strapi

Let’s begin by fetching our Blog content from Strapi. When you hit your Strapi API directly, a response will look something like this:

For this tutorial, we will fetch:

1. All Blogs (Blog collection type): (with related entities from Dynamic Zones, banners, authors, categories, tags, and SEO metadata)

/blogs?populate[dynamic_zone][on][dynamic-zone.faq-block][populate][faqs]=true&populate[banner]=true&populate[author]=true&populate[category]=true&populate[tags]=true&populate[seo]=true

1. A Single Blog by Slug

/blogs?filters[slug][$eq]=slug-value

These two endpoints are enough to build a blog listing page and a blog details page. Feel free to add more.

Prompting Bolt.new to Implement Blog Fetching

Now that the API endpoints are ready, we’ll instruct Bolt.new to:

• Create a dedicated API file
• Add getBlogs() and getBlogBySlug() functions
• Use the Strapi SDK we configured earlier
• Update the blog page to consume real data
• Keep the existing dummy data for fallback purposes

Switch to Plan Mode, and then paste this prompt:

Using the previously created SDK in data/strapi-sdk.ts

create a new file inside data/api.ts

Add the function:

- getBlogs(): fetch `/blogs?populate[dynamic_zone][on][dynamic-zone.faq-block][populate][faqs]=true&populate[banner]=true&populate[author]=true&populate[category]=true&populate[tags]=true&populate[seo]=true`

- getBlogBySlug(slug): fetch `/blogs?filters[slug][$eq]=slug-value)`

Use async/await and return typed JSON. 

Update the blog page with the new data. Leave the dummy data as it is.

Keeping the dummy data ensures your app remains functional even if the Strapi server is cold-starting (common on the free tier) or temporarily unreachable.

Fixing Errors in Bolt.new

Once Bolt.new implements the Strapi fetching logic, you may run into errors.

This is normal, especially when combining AI-generated code with a live backend. The key is learning how to debug efficiently without falling into infinite “Fix this” loops, which can quickly burn tokens and break working code.

Here’s the error we encountered when Bolt attempted to fetch Blog data from the Strapi backend:

We can use 3 ways to resolve this issue:

• Discuss the error directly with Bolt
• Use the Highlight tool to target exactly where the fix is needed
• Fix the issue manually in your code when Bolt gets stuck

Let’s walk through how each one helped (and sometimes didn’t).

1. Discuss the Error with Bolt

The first attempt was to paste the error message directly into Bolt and ask it to resolve it.

Bolt responded, but suggested using Bolt Database, its built-in backend.

This wasn’t helpful, because our goal is to use Strapi, not Bolt Database.

This is common: when Bolt doesn’t understand the source of a backend error, it sometimes defaults to suggesting its internal database.

2. Use the Highlight Tool for Targeted Fixes

The next approach was to use Bolt.new’s Highlight tool.

This allows you to mark a specific line or file and tell Bolt exactly what to fix, instead of letting it rewrite unrelated parts of your project.

We highlighted the import where the Strapi Client was used and asked Bolt to reinstall or repair it:

This is one of the most reliable debugging techniques in Bolt because it prevents the AI from over-correcting or introducing new regressions.

3. When Bolt Gets Stuck: Manual Fix + Refresh

Even after discussing the error and using Highlights, the issue persisted.

This happens occasionally because Bolt runs in a browser environment and can sometimes get stuck in an inconsistent state.

A page reload of the Bolt IDE resolved it.

Final Results

After reviewing the generated code, I noticed the root cause. Bolt had used Strapi v4 response formatting instead of the new flat Strapi 5 response format, specifically, the Strapi 4 deprecated .attributes field.

Strapi v5 no longer wraps content in .attributes, so any code referencing it will break.

We highlighted the incorrect usage and asked Bolt to remove it:

Please remove the .attributes as we are using Strapi v5 and not v4.

Once Bolt applied the fix, the blog data loaded correctly:

Fetched Data from Strapi Backend

💡 NOTE
Bolt implemented the getBlogBySlug(slug) but did not create the Blog details page. You’ll need to explicitly prompt Bolt to add these.

Refining Your App (Dynamic Zones, Responsiveness, and UI Enhancements)

With our Strapi integration working, the next step is to refine the UI and ensure the frontend correctly renders the dynamic content coming from the CMS.

1. Handling Strapi Dynamic Zones and Components

When navigating to a blog details page (via its slug), Bolt automatically uses the data coming from your Strapi dynamic zones, such as the FAQBlock.

In the demo below, you can see that:

• The FAQ entries from the dynamic zone are rendered correctly
• The author’s email and other relational fields are pulled directly from Strapi
• Bolt correctly uses the structured response returned by the Strapi CMS

FAQ from Dynamic Zone

This is a major advantage of using Strapi’s modeling system. Bolt can generate UI components that map directly to your content types.

At this point, you can continue enhancing the UI by prompting Bolt to:

• Fetch and display global settings (from the GlobalSettings single type)
• Add loaders for slow Strapi Cloud cold starts
• Improve layout, typography, spacing, or animations
• Build custom sections that adapt to the fields defined in Strapi

Dynamic content gives your Bolt-generated site structure, and your prompts give it polish.

2. Responsiveness

Bolt-generated UIs sometimes look great on desktop but break or overlap on mobile.
To fix this, use the Inspect or Highlight tools to point to exact elements that need adjustments.

You can then provide targeted prompts such as:

Make this section fully responsive for mobile and tablet.
Use Tailwind responsive utilities to adjust spacing, stacking, and font sizes.

3. Ask Bolt for Additional Features

Once the core UI works, you can ask Bolt for improvement ideas.
Using Plan Mode or Discussion Mode, ask:

What features can improve this company website?

Bolt may suggest enhancements such as:

• Interactive Demo and Playground Section
• Community and Newsletter section
• Resource Center
• Built-in Chatbot and so on.

4. Using the Terminal

Bolt.new includes an inline terminal that allows you to:

• Install dependencies (npm install swiper, etc.)
• Run build or lint commands
• Inspect logs during development

This terminal is useful especially when installing third-party packages that Bolt doesn’t add automatically.

5. Downloading your Code

Before deploying or shipping your project, download your full codebase. This lets you:

• Review the architecture
• Apply some security best practices
• Clean up unused components or dependencies
• Fix edge-case bugs
• Customize the code beyond what Bolt can autogenerate
• Commit to GitHub for version control

Bolt.new is excellent for prototyping, but manual review ensures your final app is production-ready.

Publishing Your Bolt.new Project

Once everything looks good, you can publish directly from Bolt.new by clicking the Publish button at the top-right corner of the interface.

Bolt will:

• Run a security audit
• Check dependencies
• Attempt to build and deploy your project
• Generate a live, shareable link if successful

If issues are detected, Bolt will suggest fixes, and you can attempt fixing them directly using Plan Mode or the Highlight tool.

Bolt will run a security audit. And if any issue is found, you will be advised to ask Bolt to fix it. If successful, Bolt will generate a shareable link to your live project.

When Bolt Fails to Publish

In some cases, Bolt may fail to publish your project. For example, my build failed due to a Turbopack limitation that commonly affects browser-based IDEs, and probably because Bolt.new generated my app in Next.js 13.

If this happens, don’t worry, you still have a reliable deployment path using GitHub and Netlify.

Connecting Your Project to GitHub

Bolt.new provides a built-in GitHub integration that allows you to export your project directly into a new repository.

• Click the GitHub icon in the top-right corner.
• Bolt will prompt you to authorize access to your GitHub account.
• Choose a name for the new repository.
• Bolt will push your complete project into GitHub.

After authorization, Bolt asks you to name the repo:

Once the repo is created, you're ready to deploy.

Deploying Your Project on Netlify

With the GitHub repository now available, deployment through Netlify becomes simple:

1. Log in to Netlify.
2. Click Add new project → Deploy from Git → Import an exising project.
3. Select GitHub and choose the repository Bolt created.
4. Name your project (e.g., company-website-example).
5. Keep the default build settings for a Next.js app (Netlify auto-detects them).
6. Click Deploy.

A few moments later, your site will be live! :

Bolt Prompting Best Practices

Getting great results from Bolt.new is all about how you prompt.
Below are the most effective best practices to help you build faster, avoid unnecessary token usage, and maintain consistent app quality.

• Start with a plan and build the foundation (Context): Begin with a clear blueprint and focus on the first component, such as defining a hero section with specific elements, so that Bolt establishes a consistent design foundation before adding other sections.
• Break work into small, iterative steps (Step-wise): Divide complex builds into small tasks by adding components and styling in stages and verifying each change, so you can easily adjust or roll back individual parts rather than a large, mixed prompt.
• Use precise design language and be explicit: Rather than vague descriptors like “make the text bigger,” use professional design terms such as “increase font weight” or “raise line height,” and specify margins, padding, or z‑index settings.
• Leverage Bolt’s feedback (Chain-of-thought) and targeting tools: Use features such as Discussion Mode, the “Enhance prompt” option, multiple first‑draft prompts, and file/element targeting to refine your prompts and direct Bolt to work on only the intended sections
• Reuse, customize, and ask Bolt to teach you: Store high‑performing prompts in the Prompt Library, set project or system prompts with consistent instructions, and have Bolt generate cheat sheets or enhanced prompts to expand your vocabulary and creative ideas.

For more prompting strategies, check out Bolt’s official guide: 👉 Prompting Tips for Bolt

Pain Points of Using Bolt

Bolt.new is a powerful tool for rapid prototyping and AI-assisted development, but it also comes with limitations you should be aware of, especially if you're building more complex, full-stack applications.

1. Free Tier Limitations

The free plan works well for simple, one-shot prompts and small projects, as tokens are limited.

For full-stack apps or frontend + backend integrations, you’ll likely need to upgrade.

2. Context Loss

Refreshing Bolt’s IDE or inactive sessions can sometimes cause the AI to lose context, which means:

• The agent may forget recent decisions
• You may need to re-explain your instructions
• Some prompts must be repeated

Using Plan Mode, file locking, and targeted prompts helps reduce this problem, but it still happens occasionally.

3. Occasional Hallucinations or Context Drift

Bolt sometimes forgets previous constraints or introduces inconsistencies. For example, suggesting Bolt Database instead of your actual backend (Strapi).

When this happens, using the Highlight tool or reverting via Version History is the best approach.

4. Dependency or Version Mismatches

In some cases, Bolt may install a different dependency version than requested.

For example, it generated the project using Next.js 13 even after specifying Next.js 15.

Always verify:

• package.json
• Framework versions
• Tailwind/TypeScript configs

Before continuing with your build.

5. Build Issues Inside the Browser IDE

Because Bolt runs in a browser-based environment, not all toolchains are fully supported.
For example, I upgraded to Next.js 16, but this triggered a Turbopack error:

Error: `turbo.createProject` is not supported by the wasm bindings.

This appears to be a limitation of running Turbopack inside a WebAssembly environment. Fortunately, Bolt’s Version History allowed rolling back to a working version.

6. Recommendations for Bolt Database

When Bolt encounters backend-related errors, it sometimes suggests switching to Bolt Database, even when you're intentionally using a custom backend like Strapi.

This isn’t harmful, but it can derail your debugging if you don’t catch it early.

GitHub Repo, Live App, and Bolt Project Links

• GitHub Repo: https://github.com/Theodore-Kelechukwu-Onyejiaku/company-website
• Live App on Netlify: https://company-website-example.netlify.app/
• Bolt Project Link: https://bolt.new/~/sb1-epr7g8v7

👋 NOTE:
We used the free version of Strapi Cloud. So, give some time before the Blog data load as your Strapi server spins up.

Final Thoughts

Suppose there is one lesson from this project. It would be that Bolt works best when you work in small, controlled steps.

That way, you can easily revert, update, and maintain your code without consuming too many tokens.

You can use the Free plan for experimentation, UI generation, or quick prototypes, but full-stack or multi-page applications benefit heavily from the paid tiers.

But for production-grade, enterprise-level projects, I will always take ownership of the core business logic, security patterns, API integrations, and performance considerations.

Bolt speeds up the work. It doesn’t replace the work.

Conclusion

In this two-part series, you learned how to use vibe coding principles and Bolt.new’s interface, modes, and prompting techniques to generate a full UI scaffold and connect it to a real Strapi backend. You also fetched dynamic content, debugged common issues, and deployed the final application using GitHub and Netlify.

Here are some next steps for your project:

• Ask Bolt to fetch the Global Data (GlobalSettings single type) of the company website in your Strapi backend:

/global-setting?populate[0]=footer&populate[1]=footer.links&populate[2]=header&populate[3]=header.links&populate[4]=defaultSEO&populate[5]=socialLinks&populate[6]=address

• Ask Bolt to implement Light, Dark, and System Modes.
• Set up the frontend preview in your Strapi backend
• Ask Bolt to update or create data inside Strapi
• Export your code locally and improve it.

Bolt.new is a great platform. However, it’s not a full replacement for human designers and developers, at least not yet. The platform should be best used for experimentation, concept generation, and quick MVPs rather than enterprise-ready sites.

If you’re ready to explore the future of website building, Bolt.new is an exciting place to start, but keep your creative and technical instincts close by.