# Development process

Even if your weweb.io (opens new window) components are only Vue components, they need to be loaded inside a specific context to be tested. The easiest way to test is to use the editor in development mode. Here is a description of the different steps to test and develop your component.

# Initiate your directory

Compatibility note

weweb-cli requires Node.js version >=12.0.0. weweb.io use Vue 2

We provide a npm template to quickly start development.

For npm

npm init @weweb/component

For yarn

yarn create @weweb/component

Then you have to follow the different prompts questions.

If you already know what you want, you can pass the component name and the type of component you want via additional command line options. For example if you want to create an element named my-element or a section named hero-section

# npm 6.x (use npm -v to know your version)
npm init @weweb/component my-element --type element
npm init @weweb/component hero-section --type section

# npm 7+, extra double-dash is needed (use npm -v to know your version)
npm init @weweb/component my-element -- --type element
npm init @weweb/component hero-section -- --type section

# yarn
yarn create @weweb/component my-element --type element
yarn create @weweb/component hero-section --type section

The directory will contain

  • a src directory with a file for your component (wwSection.vue or wwElement.vue). Available props and events are listed here
  • a package.json with two scripts for dev and build, vue and weweb/cli as dependencies
  • a basic README.md
  • a ww-config.json which have only the mandatory option path. Learn more about it here

WARNING

We only support Vue 2 for now

WARNING

You can add other dependencies if you need. Be aware that all package.json will be merged in the final website, and if two components need the same dependencies, only the more recent will be installed. This can lead to conflict.

# Install dependencies and start dev server

Go to the directory you just created, install dependencies and start a dev server

For npm

# Install dependencies
npm install

# Start with default 8080 port
npm run serve

# Or give a port (usefull if you are developing several components)
npm run serve --port=4040

For yarn

# Install dependencies
yarn

# Start with default 8080 port
yarn serve

# Or give a port (usefull if you are developing several components)
yarn serve --port=4040

We use https to serve component. Your browser needs to authorize this.

Go to https://localhost:8080 (opens new window) (or the port you choose).

Click on Advanced Settings then on Continue to localhost

Chrome settings

If you do not see Advanced settings , type chrome://flags as URL in your browser. Search for Allow invalid certificates for resources loaded from localhost and click Enable

# Load your component inside weweb.io in dev mode

Go to your dashboard (opens new window) and open the editor of one of your website.

Open the Elements or Sections menu (depending on what you are doing), and click on Local development at the bottom of the sidebar.

Add a local element, give it a name and put the port where you start you dev server (8080 by default).

Component name

If you use the same name as a component that already exists on the page, all instances already on the page will be replace by your local version. This is useful for updating previously developped component.

WARNING

Because during development you can broke the integrity of your component content, or use non existing yet components the autosave is disabled. This means that you can safely try things, but also that everything will be reload from scratch when refreshing the page.

Each time you change the code, the component will be refresh inside the editor.

WARNING

If you change ww-config.json, you must restart your dev server to see the new configuration loaded.

# Display and develop your component

  • For section, we already do it for you. When a section is loaded with Local development, we push a version of it at the end of all other sections by default.
  • For element, you can easily access local elements and the end of the Elements panels, and drag and drop then where you want to test them

You can see next section for more information about what you can do with your component

# Push in production

When you are satisfied with your version, you can publish it. weweb.io (opens new window) rely on github to version components.

You also need to clear the Local Development (same panel as for adding one) to use your production version instead.

# New component

If you are creating a new component, create a repository on github and push your code.

Then go to your dashboard, and add a source code pointing to your github repository.

Load your component (Sections or Elements panels) from source code (bottom of the panel).

Eventually add some base style (padding, background color) and add it on your Design System.

TIP

This last step is not mandatory, because you can always load your component from source code. But it's offering a better user experience.

# Updating existing component

If you are updating an existing one, update the version field in package.json and push to github.

Then go to your Dashboard source code, search your component, and change the version (we have a hook on github that will trigger a build each time you push to the pointed branch).

Check that everything is working as excepted.

TIP

Your component will not be updated inside your website until you change the active version in the dashboard.

And voilà !