This is a short tutorial on how to develop a new project locally based off the DoneJS place-my-order example. The main difference being this guide is more synchronous (goes more step-by-step to build the app up) and most importantly is entirely localized, so you can start editing and building your own API and assets module, in addition to the main app.
Create a directory to hold the project, api, and any local modules:
mkdir -p ~/workspace/my-app && cd ~/workspace/my-app
Generate the project:
npm install -g donejs
donejs add app my-app
# answer dialogs
Clone the example api:
git clone https://github.com/donejs/place-my-order-api.git my-app-api
cd my-app-api
rm -rf .git
Edit the package.json in my-app-api:
{
"name": "my-app-api",
"version": "0.0.0",
"description": "",
"main": "lib/index.js",
"bin": {
"place-my-order-api": "./bin/my-app-api"
},
"scripts": {
"prepublish": "npm run compile",
"compile": "rm -rf lib/ && node_modules/.bin/babel -d lib/ src/",
"start": "PORT=3030 bin/place-my-order-api",
"publish": "git push origin --tags",
"release:patch": "npm version patch && npm publish",
"release:minor": "npm version minor && npm publish",
"release:major": "npm version major && npm publish",
"jshint": "jshint src/. test/. --config",
"mocha": "mocha test/ --recursive --compilers js:babel/register",
"test": "npm run jshint && npm run mocha"
},
"author": "",
"license": "MIT",
"devDependencies": {
"jshint": "^2.7.0",
"mocha": "^2.2.5"
},
"dependencies": {
"babel": "^5.5.3",
"body-parser": "^1.12.4",
"commander": "^2.8.1",
"feathers": "^1.3.0",
"feathers-hooks": "^0.5.0",
"feathers-nedb": "^0.1.0",
"madison": "0.0.7"
},
"system": {
"npmDependencies": []
}
}
Clone the example assets module:
cd ~/workspace/my-app
git clone https://github.com/donejs/place-my-order-assets.git my-app-assets
cd my-app-assets
rm -rf .git
Edit the package.json in my-app-assets:
{
"name": "my-app-assets",
"version": "0.0.0",
"description": "",
"main": "less/styles.less!",
"scripts": {
"release:patch": "npm version patch && npm publish",
"release:minor": "npm version minor && npm publish",
"release:major": "npm version major && npm publish"
},
"author": "",
"license": "MIT",
"system": {
"map": {
"bit-tabs/tabs.less!$less": "@empty"
}
}
}
Install local assets module into the project:
cd ~/workspace/my-app/my-app
npm install -g linklocal # more info: https://github.com/timoxley/linklocal#linking
npm install --save ../my-app-assets
linklocal # important command!
Run the api server:
cd ~/workspace/my-app/my-app-api
npm install
mv bin/place-my-order-api bin/my-app-api
./bin/my-app-api --port 7070
Edit the scripts section of the project's package.json to use the api server:
"scripts": {
"test": "testee src/test.html --browsers firefox --reporter Spec",
"start": "done-serve --proxy http://localhost:7070 --port 8080",
"develop": "done-serve --develop --proxy http://localhost:7070 --port 8080",
"document": "documentjs",
"build": "node build"
},
Edit the project's src/index.stache to can-import the assets module:
<body>
<can-import from="my-app-assets" />
Run the project's develop server in a new shell:
cd ~/workspace/my-app/my-app
donejs develop
Visit http://localhost:8080/ to see "Hello World!" with custom styling.
At the end, your directory structure should look like:
workspace
└── my-app
├── my-app
│ ├── build.js
│ ├── development.html
│ ├── documentjs.json
│ ├── node_modules
│ ├── package.json
│ ├── production.html
│ ├── readme.md
│ └── src
├── my-app-api
│ ├── LICENSE
│ ├── README.md
│ ├── bin
│ ├── db-data
│ ├── lib
│ ├── node_modules
│ ├── package.json
│ ├── src
│ └── test
└── my-app-assets
├── LICENSE
├── README.md
├── images
├── less
└── package.json