# Configuration
In order to connect to your Whoobe Server you need to configure Whoobe Generator and Whoobe Studio
# Whoobe Studio
Create an .env
file at the root folder of MOKAStudio (default whoobe-studio-alpha-01
) and add the following environment variables
Path - ./.env
VUE_APP_API_URL=http://localhost:3030/
VUE_APP_LOCAL=true
VUE_APP_FONT_FAMILIES=Asap+Condensed|Barlow+Condensed|Abel|Alice|Alegreya|Amethysta|Archivo+Black|Montserrat|Nunito+Sans|Open+Sans|Roboto|Roboto+Condensed|Quattrocento|Raleway|Lora|PT+Sans|Alfa+Slab+One
Variable | Description | Notes |
---|---|---|
VUE_APP_API_URL | Whoobe Server URL | ex. http://localhost:3030/ |
VUE_APP_LOCAL | Local build | Not used anymore. You can strip |
VUE_APP_FONT_FAMILIES | list of font families separated by '|' | Font available in Whoobe Studio. You can add or remove fonts. By the way in the generation process only used fonts will be added |
# Fonts support
You can add google fonts using the environment variables. Any font added here will be available in Whoobe Studio as font setting for any element.
# Whoobe Generator
Create an .env
file at the root folder of Whoobe Generator (default whoobe-generator-alpha
) and add the following environment variables
Whoobe Generator is invoked to build your static web site directly from Whoobe Studio. Extra configuration is required in order to add features like a form sender endpoint. Google Analytics and ReCaptcha will be configured using Whoobe Studio.
API_URL=__WhoobeCMS_URL___ //default http://localhost:3030/
FULL_STATIC=true|false
LOCAL_ASSETS=true|false
FONT_FAMILIES=Asap+Condensed|Barlow+Condensed|Abel|Alice|Alegreya|Amethysta|Archivo+Black|Montserrat|Nunito+Sans|Open+Sans|Roboto|Roboto+Condensed|Quattrocento|Raleway|Lora|PT+Sans|Alfa+Slab+One
GOOGLE_ANALYTICS=UA-XXXXXXX
FORM_SENDER=_YOUR_FORM_SENDER_ENDPOINT
RECAPTCHA=_RECAPTCHA_API_KEY_
Variable | Description | Notes |
---|---|---|
API_URL | Whoobe Server URL | Auto configured |
FULL_STATIC | when you go to full static during the generate process your media assets will be copied from your local Whoobe Server public/upload folder. Only images used by your pages will be copied. | |
LOCAL_ASSETS | true / false | Local assets will be used |
FONT_FAMILIES | list of fonts used separated by the character| You can omit this if you will generate your website from Whoobe Studio | |
GOOGLE_ANALYTICS | Google Analytics ID | Can be set using Whoobe Studio generate option |
FORM_SENDER | Going full static you need a remote form submission URL with email send support | |
RECAPTCHA | the Recaptcha API KEY (not required in local environment). We suggest to use it in production environment |
# Google Analytics
By default the package @nuxtjs/google-analytics will be installed as dev dependency since it will be used only at building time.
If your website will not use Google Analytics update ./nuxt.config.js removing
Path - ./nuxt.config.js
....
/*
** GOOGLE ANALYTICS remove if you don't use
*/
googleAnalytics: {
id: __google_analytics_code__
}
...
and remove the buildModules configuration
buildModules: [
...
'@nuxtjs/google-analytics'
],
# Whoobe Server
In local development no special configuration is required. All configuration and settings are automatically created at installation time.
Open ./config/default.json
from the root folder of Whoobe Server ( whoobe-server-alpha) and locate the line
"nuxt" : "../../whoobe-nuxt",
Update with the root folder of Whoobe Generator.
# Running Whoobe
# Run Whoobe Server
/whoobe/whoobe-server-alpha $ yarn dev
Whoobe Server will start at http://localhost:3030 (opens new window)
We suggest to use nodemon to support HMR for the server
# Run Whoobe Studio
/whoobe/whoobe-studio-alpha-01 $ yarn serve
Checkout here Whoobe Studio (opens new window)
# Run Whoobe Generator
As a generator normally you don't need to run Whoobe Generator, but you can run in order to test the static version.
To run in test development
/whoobe/whoobe-generator-alpha $ yarn dev
To run after generation process
/whoobe/whoobe-generator-alpha $ yarn start
Checkout here whoobe (opens new window)