Search code examples
javascriptecmascript-6boilerplate

Javascript Boilerplate Template for scaffolding projects


Is there a recommended way to create consistent project boilerplates when working with modern JavaScript tools?

Currently for my work, new projects will require some combination of:

  • Webpack
  • Babel (ES Next)
  • ESLint
  • Typescript
  • Vue/React (framework)
  • Framework Router + Redux/Vuex Framework
  • Testing framework

These have taken some effort to become familiar with the configurations and get them working together.

Now, I have a git repo for each configuration that can be cloned for a project, like webpack-babel-eslint, webpack-babel-eslint-typescript, webpack-babel-eslint-typescript-vue, etc.

This solves the problem of initializing projects quickly, but requires making an adjustment to the webpack configuration (for example) in each repos configuration when a change happens, instead of adjusting the base webpack configuration in one location and having it be shared.

I've seen tools like Yeomon, but I very much sympathize with the feeling of it being 'yet another tool' in an already intimidating landscape. I've also seen the monorepo structure of Lerna look like it could be used to keep all of these repos isolated, but this makes sense to me more for traditional packages and not for boilerplate assets.

Is there a way to maintain our projects configurations in a robust, editable way that allows for quick prototyping, like the Create React App or the Vue-Cli?


Solution

  • Is there a recommended way to create consistent project boilerplates when working with modern JavaScript tools?

    Yes There is a consistent boilerplate builder, it's called Yeoman, usually people use it to make projects consistent in their organisation, or in projects that have quite a lot of scaffolding use cases into them.

    The problem with this, and something you addressed in the last part of your question, is the "one of" scaffoldings. When used in an open source community, the Scaffoldings need to serve a purpose and have visibility otherwise, they won't be just anything else but a grain in the desert.

    Things like create-react-app vue cli or the angular cli are there and exist because they serve a very good purpose and also, because they have the support of the community and the visibility

    So, if the scaffolding is for your work, or set of tools for your projects with friends, go ahead and use Yeoman, but keep in mind that, unless you are making new projects every other day, this will be more work than benefits.

    If you are just doing it "for the community" don't even bother, CreateReactApp, angular/cli, and vue/cli are more than enough, unless there is a git issue with 1000 upvotes, and you will solve the issue by adding this tool