Requirements

nodejs 10
and optionaly docker-compose, for deploy to ipfs

⚡ Start dev-server

git clone --depth=1 https://github.com/alexstep/create-riot-dapp my-riot-app
cd my-riot-app
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

⚛ Favicons and meta-information

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

npm run meta:generate

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/tools/metainfo/config.js

⚗ Build for production

npm run build

Check build result

npm run check_build

☁ Deploy

Firebase

npm run deploy

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/tools/deploy_ssh
Add this file to .gitignore

npm run deploy:ssh

About tool

IPFS

npm run deploy:ipfs

Publish ./dist folder to IPFS by defaults.
Need insatlled docker-composes/tools/deploy_ipfs/docker-compose.yml

⚙ 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.

⏏ create-riot-DApp

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" :)

Features

• 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

Requirements

nodejs 10
and optionaly docker-compose, for deploy to ipfs

⚡ 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.svg or .png or other image format
and run

npm run meta:generate

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/tools/metainfo/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.
Need insatlled docker-compose
See scripts/tools/deploy_ipfs/docker-compose.yml

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/tools/deploy_ssh
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

Troubleshoot

If you have some error on macos

npm test

Error: EMFILE: too many open files, watch
Emitted 'error' event at:
npm ERR! Test failed.  See above for more details.

try to run npm run macos_fixes

In the next versions i plan to add libraries for working with Ethereum, IPFS and to focus on the development of startkit for DApps.

Summary

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" :)

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

Download this release

wget -qO- https://github.com/alexstep/create-riot-dapp/archive/1.0.tar.gz | tar xvz -C ./
cd create-riot-dapp-1.0

or clone release branch

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

Install dependencies and start dev.

npm install

Start dev server

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