[[wwLink={"linkPage":69703}|text=Editor courses]]

[[wwLink={"linkPage":99378}|text=Developers]]

Start building free

Editor courses

Developers

Blog

TRY WEWEB FREE

Introduction à l'éditeur

2:36

Créer un site

1:22

Ajout d’éléments

1:02

Publication & gestion des versions

1:23

Getting started

Add editable elements

Add section options

Create a popup

Manage data & events

Upload a section

Manage versions

wwLib Reference

API Reference

WeWeb For Developers

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

[[wwObject=0]] 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”

[[wwObject=0]] 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

[[wwObject=0]] Go to this github repo and click on the “copy button”.

[[wwObject=0]] Go to your terminal and select the directory you want to work in. To work on your desktop folder, you can type:

[[wwObject=0]] Type “git clone” then paste, you should have :

[[wwObject=0]] You have the code from github copied, continue by typing :

[[wwObject=0]] You just selected the new folder and installed the “node packages”. Let’s take a look at the code :

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

[[wwObject=0]] Let’s take a closer look to section.vue

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

[[wwObject=0]] Now, we want to see how it looks like on the navigator. Go back to your terminal and type:

or

[[wwObject=0]] You have now a component that is a section running locally on your computer. Go to the weweb editor and click on [[wwObject=1]]

[[wwObject=0]] Click [[wwObject=1]]

[[wwObject=0]] You should see [[wwObject=1]], that is normal. As the editor is in https the navigator does not appreciate that

[[wwObject=0]] Click[[wwObject=1]], then click https://localhost:8080

[[wwObject=0]] Click [[wwObject=1]], then click [[wwObject=2]]

[[wwObject=0]] You should see:

[[wwObject=0]] Close the tab, click [[wwObject=1]]

[[wwObject=0]] You should see:

[[wwObject=0]] Click [[wwObject=1]]

[[wwObject=0]] Your section is up and running on you page

[[wwObject=0]] Click [[wwObject=1]]

Tadaa:

[[wwObject=0]] Let’s try to edit it. Go back to the code and add <div>Hello there</div> like this

[[wwObject=0]] Save the file and go back to the navigator and see your modification

[[wwObject=0]] Now you can code what you want in your favorite editor!

NAVIGATION

[[wwLink={"linkExt":"https://www.weweb.io/editor"}|text=Editor]]

[[wwLink={"linkExt":"https://www.weweb.io/components"}|text=Components]]

[[wwLink={"linkExt":"https://www.weweb.io/pricing"}|text=Pricing]]

LEARN

[[wwLink={"linkPage":69703}|text=Tutorials]]

[[wwLink={"linkExt":"https://learn.weweb.io/documentation"}|text=Documentation]]

COMPANY

[[wwLink={"linkExt":"https://www.weweb.io/legal-notice"}|text=Legal notice]]

[[wwLink={"linkExt":"https://policy.weweb.io/"}|text=Terms & conditions]]

[[wwLink={"linkExt":"https://jobs.stationf.co/companies/weweb"}|text=We are hiring!]]

COMMUNITY

© 2019 WEWEB SAS - All right reserved - contact@weweb.io