Skip to content

Latest commit

 

History

History
162 lines (139 loc) · 5.9 KB

README.md

File metadata and controls

162 lines (139 loc) · 5.9 KB

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

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
│
│
├── sass                     # SASS STYLE
│   ├── dev                  # WIP style for development
│   │   └── shame.sass       # WIP style or dirty hacks
│   │
│   ├── fonts                # Fonts style
│   │   ├── _all.sass        # File used to import all fonts-related style
│   │   └── roboto.sass      # @font-face style for Roboto
│   │
│   └── utilities            # Utilities
│       ├── mixins.sass      # Mixins available in all .vue and .sass files
│       ├── transitions.sass # Vue.js transitions imported in app.vue
│       └── variables.sass   # Variables 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
│
│
├── .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

🤜🤛 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.