An opinionated setup

The Lean Web Kit is an opinionated setup of a set of hand-picked services, with at its core:

  • Vue + Nuxt - a modern app framework to build advanced sites & apps quickly.
  • Dato CMS - a cloud-based environment to manage all your content.
  • Netlify - an all-in-one hosting provider with A/B testing support, cloud functions and more.

To get started with the Lean Web Kit in your project, you’ll need to replicate this setup in 3 steps:

  1. Clone the CMS
  2. Clone the app
  3. Deploy to Netlify

1. Clone the CMS

The first thing you’ll need to bootstrap your project is a clone of the CMS. To get a clone:

  • Log in on the Dato CMS Dashboard with the shared Voorhoede developer credentials.
  • Find the Lean Web Kit Template project.
  • Select Duplicate from the options menu.
Duplicate template from the Dato CMS Dashboard

Your CMS is now ready to be used. To connect it to your app and hosting in the next steps, you’ll need to get your API Access Token from the CMS. Go to CMS > Settings (in top menu) > API tokens > Read-only API token and copy the API key:

API Access Token is available under your CMS settings

In the example above, the API key is 8DeVtMRRca5Q1GwQNIlgXi2PsbP3BRMR.

2. Clone the app

The voorhoede/lean-web-kit repository on GitHub holds the code of our Vue + Nuxt app. Download a copy or use degit to get a fresh clone:

mkdir my-lean-project
cd my-lean-project/
npx degit voorhoede/lean-web-kit

Your app needs to be connected to your CMS. You can configure this in a .env file:

  • Copy .env.example to .env.
  • Paste your API token after DATO_API_TOKEN=.

With our example token this would be DATO_API_TOKEN=8DeVtMRRca5Q1GwQNIlgXi2PsbP3BRMR.

You can now test that your app works by running:

npm install
npm run dev

Your new app is now available on http://localhost:5236.

For more info on the application’s code see the files located in every directory.

Push the code of your new application to a new repository on GitHub, GitLab or Bitbucket. All three are supported by Netlify, which we’ll configure in the next step.

3. Deploy to Netlify

The final step is to deploy your new app to Netlify:

  • Log in on Netlify (and sign up along the way if you don’t have an account yet).
  • Create a new site by selecting “New site from git”.
  • Follow the instructions to connect to your git provider and select your repository.

The basic build settings are automatically pre-filled based on the netlify.toml file in your repository:

Basic build settings are pre-filled by the Lean Web Kit

All that’s left is to connect your CMS by setting your API token under Advanced build settings:

Add your API Token under Advanced build settings

Hit “Deploy site” to deploy your app.

Changes to your code (on the master branch) are now automatically deployed. To deploy a new version of your app when you publish content, you’ll also need to connect Netlify from your CMS. Go to CMS > Settings (in top menu) > Deployment settings > Production:

Deployment settings in your CMS

Select Netlify and follow the wizard to connect to your project. When you’re done, you can use the Build site button in your CMS to publish new content.

That’s it. You have the basic setup. To benefit from more features of the Lean Web Kit you can configure additional services.