UNPKG

3.71 kBMarkdownView Raw
1## Making a simple app in EdenJS
2
3- Follow the instructions on GitHub to install
4- Copy the `config.example.js` to `config.js` and make sure you change the `config.domain` to match the domain (in my case, it's `localhost`)
5- Run `gulp` (EdenJS will automatically refresh when you change your code!)
6- Go to `http://localhost:1337/` and you should see a welcome page!
7
8In EdenJS, everything is done inside a `bundle` as seen in `/lib/bundles` and the reasoning behind this is you can reuse your bundles in each project you do to quicken development time.
9
10To get started, let's copy `/lib/bundles/example/` to `/app/bundles/myexample`. Once this is copied, go through and change all the file names from `example` to `myexample` then update all the instances inside the files.
11
12i.e. `class example extends controller ` becomes `class myexample extends controller`
13
14Once that's all done, we'll need to make our first route so people can interact with the `myexample` bundle.
15
16Open up `/app/bundles/myexample/controllers/test.js` and add your new binding method into the constructor:
17
18```javascript
19 constructor () {
20 // run super
21 super ();
22 // bind methods
23 this.indexAction = this.indexAction.bind (this);
24 }
25```
26
27Now you can add your new method called `indexAction` below:
28
29```javascript
30 /**
31 * index action
32 *
33 * @param req
34 * @param res
35 *
36 * @name MyExample
37 * @route {get} /myexample
38 * @menu {MAIN} MyExample
39 * @priority 1
40 */
41 async indexAction (req, res) {
42 res.render ('myexample');
43 }
44```
45
46Notice in the comments for this method we have `@name`, `@route` and `@menu`? Those are our descriptors for our new method. It means that if someone were to go to `http://localhost:1337/myexample` then it will fire this method and also show the menu item for us all automatically.
47
48Let's add something into the database now.
49
50Make a new method (don't forget to bind it inside the constructor) and make it fire whenever someone visits `http://localhost:1337/mytest`.
51
52Inside this method, we'll add some data to our database. (If you want a GUI to help you see what the database is doing, download `Robo3T`).
53
54```javascript
55const cars = model('myexample');
56
57/**
58 * build myexample controller
59 */
60async testAction(req, res) {
61 let Car = new cars({
62 name: 'Holden Commodore',
63 color: 'Blue',
64 price: '50,0000',
65 seller: {
66 name: 'Alex Taylor',
67 email: 'alex@edenjs.com'
68 }
69 });
70
71 await Car.save();
72
73 res.render('myexample');
74}
75```
76
77Now go to `http://localhost:1337/mytest` and you should see the `Hello World`. Now open Robo3T and check the `Cars` collection, and you'll see it.
78
79Congratulations. You've just built your first model. Now we need to work with it.
80
81Make another method and in this one we can do:
82
83```javascript
84async anotherTestAction(req, res) {
85 let car = await Promise.all(await cars.find()).map ((Car) => Car.sanitise()));
86 console.log(car);
87
88 res.render('home')
89}
90```
91
92
93
94Save your changes, and watch the console. You should receive an error like: `TypeError: Car.sanitise is not a function` - that's what we were after.
95
96Now we need to make a sanitise function in our model. Open up `/app/bundles/myexamplemodels/myexample.js` and add:
97
98```javascript
99 /**
100 * sanitises car
101 *
102 * @return {*}
103 */
104 async sanitise () {
105
106 let sanitised = {
107 'name': this.get ('name'),
108 'seller': this.get ('seller'),
109 };
110
111 // return sanitised
112 return sanitised;
113 }
114```
115
116
117
118Save your changes, watch the console while EdenJS finishes reloading then go to your page. You'll see both the name and seller inside a JSON object. Successfully pulled from the database!
119
120
121
122
123