menu

Creating Starter Application

Minimal boilerplate

You can create a starter application by using singlepage create command.

$ create myapp
Creating singlepage app in \projects\myapp
Installing packages...
npm notice created a lockfile as package-lock.json. You should commit this file.
added 9 packages from 9 contributors and audited 9 packages in 1.382s
found 0 vulnerabilities

Singlepage starter app created successfully.

The command will create the right directory structure and install needed node packages in the application directory. The resulting directory structure will look like the one shown below.

myapp
  |-assets
    |-favicon.ico
    |-images
      |-app_logo.png
      |-avatar.png
      |-landing.svg
  |-config.json
  |-lib
    |-splib.esm.js
    |-spserver.js
  |-node_modules
  |-package-lock.json
  |-package.json
  |-server
    |-app.json
    |-services
      |-EchoService.js
  |-src
    |-components
      |-Echo.vue
    |-main.js
    |-www
      |-css
        |-bootstrap-grid.css
        |-bootstrap-reboot.css
        |-bootstrap.css
        |-sp.css
      |-index.html
      |service_tester.html

Contents of the starter app directories and their intented use is summarized in the table below.

Directory/File Description Modifiable
assets Everything under assets directory is copied to the client root directory without any changes. You can add files to this directory and refer to them in your components by prefixing it with CDN_URL config option. Yes
assets/app_logo.png Logo displayed on the splash screen and top left corner on the app when it is loaded. You can replace this file with your own logo Yes
assets/images/avatar.png Default avatar image Yes
assets/images/landing.svg SVG image used in the starter app. You can delete this image if you change the display of splash screen component. Yes
config.json App configuration. See the Configuration Parameters sections for a description of available configuration parameters. Yes
lib Contains Singlepage server and client libraries.Your code will reference the files in these directories. Do not alter these files. No
server/app.json Application definition file. This file will get modified when you edit your application via Singlepage admin UI. We recommend not manually editing this file unless you really know what you are doing. No
server/services Directory where you will put your *Service.js files. These files will be automatically registered in Singlepage service registry with the same name as the file name minus the extension. EchoService.js is a sample service that illustrates basic service structure. Yes
src/components Directory for application Vue.js components. A sample component Echo.vue is provided as an example. You can add more .vue files to this directory for your components. The components will be registered with the same name as the file name minus the .vue extension. Yes
src/main.js The entry file for rollup.js bundle for your application. Yes
src/www/css/bootstrap*.css Files for themeing your application. We recommend not editing bootstrap and grid files. Yes
src/www/css/sp.css Core Singlepage styles that generally constant across look&feel. Yes
src/www/index.html Index file template. You can modify this file but do not edit the mustache variables. Yes
src/www/service_tester.html Simple interface to test Singlepage services No

Creating Boilerplate with Full Customization

Use -f or --full flag to create additional customization files.

$ singlepage create myapp -f

This option will write a few more files that offer customization of Singlepage applications. The additional or modified files written in the full mode are summarized below.

Directory/File Description
src/locales/messages_en-US.json Messages file for internationalization. Strings defined in this file will override default messages for en-US locale. If your locale is set differently, create a file named messages_<locale>.json. For example, if LOCALE is set to fr in config.json, define your messages in messages_fr.json.
src/templates/component_templates.json Defines new CSS styles for existing component windows and allows overriding default display styles.
src/templates/page_four_equal_columns.xml An example page layout grid. You can create your own page layouts by defining XML files that start with page_.
src/main.js Modified main.js files that passes more customization options to application initialization method.
src/App.vue The main singlepage Vue component. Edit this only if know what you are doing
src/Login.vue Vue component that shows login page
src/Logout.vue Vue component that displays after a user logs out
src/PageNotFound.vue Component displayed when a page is not found