RiotJS application startkit (aka create-react-app)
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Alex Step Alex Step
Alex Step and Alex Step fix build bug, update dependencies
Latest commit 37f8016 Jun 13, 2018

README.md

⏏ create-riot-DApp

travis Code Climate npm Dependencies Join the chat at https://gitter.im/create-riot-app/

RiotJS startkit, based on create-react-app and react-scripts.

DEMO

Package included simple app example, webpack dev server with riot hot reload and less, sass, stylus support. ES6 features available too. Jest with riot support for testing. ES6 and eslint in riot tag.

Just read https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md but replace all "react" word to "riot" :)

See the video

Features

  • Automove critical css to head
  • Hot .tag reload
  • Realtime code linting
  • Async/await (ES2017).
  • Exponentiation Operator (ES2016).
  • Object Rest/Spread Properties (stage 3 proposal).
  • Dynamic import() (stage 3 proposal)
  • Jest for .tag testing
  • Generate all favicons and manifest.json
  • Pre-commit testing

⚡ Start dev-server

git clone --depth=1 https://github.com/alexstep/create-riot-dapp my-riot-dapp
cd my-riot-dapp
rm -rf .git
npm install
npm start

go to http://localhost:9999

Note

Riot route base url set in ./src/view/app.view.js line 47

✔ Testing and linting

Package included Jest, for testing riot tags. See riot tag test example

npm test
npm test -- --coverage
npm run coverage
#also
npm run eslint
npm run lesslint

read more about testing

Add flow type checker.

npm install flow-bin
npm run flow

Write in head your js files //@flow weak to enable flow checker

⚛ Favicons and meta-information

Edit "meta" section in package.json (see manifest format description) Put your app icon in ./src/favicon_source.png and run

npm run favicons

manifest.json , browserconfig.xml, favicons and other meta-files will be generated and put to ./public/static/meta/ folder.

Also you can change some options in ./scripts/config/favicons.config.js

⚗ Build for production

npm run build

Check build result

npm run check_build

☁ Deploy

npm run deploy

Publish ./build folder to IPFS by defaults.

Firebase

For example you can deploy app to firebase

npm install -g firebase-tools
firebase login
firebase init
firebase deploy

Your server

Change settings in scripts/ssh_deploy.js Add this file to .gitignore

npm i -D ssh-deploy-release

npm run ssh_deploy

About tool

Read more about deploy

⚙ Configuration options

Modify the .env file in the root of the generated project, and add any of the configuration options below 👇 to enable that feature.

The generated project comes with LESS support by default, but you can add SASS or Stylus at any time by edit the options from the .env file.

Styling

  • enable_less=true - enable LESS support
  • enable_sass=true - enable SASS support
  • enable_stylus=true - enable Stylus support

Others

  • HTTPS=true - enable https in localhost
  • PORT=9999 - change port
  • OPEN_BROWSER=false - don't open browser after running webpack server

Read more about .env files

Tabs or Spaces?

You can change codestyle rules in .eslintrc.js and run npm run eslint_fix for format all files

☺ Contribute

Fork and send pull-request. Thank you!