https://github.com/noviel/modern-frontend-starter
Modern frontend development environment with maximum comfort
https://github.com/noviel/modern-frontend-starter
Last synced: about 1 month ago
JSON representation
Modern frontend development environment with maximum comfort
- Host: GitHub
- URL: https://github.com/noviel/modern-frontend-starter
- Owner: Noviel
- License: mit
- Created: 2018-03-19T09:05:49.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-05T15:09:12.000Z (over 8 years ago)
- Last Synced: 2025-03-30T00:25:59.309Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 392 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Modern Frontend Starter
MFS is a minimalistic modern development environment for frontend.
- 10/10 developer experience
- Start hacking in a blink of an eye
- Easily extendable
- No tedious tools configuration
- Easily configurable if you want to
- Use SVG, pictures, fonts, whatever you want
- Full-featured React support of course!
## Let me start please
Copy paste these lines into your terminal, ok?
```sh
git clone https://github.com/Noviel/modern-frontend-starter
cd modern-frontend-starter
git remote rm origin
yarn install
yarn dev
```
### NPM scripts
`yarn dev` - launch hot-reloading webpack-dev-server
`yarn build` - build assets for production
`yarn serve` - serve locally built assets
## Tell me the details
- `eslint` and `prettier` = linting and formatting
- `webpack` and stuff = building, bundling and stuff
Go to `webpack.config.js` in the root directory. You can see that MFS is powered by [webpack-features](https://github.com/Noviel/webpack-features). So check it out if you wanna some tweaks on webpack's config. You can easily turn on support of React, Flow, TypeScript, Scss, less and other cool stuff.
## I am really wanna React, TypeScript, Scss, less and other cool stuff
Ok, i see you. This project is a boilerplate, not CLI-tool (for now at least), so time to dirty your hands. You need to manually add corresponding option to `webpack.config.js` and sometimes install additional packages.
### React
```sh
yarn add react react-dom
```
webpack.config.js:
```javascript
const { react } = require('webpack-features');
module.exports = react();
```
### CSS Modules
Is enabled by default for `*.modules.{css|scss|less}` files.
### Flow
```sh
yarn add flow-bin --dev
```
webpack.config.js:
```javascript
const { base } = require('webpack-features');
module.exports = base({
types: 'flow',
});
```
### TypeScript
```sh
yarn add typescript --dev
```
webpack.config.js:
```javascript
const { base } = require('webpack-features');
module.exports = base({
types: 'typescript',
});
```
### Scss
```sh
yarn add node-sass sass-loader --dev
```
webpack.config.js:
```javascript
const { base } = require('webpack-features');
module.exports = base({
cssPreprocessors: ['scss'],
});
```
### less
```sh
yarn add less less-loader --dev
```
webpack.config.js:
```javascript
const { base } = require('webpack-features');
module.exports = base({
cssPreprocessors: ['less'],
});
```
### Other stuff
Checkout [webpack-features](https://github.com/Noviel/webpack-features) documentation. You can easily extend configuration with whatever you want.