Skip to content
/ spa-starter Public template

πŸ“¦ A starter template for single page applications (SPA)

License

Notifications You must be signed in to change notification settings

wearemd/spa-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SPA starter is a starter template for single page applications.
Stack: esbuild, minireset.css, Pug, Sass, Vue.js, Vue Router, Webpack.


πŸ“ Table of contents


βš™οΈ Prerequisites

⌨️ Commands

Serve

## Serve site at http://localhost:3000 with hot reloading

make

πŸ’‘ This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Build

## Build site for production use

make build

πŸ’‘ This command will also install dependencies on first run and when package.json or yarn.lock files are updated.

Help

## List available commands

make help

πŸ—„οΈ Project structure

.
β”œβ”€β”€ assets                   # ASSETS
β”‚   β”œβ”€β”€ fonts                # Font assets
β”‚   β”‚   └── roboto           # Roboto from Google Fonts (TTF, WOFF, WOFF2)
β”‚   β”‚
β”‚   └── images               # Image assets
β”‚       β”œβ”€β”€ favicon.ico      # Favicon (placeholder by default)
β”‚       └── unicorn.jpg      # Sample image
β”‚
β”‚
β”œβ”€β”€ documentation-images     # PROJECT DOCUMENTATION IMAGES
β”‚
β”‚
β”œβ”€β”€ sass                     # SASS STYLE
β”‚   β”œβ”€β”€ base                 # Base style
β”‚   β”‚   β”œβ”€β”€ _all.sass        # Importing all stylesheets
β”‚   β”‚   β”œβ”€β”€ generic.sass     # Style for generic elements (html, body, etc.)
β”‚   β”‚   └── helpers.sass     # Helper classes (modifiers)
β”‚   β”‚
β”‚   β”œβ”€β”€ dev                  # Development utilities
β”‚   β”‚   β”œβ”€β”€ shame.sass       # WIP style or dirty hacks
β”‚   β”‚   └── structure.sass   # Highlighting site structure (import commented by default)
β”‚   β”‚
β”‚   β”œβ”€β”€ fonts                # Fonts style
β”‚   β”‚   β”œβ”€β”€ _all.sass        # Importing all stylesheets
β”‚   β”‚   └── roboto.sass      # @font-face style for Roboto
β”‚   β”‚
β”‚   β”œβ”€β”€ layout               # Layout style
β”‚   β”‚   β”œβ”€β”€ _all.sass        # Importing all stylesheets
β”‚   β”‚   └── layout.sass      # Very light starter style for structure elements and titles
β”‚   β”‚
β”‚   └── utilities            # Utilities
β”‚       β”œβ”€β”€ animations.sass  # Some basic animations
β”‚       β”œβ”€β”€ mixins.sass      # A few useful mixins (available in all .vue and .sass files)
β”‚       β”œβ”€β”€ transitions.sass # Vue.js transitions (imported in app.vue)
β”‚       └── variables.sass   # Variables for colors, typography, etc. (available in all .vue
|                            # and .sass files)
β”‚
β”‚
β”œβ”€β”€ src                      # VUE.JS/JAVASCRIPT SOURCE FILES
β”‚   β”œβ”€β”€ pages                # Pages
β”‚   β”‚   β”œβ”€β”€ index.vue        # Home page
β”‚   β”‚   └── page.vue         # Sample page
β”‚   β”‚
β”‚   β”œβ”€β”€ router               # Router
β”‚   β”‚   └── index.js         # Vue.js router configuration and initialization
β”‚   β”‚
β”‚   β”œβ”€β”€ app.js               # Vue.js application configuration and initialization
β”‚   β”œβ”€β”€ app.vue              # Main Vue.js component
β”‚   └── index.html           # HTML index used to render the website
β”‚
β”‚
β”œβ”€β”€ webpack                  # WEBPACK CONFIGURATION PER ENVIRONMENT AND UTILITIES
β”‚   β”œβ”€β”€ common.js            # Shared between development and production environments
β”‚   β”œβ”€β”€ dev.js               # Development environment
β”‚   β”œβ”€β”€ prod.js              # Production environment
β”‚   └── utils.js             # Utilities to create a new environment easily
β”‚
β”‚
β”œβ”€β”€ .gitignore               # Files and folders ignored by Git
β”œβ”€β”€ .tool-versions           # Which version to use locally for each language, used by asdf
β”œβ”€β”€ LICENSE                  # License
β”œβ”€β”€ Makefile                 # Commands for this project
β”œβ”€β”€ package.json             # JavaScript dependencies, used by Yarn
β”œβ”€β”€ README.md                # Project documentation
└── yarn.lock                # Tracking exact versions for JavaScript dependencies, used by Yarn

πŸ–₯ Layout structure

The starter comes with a simple layout, structured like the following:

// Wrapper
.wrapper
  // Header
  header.header
    .container
      …

  // Main
  main.main
    // Section (repeatable)
    section.section
      .container
        …

  // Footer
  footer.footer
    .container
      …

Highlighting site structure

There is also a Sass utility allowing to highlight the site structure (pretty useful in development). Simply uncomment @import "dev/structure.sass" in app.vue if you want to use it.

βš™οΈ Constant per environment

Follow these steps if you want to define a constant that can change based on Webpack environment.

Step 1: Declare the constant in package.json (usually for development environment):

"configuration": {
  "definePlugin": {
    "SOME_CONST": "Hello there"
  }
}

Step 2: Override the constant by editing the related webpack/[env].js file:

utils.definePlugin({
  SOME_CONST: "Hello from production"
})

Now you can use this constant in every .vue/.js file inside src and it will change depending on Webpack environment.

🍱 Cache busting

Our strategy for cache busting is to automatically append a .[generated-hash] to each asset file name. You can read more about caching in Webpack documentation.

✍️ Authors

πŸ€œπŸ€› Contributing

Contributions, issues and feature requests are welcome! See the list of contributors who participated in this project.

πŸ“„ License

SPA starter is licensed under the GNU General Public License v3.0.