- Install dependencies:
npm install
- At the moment, you must have a local copy of
apostrophe
using the3.0
branch and link that to this project. In whatever local directory you keep your dev work in, run:git clone git@github.com:apostrophecms/apostrophe.git && cd apostrophe
git fetch && git checkout 3.0
to get on the correct branch.npm link
to set Apostrophe up for linking in the project.
- Back in the
a3-demo
project, link up Apostrophe:npm link apostrophe
.
Run npm run dev
to build the Apostrophe UI and start the site up. Remember, this is during alpha development, so we're all in "dev mode."
It is possible to analyze the size of the admin UI webpack bundle:
APOS_BUNDLE_ANALYZER=1 node app @apostrophecms/asset:build
This will display a visualization in your browser.
As of this writing, we are not optimizing the webpack build for production, so expect to see big numbers.
To spin up the UI component library (including to work on Apostrophe UI components) run npm run storybook
. By default, the storybook library will run at http://localhost:9001.
$ npm run deploy-storybook
This script will run the build to the .out
directory and trigger a deploy to the gh-pages
branch.
Storybook operates in a number of layered iframes, obscuring Vue Dev Tools from reading your Vue states. You can use the standalone Electron Vue Dev Tool application to drill into your stories, just
$ npm install -g @vue/devtools
======================[100%]==
$ vue-devtools
And make sure the port your vue-devtools
is looking for matches the one specified in Apostrophe core's modules/@apostrophecms/storybook/template/.storybook/preview-head.html
(currently http://localhost:8098
).