WeWeb For Developers
Getting started
Add editable elements
Add section options
Create a popup
Manage data & events
Upload a section
Manage versions
wwLib Reference
API Reference

Getting started with WeWeb for developers

WeWeb websites are composed of pages which are divided into sections. Each section is a Vue.JS component.
We aimed from the very start of the company to allow anybody to add what ever code he wants and to be able to work locally on his computer.
So then you can upload your components to a private part of the store. Let’s see how you can do this.

All sections that are in the WeWeb store are open source. You can find all of them in this public repository.
Before you start
You’re going to need a terminal to develop and upload your own components.
For Mac users:

Run “CMD + space” then type “terminal”
For Windows users:
Run “WIN +R” type “wt”
Please make sure Node.js and npm are properly installed on your machine. You can also use Yarn. Here the instruction to get started with it.
Let’s start our first component locally
Go to this github repo and click on the “copy button”.
wwSection open-source repository
Go to your terminal and select the directory you want to work in. To work on your desktop folder, you can type:
cd ~/Desktop
Type “git clone” then paste, you should have :
git clone git@github.com:WeWeb-Public/wwSection.git
You have the code from github copied, continue by typing :
cd wwSection
npm install
You just selected the new folder and installed the “node packages”. Let’s take a look at the code :
code archecture of a section
node_modules: here are the packages previously installed that are needed to work locally.
src: It contains the main code.
  • default_data: here the data to initialize your component once
  • uploaded. (more details here)
  • index.js: It is a config file. No need to worry about for now section.vue: this is a classic VUE.JS single file component
eslintrc: config file for your code editor.
.gitignore: config file to prevent local files from being uploaded to github.
.postcssrc.js & babel.config.js: config files needed when you upload your component
package.json: config file to set the name of your component and all dependencies
Let’s take a closer look to section.vue
vue.js single file component
A single VUE.JS file component is composed of three part:

  1. Your HTML, between the <template> tag
  2. Your Javascript, between the <script> tag
  3. Your CSS, between the <script> tag
Now, we want to see how it looks like on the navigator. Go back to your terminal and type:
npm run serve
or
yarn serve
serve locally
You have now a component that is a section running locally on your computer. Go to the weweb editor and click on
developer settings panel
Click
You should see
, that is normal. As the editor is in https the navigator does not appreciate that
Click
,
then clickhttps://localhost:8080
Click
, then click
You should see:
Close the tab, click
You should see:
Click
Your section is up and running on you page
Click
Tadaa:
Let’s try to edit it. Go back to the code and add <div>Hello there</div> like this
<template>
    <div class="hello">
        <!-- wwManager:start -->
        <wwSectionEditMenu v-bind:sectionCtrl="sectionCtrl"></wwSectionEditMenu>
        <!-- wwManager:end -->

        <!-- This is the background of the section -->
        <wwObject class="background" v-bind:ww-object="section.data.background" ww-category="background"></wwObject>

        <div class="content">
            <div>Hello there</div>
            <!-- This is a simple WeWeb object which can be anything in the editor -->
            <wwObject v-bind:ww-object="section.data.helloWorld"></wwObject>

            <!-- This is another WeWeb object that we initiaze as an image -->
            <wwObject class="hello-image" v-bind:ww-object="section.data.image1"></wwObject>

            <!-- This is a content block, a list of objects, it will add the little blue "plus" around the objects in the editor -->
            <div class="content-block">
                <wwLayoutColumn tag="div" ww-default="ww-text" :ww-list="section.data.contentList" class="list" @ww-add="add(section.data.contentList, $event)" @ww-remove="remove(section.data.contentList, $event)">
                    <wwObject tag="div" v-for="object in section.data.contentList" :key="object.uniqueId" :ww-object="object"></wwObject>
                </wwLayoutColumn>
            </div>
        </div>
    </div>
</template>
Save the file and go back to the navigator and see your modification
Now you can code what you want in your favorite editor!
© 2019 WEWEB SAS - All rights reserved - contact@weweb.io