Single page application starter is a starter template for single page applications (SPA).
Stack: Babel, minireset.css, Pug, Sass, Vue.js, Vue Router, Webpack.

---

📝 Table of contents

• Prerequisites
• Commands
• Project structure
• Constant per environment
• Cache busting
• Authors
• Contributing
• License

---

⚙️ Prerequisites

• asdf
• Make
• Node.js
• Yarn

⌨️ Commands

Serve

# Serve site at 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
│   │   └── .gitkeep               # Tracking an empty directory within Git
│   │
│   └── images                     # Image assets
│       └── unicorn.jpg            # Sample image
│
│
├── sass                           # SASS STYLE
│   ├── dev                        # WIP style for development
│   │   └── shame.sass             # WIP style or dirty hacks
│   │
│   └── utilities                  # Utilities
│       ├── initial-variables.sass # Variables available in all .vue and .sass files
│       ├── mixins.sass            # Mixins available in all .vue and .sass files
│       └── transitions.sass       # Vue.js transitions imported in app.vue
│
│
├── 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
│
│
├── .babelrc                       # Presets and plugins to use, used by Babel
├── .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-header.gif              # README header image
├── README.md                      # Project documentation
└── yarn.lock                      # Tracking exact versions for JavaScript dependencies, used by Yarn

⚙️ Constant per environment

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

Step 1: Set the constant name and default value 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

• @Awea - Idea and initial work
• @mmaayylliiss - Design, code/documentation review

🤜🤛 Contributing

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

📄 License

Single page application starter is licensed under the GNU General Public License v3.0.