1.1.0 ā¢ Published 5 years ago
frontendious-cli v1.1.0
ā” frontendious-cli ā”
CLI tool that generates boilerplate for starting modern webapps|sites. Powered by webpack and npm scripts.
What's in the š¦ ?
- š„ webpack, webpack-dev-server (config splitted into webpack.dev and webpack.prod)
- šŖ babel (env presset, object-rest-spread plugin)
- š¦ scss support, postcss autoprefix, normalize.css included
- š¼ļø image support (png|jpg|gif|svg)
- š prettier configured
- ā” connected with express(node.js) optional
- āļø react support optional
Usage
npm install frontendious-cli -g # install frontendious globally
frontendious <dir_name> # generate basic boilerplate
# or
frontendious <dir_name> -s # generate basic boilerplate with express server support
# or
frontendious <dir_name> -r # generate basic boilerplate with react support
# you can also combine commands like this
frontendious <dir_name> -s -r
# to see help send -h option
frontendious -h
Build Setup
# generate project
frontendious <dir_name> [...options]
# install server-side depenedcies
cd <dir_name>/server
yarn install
# start server at localhost:3001, configurable at server/index.js
yarn start
# go back to <dir_name>
# install client-side dependencies
yarn install
# serve with hot reload at localhost:3000, configurable at webpack.dev.js
yarn dev
# build for production @ dist/ folder
yarn build
Project structure
server/
|-- api/ # place api files here
|-- index.js # express server
|-- package.json # server dependencies
|-- yarn.lock # lock file for server libs
src/
|-- assets/ # place images here
|-- js/ # place javascript here
|-- scss/ # place scss here
|-- index.html # root index.html page
.babelrc # babel config
.prettierrc # prettier config
.gitignore
package.json # client dependencies
postcss.config.js # postcss config
README.md
webpack.common.js # webpack common config
webpack.dev.js # webpack development config
webpack.prod.js # webpack production config
yarn.lock # lock file for client libs
Tips & Tricks
ā¹ļø There is a proxy configured inside webpack.dev.js, i.e. all localhost:3000/api/ requests will be proxied to loclhost:3001/api/ where express server is listening.
āļø If you want to use background: url()
inside *.scss
file, always create
path relative to scss folder, even if the current .scss file is, for example,
inside modules/
folder.
/* current location: scss/modules/_somefile.scss */
background: url('../assets/mypicture.png'); š
background: url('../../assets/mypicture.png'); š
css-loader will ignore path starting with /, to prevent that behaviour add option "root: '.'"