Boilerplate charecteristics

Necessary characteristics of boilerplate for large projects.

Good and Readable Documentation
Code structure with a deeper abstraction level
Follows Proper Coding Standard
Has CLI tool (for rapid prototyping and setup)
Scalable ?
Easy testing tools
Necessary API modules
Support for Internationalization and Localization ?
Code Splitting
Server and Client code for setup
Proper Navigation and Routing Structure ?

Very good example for this would be react.js’s boilerplate:

A highly scalable, offline-first foundation with the best developer experience and a focus. react-boilerplate/react-boilerplate

Git repository

Git is a type of version control system (VCS) that makes it easier to track changes to files. For example, when you edit a file, git can help you determine exactly what changed, who changed it, and why.

It’s useful for coordinating work among multiple people on a project, and for tracking progress over time by saving “checkpoints”. You could use it while writing an essay, or to track changes to artwork and design files.

Git isn’t the only version control system out there, but it’s by far the most popular. Many software developers use git daily, and understanding how to use it can give a major boost to your resume.

Git is a version control system
Powerful tool to help you manage your work
- Not only does it keep track of the latest version of your file, but every version, which can be extremely useful when you need to change back to a previous state.
But why?
- The libraries and tools on your stack get updated
- You will need to update your boilerplate
- Also manage the boilerplate of your older projects

New to git and GitLab?

You might be interested in the GitLab course by Karo Saharinen.

You can find the course from: https://gitlab.labranet.jamk.fi/sahka/gitlab-opintojakso (in finnish only)

Readme

A README is a text file that introduces and explains a project. It contains information that is commonly required to understand what the project is about.

It's an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you.

Instructions are usually quite useful

Not only for you. But for everyone else as well.

Folder structure

That said there are a few common popular approaches you may want to consider.

If you’re just starting a project, don’t spend more than five minutes on choosing a file structure.
If you feel completely stuck, start by keeping all files in a single folder. Eventually it will grow large enough that you will want to separate some files from the rest

Grouping by features or routes

One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route.

Grouping by file type

Another popular way to structure projects is to group similar files together, for example:

As projects grow larger, they often use a mix of both of the approaches in practice. So choosing the “right” one in the beginning isn’t very important.

.gitignore

A local .gitignore file is usually placed in the root directory of a project. You can also create a global .gitignore file and any entries in that file will be ignored in all of your Git repositories.

To create a local .gitignore file, create a text file and name it .gitignore (remember to include the . at the beginning). Then edit this file as needed. Each new line should list an additional file or folder that you want Git to ignore.

Once we build our project, there will be a few auto-generated files and folders. Let’s tell Git to ignore some of those files that we can think of ahead of time.

# Node
node_modules/

# Project
dist/

Npm (package.json)

The purpose of using package.json — this is a meta-file that contains information about your project such as its name, version etc. but also contains a list of 3rd party libraries and their configuration.

It generally contains:

A description of your project for NPM
List of references to all installed packages
Custom command line scripts
Configuration for installed packages

{
    "name": "react-boilerplate",
    "version": "1.0.0",
    "description": "Basic React Boilerplate",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/theoutlander/react-boilerplate.git"
    },
    "keywords": [
        "Node",
        "React"
    ],
    "author": "Nick Karnik",
    "license": "Apache-2.0",
    "bugs": {
        "url": "https://github.com/theoutlander/react-boilerplate/issues"
    },
    "homepage": "https://github.com/theoutlander/react-boilerplate#readme"
}

Boilerplate charecteristics

Contents