Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more! Learn more →
Top 23 JavaScript Boilerplate Projects
-
Thinking that the demo app should be practical but not overwelmed by details, its React client side would be constructed with commonly seen features, such as styling, routing, data fetching and assets loading, but at a limited cost. Meanwhile, it would be deployed on a widely accepted FaaS provider that has an easy setup. So, I'm going to use create-react-app(CRA) to initialize the demo app, enhance it, then get it deployed on Netlify with SSR added.
-
3. Node.js Hackathon Starter
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
react-boilerplate
:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
Project mention: How to structure my react project folders properly? | reddit.com/r/reactjs | 2023-01-03 -
electron-vue
An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
Address: https://github.com/SimulatedGREG/electron-vue
-
react-redux-universal-hot-example
A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform
Project mention: Is there a cleaner way of getting current URL in both client and server side in isomorphic react apps? | reddit.com/r/codehunter | 2022-04-19I am developing an app based in this React Redux boilerplate. In one component I need to get the current URL when component is mounted in order to generate a shareable URL for social media. Than component is being accesible from dynamically generated URLs with React Router. In client side I wouldn't have any problem by getting it through javascript document object but the problem lies server side.
-
react-slingshot
React + Redux starter kit / boilerplate with Babel, hot reloading, testing, linting and a working example app built in
Checkout React Styleguidist Github link by Clicking here
-
vue-enterprise-boilerplate
An ever-evolving, very opinionated architecture and dev environment for new Vue SPA projects using Vue CLI.
Clones, Boilerplates - Datlyfe/jira_clone - From Ben Hong and Chris Fritz - bencodezen/vue-enterprise-boilerplate
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
-
nwb
A toolkit for React, Preact, Inferno & vanilla JS apps, React libraries and other npm modules for the web, with no configuration (until you need it)
-
node-express-boilerplate
A boilerplate for building production-ready RESTful APIs using Node.js, Express, and Mongoose
-
react-firebase-starter
Boilerplate (seed) project for creating web apps with React.js, GraphQL.js and Relay
Let's look at React Starter Kit, which bills itself as an isomorphic web project boilerplate. Additionally, the React Starter Kit is described as, “very opinionated” on the webpage. This implies that it has already chosen our tech stack for us, which consists of Node.js, Express and GraphQL.
-
Project mention: Where do the webpack output files from the react-hot-loader go? | reddit.com/r/codehunter | 2022-05-14
Let me preface this by saying that everything I have set up works, this is just a question that's nagging me that I would love to get an answer for. I'm using the react-hot-boilerplate project (https://github.com/gaearon/react-hot-boilerplate). However, in webpack.config.js, this setting is confusing me to no end:
-
react-native-boilerplate
A React Native template for building solid applications 🐙, using JavaScript 💛 or Typescript 💙 (you choose).
I think (thecodingmachine-react-native-boilerplate) is good. Have a look.🙂
-
builderbook
Open source web application to learn JS stack: React, Material-UI, Next.js, Node.js, Express.js, Mongoose, MongoDB database.
-
react-native-starter-kit
:rocket: A React Native boilerplate app to get you up and running very, very quickly :rocket:
Project mention: What is the best boilerplate in React Native? | reddit.com/r/reactnative | 2022-05-08react-native-starter-kit https://github.com/mcnamee/react-native-starter-kit
-
-
lad
Node.js framework made by a former @expressjs TC and @koajs team member. Built for @forwardemail, @spamscanner, @breejs, @cabinjs, and @lassjs.
Another quite popular package is email-templates. As you can see from the name, this package is designed for creating various custom templates for Node.js. It features support for automatic inline CSS, stylesheets, embedded images, and fonts. Also, it has an email preview option. The email templates package was made by the creator of the Lad framework. So it’s recommended to use it with Lad.
-
-
-
Project mention: How to bundle a tree-shakable typescript library with tsup and publish with npm | dev.to | 2022-11-02
After we transpile with `tsup` all the files will be added to the bundle. Note that we are preserving folder structure under lib. ![Screen Shot 2022-09-08 at 23.40.33.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1662669755836/ce6t5YIdq.png align="left") Let's jump into to the app and locally link the library for testing. I'll use this webpack starter https://github.com/wbkd/webpack-starter ### Testing with npm link The easiest way to test your library is to register it locally with `npm link` or `yarn link`.
-
-
If you want to quickly do some small projects, maybe try Elm. You'll have code running and easy to use in no time. There's a nice tool (create-elm-app) to setup a progressive Web app, I used it to make several small applications available on my smartphone.
-
-
react-atomic-design
🔬 How the Atomic Design methodology can create a great design system from scratch and make better developers.
Project mention: The Art of Writing Ugly Code That Works, Then Beautifying It for Optimal Functionality | dev.to | 2023-02-04Once I started learning about software development best practices such as the SOLID principles, Atomic Design, abstraction and design patterns my first instinct when writing any piece of new code was to write beautiful code from the very beginning. I wanted to make sure that my code was readable, maintainable, and scalable. However, I quickly realized that this approach was not only time-consuming but also led to frustration. I was spending too much time trying to make my code look perfect, and not enough time focusing on getting the job done. This got worse when I started working on larger projects with more complex code and TypeScript, where typing can be a bit tedious for reusable components.
-
InfluxDB
Build time-series-based applications quickly and at scale.. InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2023-02-04.
JavaScript Boilerplate related posts
- Create Mini-Apps That Wow: How to build Sleek and Fast mobile apps using any JS Frameworks and Ionic Portals
- Next.js vs CRA for SPA? regarding performance and security (secret keys in env files)
- What do u need to know about purchasing a template to use in my Django project. I not good at front end yet and I wanted to get a kick start.
- Super Mario, JSX, and the destruction of the web development learning curve
- React core team on the recommended way to build with react
- browser-extension - A Out of the Box Browser Extension Template for all Browsers.
- Browser Extension Starter: 17 browsers support, Vite fast builds
-
A note from our sponsor - Appwrite
appwrite.io | 4 Feb 2023
Index
What are some of the best open-source Boilerplate projects in JavaScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | create-react-app | 98,690 |
| 2 | hackathon-starter | 33,996 |
| 3 | react-boilerplate | 28,983 |
| 4 | electron-vue | 15,173 |
| 5 | react-redux-universal-hot-example | 12,056 |
| 6 | react-slingshot | 9,776 |
| 7 | vue-enterprise-boilerplate | 7,631 |
| 8 | nwb | 5,534 |
| 9 | node-express-boilerplate | 5,065 |
| 10 | react-firebase-starter | 4,444 |
| 11 | react-hot-boilerplate | 3,929 |
| 12 | react-native-boilerplate | 3,458 |
| 13 | builderbook | 3,425 |
| 14 | react-native-starter-kit | 3,241 |
| 15 | generator-react-webpack | 2,890 |
| 16 | lad | 2,212 |
| 17 | essential-react | 2,033 |
| 18 | chrome-extension-boilerplate-react | 1,885 |
| 19 | webpack-starter | 1,883 |
| 20 | rest | 1,735 |
| 21 | create-elm-app | 1,654 |
| 22 | electron-boilerplate | 1,605 |
| 23 | react-atomic-design | 1,558 |
Build time-series-based applications quickly and at scale.
InfluxDB is the Time Series Platform where developers build real-time applications for analytics, IoT and cloud-native services. Easy to start, it is available in the cloud or on-premises.
www.influxdata.com