sa-mijn-account v0.2.11

First steps

Mijnaccount package requires node >= 6 version and npm >= 3 version. Currently supported OS: Linux & Mac OS.

To be able deploy your project to live you would need to get repository link, slug and secret from Sanoma Account team. Also you will be asked about your slug name (it will be used in mijnaccount site URL). P.S. You could change repository link and slug later in the sa-config.json file.

npm install -g sa-mijn-account

Note: if you have some problems with permissions, try to run this command with sudo.

Available commands

sa-mijn-account new {name}

Create new Mijn account development environment in current folder.

sa-mijn-account create-tile {name}

Add empty component to the project: add to imports and pass to Mijn account plugin as props. Look main.js file. Feel free to modify such components.

sa-mijn-account add-tiles

Add internal Mijn account components to the project: add to imports and pass to Mijn account plugin as props. Look main.js file.

sa-mijn-account deploy --secret={secret}

Steps, that should be done:

• If it's initial project you would need to commit and push your changes
  • git init
  • git add --all
  • git commit -m 'Initial commit'
  • git remote add origin <repository-link>
  • git push -u origin master
• Make new tag and push it remotely
  • git tag 1.0.0
  • git push --tags
• Create actual build (this folder will be deployed to live!)
  • npm run build
• Start deploying sa-mijn-account deploy --secret=<secret>. After few minutes your project will be deployed.
• Check https://mijn.sanoma.nl/slug

Folder Structure

After creation, your project should look like this:

my-app/
  build/
  config/
  node_modules/
  src/
    assets/
      header.jpg
    components/
    App.vue
    event-bus.js
    main.js
  static/
  README.md
  index.html
  package.json
  .gitignore
  sa-config.json

Available scripts

npm run start

Runs the app in the development mode. Open http://localhost:8000 to view it in the browser.

npm run build

Builds the app for production to the dist folder. It correctly bundles app in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

Available sa-config.json options

Feel free to modify them. Sometimes changes require dev server restart, so to be sure restart dev server everytime on sa-config changes.

• api_key: title's Gigya api_key
• repository: link to project repository (should be provided by SA team)
• slug: slug name
• stage: SA javascript file version (test/staging/production)
• title: Mijnaccount webpage title
• screenset_prefix: screenset prefix specific for title
• navigation_container: HTML id for where SA would be rendered
• show_header_image: show/hide header landing image (true/false)
• custom_header_image_url: custom header image URL (string/false)
• custom_header: HTML code for custom header (string/false)
• custom_background_color: custom background color (string/false; e.g. '#f4f4f4')
• custom_foreground_color: custom foreground color (string/false; e.g. '#f4f4f4')
• custom_topbar_color: custom topbar color (string/false; e.g. '#f4f4f4')

Dynamic grid system

For implementing dynamic grid system https://github.com/jbaysolutions/vue-grid-layout was used. Every title's component and SA component has injected update grid function in mounted and updated methods. So, grid recalculation will happens after such methods. It is also possible to call redraw grid manually: this.redrawGrid(), which is also injected into components.

For more info with screenshots and video go here: Mijnaccount