SonicJs Docs

User Guide

The user guide is designed to get you up and running quickly. It is recommended that you review the quick start section in detail and come back to the subsequent section as needed depending on your project.

Quick Start

Assuming that your website is up and running locally, let's dive into the awesomeness of SonicJs. Here is what we're going to do:

  • Login
  • Become familiar with the admin UI
  • Create a page
  • Create a menu item
  • Add some content to your page

Login With Admin User

Login with the admin email/password.

You should now now be able to access the admin panel:

http://localhost:3018/admin/

Also, notice that when you go back to your site, you will now see the admin tool bar on the left side of the screen.

The Admin UI

Now that you can access the admin panel:

http://localhost:3018/admin/

Click thru the various menu items on the left nav to explore the various options.

Create a Page

Let's create our first page!

  1. From the admin UI, click "Content"
  2. Click the "Add Content" button
  3. Click "Page"
  4. In the title field, enter "My Page" and click "Submit"

We'll add some content to your new page in a minute, but first let's add a menu item so that you can access your new page.

Create a Menu Item

  1. From the admin UI, click "Menus"
  2. Click the "Edit" button in the "Main" row
  3. Click "Add Another"
  4. Enter: Url: "/my-page"
  5. Enter: Title "My Page"
  6. Click "Submit"

Visit http://localhost:3018/

You should now see your new menu item in the main top nav. Click on it to visit our new page. It's blank, but we'll take care of that in the next step.

Add a Layout to the Page

SonicJs allows you to manage your layout and content on the fly. So first we'll create a simple 2 column layout, then add some content in both columns.

  1. From the page builder UI on the left, click "Add Section"
  2. Click "empty column" to select the column
  3. Click Row -> Add Column, this will add a second column
  4. Click "Section 1", then "Edit"
  5. You will see the data structure for the page. You'll see 2 "class": "col"
  6. In the first one, change "col" to "col-md-3"
  7. In the second one, change "col" to "col-md-9"

Add Content to your Page

  1. Click the first "empty column" to select the column
  2. Select Module -> Title
  3. Enter "Hello SonicJs!" for the title, then click "Submit"
  4. Experiment with adding other modules to your columns following the steps above.

That's it! You now know your way around SonicJs. However, to understand the real power of SonicJs, you need to go thru the process of of managing your own custom content types, creating a custom module, etc. 

Next check out the Modules section.