# 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
weweb-cli requires Node.js version >=12.0.0. weweb.io use Vue 2
We provide a npm template to quickly start development.
npm init @weweb/component
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
srcdirectory with a file for your component (
wwElement.vue). Available props and events are listed here
package.jsonwith two scripts for dev and build,
- a basic
ww-config.jsonwhich have only the mandatory option
path. Learn more about it here
We only support Vue 2 for now
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
# 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
# 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).
Advanced Settings then on
Continue to localhost
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).
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.
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.
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
Elementspanels, 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.
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.
Your component will not be updated inside your website until you change the active version in the dashboard.
And voilà !