Why do you need Blended express?

The blended-express-js is a type of JavaScript framework Blended Host that allows you to render a Blended theme. Simply, you can install the blended, specify the path of your theme, run the server and can browse your website which is running on a Blended theme.

Download Blended CLI and set up the Blended directory

Install Blended Express by the following command:

Hello World Express Application

Hello World example mentioned below is written in express js and we would incorporate Blended functionality with this application.You can create a file named app.js and can write the below line of code inside the file.

Run The App

See The Output

Just loading the below URL in a browser:

Using Blended

Now we will proceed with Blended to make a change in the hello world application.

Import blended

You can use Blended by just importing the blended library.

Instantiate Blended

Instantiate Blended by invoking the blended object.

Now we are going to use blended express as per following:

It will take arguments as a user's express(app).

Specify the theme root directory by following:

Where,
theme_path = Blended theme path, will reside in the blended root directory which you have specified during CLI setup.

Enter the absolute path of your theme which you want to activate as a blended theme inside the app.js file.

Create a new Blended account:

Please sign up from here.

Note: New account is not required. It’s optional, whereas, having a Blended account lets you share your website designs between the different site installation you may have and it will allow you to get more access to use the rest of the Blended feature without any hassle. Your information will never be shared and it will be kept confidential.

Now login to get the Blended theme:

It will give you the theme in the context form.

If the theme is not available at that path, then it will throw an error Unable to find the theme.

Note: Password is optional here.

Add CSS Endpoint

If you want to provide the path of CSS then you can change this by following API:

If you will not provide the path then it will host the directory called static in the root.

See Host Template for how to use css

Ex:

You can add your extra.css at the path you have provided.

If you haven't changed the path then add extra.css at /static/css path.

Add js Endpoint

If you want to provide the path of js then you can change this by following API:

If you will not provide the path then it will host the directory called static in the root.

Ex:

You can add your extra.js at the path you have provided.

If you haven't changed the path then add extra.js at /static/js path.

See Host Template for how to use js

Add Media Endpoint

By default application will host the media at media directory in the root but you can change this by following API:

Adding Routes

It’s registering the root URL for your application.

This route is rendering a home.html template file by accepting the Blended theme context object. The home.html is a Blended host template and you can add many more as per your requirements. You can add more routes by following the above examples.

All the Snippet Together

Keeping all together in the app.js file

Host Template

It provides dynamic data to the base template by extending it. It will be residing inside the views directory in the root path of the application.

We are giving you an example of a host template that is home.html as a rendering template for the root URL.

See Host Template.

How to Include the theme into your express application?

Extending a predefined Blended template should allow you to add a new page in your express application.

This host template is extending the theme base template named as wide.html. Base templates are part of Blended theme which resides in the html directory.

Add a template

You need to add the template file inside the views directory.

Add the Content Blocks

You can add a content block into the host template as per following.

We have predefined content blocks. Please See.

Run The App

Run the app with the following command to start the server:

See The Output

Just loading the below URL in a browser: