Using Partials with NodeJS

What are Partials

Wappler allows you to create and reuse partials in your NodeJS Projects. Partials are useful when you want to create reusable components and include them in some of your pages. Unlike the content which you include in your layout pages, which is used across all the pages using this layout, partials can be included on just some of your pages.
You can include anything inside a partial - a navbar, a banner, a contact form, an image gallery etc.

Creating Partials

We have already created a layout and a page from it:

We’d like to include a partial on our page.
There are two ways to create a partial - creating a new partial from scratch or moving an existing content/component from a page to a partial.

Creating a new Partial

We’d like to create a banner, which shows some promo image and add it to several of our pages.
Select Partials in the Pages Manager:

Click the create new button:

Add a name for your partial:

Type should be set to Partial:

Click Save:

Your partial will be loaded in Design View. Select App in the App Structure panel and select your layout page from the dropdown. This way the partial will know where to add any includes if required:

You can add your content here:

We add a container:

And then an Anchor Image inside it:

Setup your link:

Then select your banner image:

We select it in the assets picker dialog:

And we enable the responsive option for the image:

Save your page and you are done. Now let’s add this partial on your page(s).

Adding Partials on Your Pages

Open a page where you want to use this partial on. Click the add element button, where you need to add the partial:

In the Content menu select Partial:

And select your partial from the dropdown:

And you can see your partial included on the page:

This way you can include your partial on any page.

Moving Page Content to a Partial

You can move any content from your page to a Partial and then reuse it on your other pages.

Select the element/component which you want to move to a Partial (1) and click the Move to Partial button (2):

And you are done! Your partial appears in the Partials menu of the Pages Manager:

4 Likes

Hi Teodor,
I followed your instruction but I am getting an error;

This is the partial added

and this is the error in the browser

I created fairly simple partials and tried in new pages, same error.

  • status: “500”,

  • message: “missing ) after argument list in /opt/node_app/views/test.ejs while compiling ejs If the above error is not helpful, you may want to try EJS-Lint: https://github.com/RyanZim/EJS-Lint Or, if you meant to create an async function, pass async: true as an option.”,

Seems you have an extra comma in the include expression right after the word locals, try removing it

That didnt solve the problem but I created a new project and tried, it worked even with that extra comma after locals.

I am not sure if this is relevant, but I realized that when I use Docker to view pages (port 8100) it is not reflecting changes right away. Maybe it s because the project folder was in OneDrive.
Anyway, I created a new project on the disk and checked on port 3000, partials worked fine.

Thank you.

With docker you have to restart indeed the server to reflect the changes, specially on Windows

Love it! Nice work on all of this Wappler team. Words do not describe how excited I am about your effort to add node.js into Wappler. I cannot wait to start building my app as soon as I get some down time! :vulcan_salute:

3 Likes

Is possible to make the partials look at the main style.css file and assets folder. In the editor my partial is missing styles and has broken image links but when I deploy and preview my app it looks fine.