Using ContentBuilder.js in a Laravel Project
In this tutorial, we'll guide you through integrating ContentBuilder.js into a Laravel project with Breeze and React setup. Breeze provides a simple implementation of Laravel's features, including authentication, powered by React as the frontend scaffolding. Let's dive in!
Setting Up Your Laravel Project with Breeze
If you haven't already, install Laravel using Composer. Open your terminal and run the command below.
composer create-project --prefer-dist laravel/laravel laravel-contentbuilder
This command creates a new Laravel project named 'laravel-contentbuilder'. It sets up a fresh Laravel application with all the necessary files and configurations.
Navigate to your project directory:
cd laravel-contentbuilder
Install Laravel Breeze to your project, which provides a simple way to handle authentication (login, registration, password reset).
composer require laravel/breeze --dev
Then, set up Breeze to use React for your frontend.
php artisan breeze:install react
This modifies your project to use React components for authentication pages. It scaffolds basic authentication views and functionality using React, allowing you to build a single-page application (SPA) with login and registration features.
Run Database Migrations
After integrating Breeze into your Laravel project for authentication, you'll need to prepare your database to handle user information:
php artisan migrate
This command creates the necessary database tables and columns for storing user details and authentication data that Breeze requires to work. It's like setting up the essential building blocks for your app to manage users and their sessions.
Install Dependencies
Install all required NPM packages, including React dependencies:
npm install
Running Your Laravel Project
First, compile your project's assets by running the command:
npm run dev
This command compiles your CSS and JavaScript files, making them ready for the browser. Keep this terminal open as it watches for any changes to your assets and recompiles them automatically.
Then, open a second terminal, ensure you're in your project folder, and run the command:
php artisan serve
This command starts a local web server, making your Laravel project accessible in a web browser at http://localhost:8000. It's how you view and interact with your project as you develop. Keep this terminal open to keep the server running.
By following these steps, you're setting up a local development environment for your Laravel project, allowing you to build, view, and test your application in real-time.
Visit http://localhost:8000 in your browser to ensure everything is set up correctly.
Open your Laravel project folder in your preferred code editor (e.g., Visual Studio Code).
Installing ContentBuilder.js
With the project ready, let's integrate ContentBuilder.js. In your project directory, install ContentBuilder.js via npm:
npm i @innovastudio/contentbuilder
Additionally, download the ContentBuilder.js ZIP package from your user area, extract it, and copy the following files and folders into your project's public folder:
- public/assets/
- public/contentbuilder/
- public/uploads/
- public/assets.html
We recommend using the most recent asset files from the ContentBuilder.js package to ensure compatibility with the latest ContentBuilder version installed via NPM.
Implementation
Create a new file: resources/js/Pages/Edit.jsx, and add the following code to integrate ContentBuilder.js::
import { useEffect, useState } from 'react';
import ContentBuilder from '@innovastudio/contentbuilder';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
function Edit(props) {
useEffect(() => {
builder = new ContentBuilder({
container: '.container',
snippetModal: true,
snippetModalLeft: true,
});
builder.loadSnippets('assets/minimalist-blocks/content.js'); // Load snippet file
builder.loadHtml(`
<div class="row">
<div class="column full">
<h1 class="leading-none font-medium size-64">Hi There..</h1>
</div>
</div>
`);
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
<div className="container" style={{
maxWidth: '800px',
margin: '250px auto',
padding: '0 20px' }}>
</div>
</>
)
}
export default Edit
To render your content created using ContentBuilder, include the necessary CSS into your resources/views/app.blade.php file:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React</title>
<link rel="stylesheet" href="/assets/minimalist-blocks/content.css" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
With this step, we apply content.css to the content.
To complete the setup, modify the routes/web.php to include:
Route::get('/edit', function () {
return Inertia::render('Edit');
});
Open http://localhost:8000/edit. ContentBuilder.js is now fully integrated into your Laravel project.
Now, you're ready to use ContentBuilder.js in your Laravel project!
Additional Functionality
For more functionalities such as saving content, uploading image files, or enabling AI-Assistant, you can explore the example implementation provided in the user's download area. Additionally, refer to the ContentBuilder.js documentation for further guidance.