Create Project Boilerplate
Project boilerplate for a modern ES6+ cross-browser compatible workflow with no build configuration.
- Check npm version – How to check npm version.
- Creating a boilerplate – How to set up a project boilerplate.
- Usage – How to use the boilerplate to develop modern web apps.
Create Project Boilerplate works on macOS, Windows, and Linux.
mkdir my-dir cd my-dir npx create-project-boilerplate npm start
Then open http://localhost:3000/ to see your app. When you’re ready to deploy to production, the dist folder can be deployed to the server.
Get Started Immediately
Comes with the following tools and libraries. You don’t need to install or configure anything.
- Helper libraries/frameworks: Alpine.js, Tailwindcss
- Module bundlers: Parcel
- Transcompilers: Babel
- Preprocessors: SASS
- Autoprefixers: PostCSS
- Icon libraries: Fontawesome
- Linting tools: ESLint
- Testing libraries: Jest, DOM Testing Library
Create a project, and you’re good to go.
Comes with the following libraries and utilities
- No build configuration. dist folder is rebuilt everytime you make changes in src folder
- Cross-browser compatible code using Babel
- Integrated Fontawesome support using CDN
- Support for CSS Modules using Parcel
- Support for autoprefixers using PostCSS
- Hot Module Reload(HMR) and support for ES Modules using Parcel
- Built-in Alpine.js, SASS & tailwindcss support to help you write industry-level code
- Comes with testing libraries - Jest & DOM Testing Library
Check npm version
To check npm version, type the following command in the terminal:
As long as it is 5.2 or later, you're good to go!
Creating a boilerplate
You’ll need to have npm 5.2 or later version. We recommend using the latest LTS version of node.
To know more, refer to the usage section.
- Create a working directory
- Navigate to that directory in the terminal
- Run the following command to create the project structure
Inside the working directory, it will generate the following project structure and install and configure all the required dependencies
my-dir ├── node_modules ├── package.json ├── package-lock.json ├── tailwind.config.js ├── .parcel-cache ├── .babelrc ├── .postcssrc ├── .gitignore ├── dist │ ├── # bundled css and js files │ └── index.html └── src ├── scripts │ └── main.js ├── styles │ ├── base.css │ ├── index.css │ └── main.css └── index.html
- Once the setup is finished, run the following command to start the server
This will build and start the server at http://localhost:3000 by default. It will rebuild your website/app everytime you make changes in the src folder. Once the website/app is production ready, the dist folder can be deployed to the server.
- To run tests using Jest
To stop the server press CTRL + C (CMD + C for Mac/Linux)
To restart the server
This will open the page on a new tab in the browser. The port number can be changed to any port of your choice in the package.json file.