Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/erdiucar/frontend-starter-pack
This pack allows you to start a frontend project quickly.
https://github.com/erdiucar/frontend-starter-pack
Last synced: 3 months ago
JSON representation
This pack allows you to start a frontend project quickly.
- Host: GitHub
- URL: https://github.com/erdiucar/frontend-starter-pack
- Owner: erdiucar
- License: mit
- Created: 2019-04-19T16:57:52.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-23T18:57:02.000Z (almost 6 years ago)
- Last Synced: 2024-08-01T19:55:40.778Z (6 months ago)
- Language: Shell
- Homepage:
- Size: 454 KB
- Stars: 10
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome - erdiucar/frontend-starter-pack - This pack allows you to start a frontend project quickly. (Shell)
README
# Frontend Starter Pack
Preparing project files and downloading packages takes a lot of time. This starter pack allows you to start a frontend project quickly.
## Getting started
1. If you don't have [Bash](https://git-scm.com/downloads) and [Node.js](https://nodejs.org/en/) in your computer, install them.
2. Navigate your app directory.
```sh
cd app-directory
```
3. Run this command in the app-directory.
```sh
exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/erdiucar/frontend-starter-pack/master/frontend-starter-pack.sh 2> /dev/null)
```
## Packages
- [JQuery](https://jquery.com/)
- [Bootstrap](https://getbootstrap.com/)
- [Popper.js](https://popper.js.org/)
- [Font Awesome](https://fontawesome.com/) (Optional)
- [Gulp](https://gulpjs.com/) and plugins
- [Sass](https://sass-lang.com/)
- [ESLint](https://eslint.org/) and plugins (Airbnb React JavaScript style)
- [Prettier](https://prettier.io/) and plugins (Airbnb React JavaScript style)
## What happens in the background
1. The script builds project folders and files (dist-img-font-css-js folders, gitignore file, css files, js files, gulp file, eslintrc.json and prettierrc.json file, index.html file, scss files).
2. The script installs Git, Default Npm, JQuery, Popper.js, Bootstrap, Font Awesome, ESLint & Prettier, Airbnb's JavaScript style guide packages, Prettier's Eslint and Gulp packages.
## How it works
When you run the command, bash script works. It downloads the packages and configure the project folder to start to work. When the package downloads are finished, `gulp serve` command runs. The pack configures css and js paths in the index.html file. You can immediately start your project!
## Commands
### Serve
Gulp helps you to minify css and js files. When you type the `gulp serve` in your command line, Gulp starts to watch **scss** folder and **main.js** file. If you save the project when *serve* command running, Gulp sees your changes on the files and minifies all of that.
```sh
gulp serve
```
### Build
When your production is finished, you can type `gulp build` command. It creates the "dist" files in the dist folder (.html files, style.min.css file, app.min.js file, img folder, font folder and libraries).
```sh
gulp build
```
## ESLint and Prettier configuration settings
I use the default configuration settings prepared by Paulo Ramos. I only add "JQuery" to "env settings" and add the "no-console: off" rule to ".eslintrc.json" file. You can review the settings from his [project](https://github.com/paulolramos/eslint-prettier-airbnb-react).
## License
[MIT](LICENSE)
---
This script was inspired by Paulo Ramos's [script](https://github.com/paulolramos/eslint-prettier-airbnb-react).