Using ContentBox.js in a Laravel Project
This guide walks you through the steps to integrate ContentBox.js into a Laravel project configured with Breeze and React. Breeze simplifies the implementation of Laravel's functionalities, including authentication, with React enhancing the front-end framework. Let’s get started!
Setting Up Your Laravel Project with Breeze
If you haven't already, install Laravel using Composer. Launch your terminal and execute the following command:
composer create-project --prefer-dist laravel/laravel laravel-contentbox
Executing this command sets up a new Laravel project named 'laravel-contentbox', installing a clean Laravel application along with all required files and configurations.
Navigate to your project directory:
cd laravel-contentbox
Next, install Laravel Breeze into your project for a streamlined authentication process (including login, registration, password reset).
composer require laravel/breeze --dev
Afterwards, configure Breeze to use React for your front-end:
php artisan breeze:install react
This action reconfigures your project to utilize React components for the authentication pages, scaffolding basic authentication views and functionality with React. This facilitates building a single-page application (SPA) that features login and registration functionalities.
Run Database Migrations
Having integrated Breeze into your Laravel project for authentication, the next step involves preparing your database to handle user information:
php artisan migrate
This command sets up the necessary database tables and columns to store user details and authentication data, a foundational step for your application to manage user sessions and information.
Install Dependencies
Proceed to install all the NPM packages required, including those for React:
npm install
Running Your Laravel Project
Begin by compiling your project's assets using the following command:
npm run dev
This compiles your CSS and JavaScript files for browser use. Keep this terminal running to automatically recompile assets upon any changes.
Open another terminal window, navigate to your project directory, and start the local web server:
php artisan serve
This makes your Laravel project accessible at http://localhost:8000 via a web browser, allowing you to interact with your project throughout development. Keep this server active.
Ensure your setup is correct by visiting http://localhost:8000.
Open your Laravel project in your preferred IDE or code editor (e.g., Visual Studio Code).
Installing ContentBox.js
With your project setup complete, it’s time to integrate ContentBox.js. Within your project directory, install ContentBox.js using npm:
npm i @innovastudio/contentbox
Then, obtain the ContentBox.js ZIP package from your user area, extract it, and copy the following directories and files to your project's public folder:
- public/assets/
- public/box/
- public/contentbox/
- public/contentbox/
- public/uploads/
- public/blank.html
- public/assets.html
- public/preview.html
To maintain compatibility with the newest version of ContentBox obtained via NPM, we recommend using the asset files from the latest ContentBox.js package.
Implementation
Create a new file at resources/js/Pages/Edit.jsx and add the following code to integrate ContentBox.js:
import { useEffect, useState } from 'react';
import ContentBox from '@innovastudio/contentbox';
import '@innovastudio/contentbox/public/contentbox/contentbox.css';
import '@innovastudio/contentbuilder/public/contentbuilder/contentbuilder.css';
let builder;
function Edit(props) {
useEffect(() => {
builder = new ContentBox({
// Basic Settings
canvas: true, // Enable the new canvas mode
controlPanel: true, // Enable the new control panel
iframeSrc: 'blank.html', // Enable resizable content area
// Template Sets
templates: [
{
url: 'assets/templates-simple/templates.js',
path: 'assets/templates-simple/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-quick/templates.js',
path: 'assets/templates-quick/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
{
url: 'assets/templates-animated/templates.js',
path: 'assets/templates-animated/',
pathReplace: [],
numbering: true,
showNumberOnHover: true,
},
],
slider: 'glide', // Enable slider
navbar: true, // Enable navbar
});
// Load sample content
let html = `<div class="is-section is-section-100 is-box type-system-ui">
<div class="is-overlay"></div>
<div class="is-container v2 size-18 leading-14 is-content-900">
<div class="row">
<div class="column">
<h1 class="leading-11 size-88">We design. We develop. We get it done — nicely.</h1>
</div>
</div>
</div>
</div>`;
let mainCss = '';
let sectionCss = '';
builder.loadHtml(html); // Load html
builder.loadStyles(mainCss, sectionCss); // Load styles
return () => {
// cleanup
builder.destroy();
builder = null;
};
}, []);
return (
<>
</>
)
}
export default Edit
To finalize your setup, update routes/web.php to include:
Route::get('/edit', function () {
return Inertia::render('Edit');
});
Navigate to http://localhost:8000/edit. ContentBox.js is now fully integrated into your Laravel project.
Now, you're ready to use ContentBox.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 ContentBox.js documentation for further guidance.