A NodeJS built application with express, express handelbars, node-fetch, bootstrap carousel for fetching a fake REST API into a JSON Object, then displaying it in a responsive carousel. Live deployed demo here.
Reponsitivity test result: Here.
- This guide is dissected into two sections:
- How to install/run the app
- File structure
- The app is built on Node.jS, so to be able to run it you must have Node.JS and NPM. If you already have it on your system proceed to step(3).
- Visit Node.JS, then download your OS installer and run it.
- Now you should have both NodeJS and NPM installed on your system.
elrakabawi$ node --version && npm --version
- clone the project:
git clone https://github.com/ElRakabawi/node-fetch-app.git
Then, access the directory withcd node-fetch-app
- Run
npm install
in your command, then runnpm start
. This will run this commands:
elrakabawi$ npm start
> node-fetch-app@1.0.0 start Desktop/node-fetch-app
> node index.js
listening at localhost:3000
Now, it's all up and running. Open your browser and visit localhost:3000. You should expect something like the online delpoyed heroku app here https://node-fetch-app.herokuapp.com/.
node-fetch-app
│
│─── README.md
│─── package.json
│─── index.js
│
└───public
│ └─── stylesheet
| | |
| | └─── style.css
│ │
| └─── js
| |
| └─── core-interface.js
│
|───views
| │───home.handelbars
| │
| └─── layouts
| └───main.handelbars
|
└─── node_modules
index.js: Where fetching happens using node-fetch, JSON strigified then parsed and server is created with express.
core-interface.js: Enhancer for behaviour and look of the bootstrap carousel.
home.handlebars: Contains home view, handled by express-handelbars to generate HTML sections from parsed JSON object.
main.handlebars: Contains main HTML Layout.
Waving goes to Motoon.org, I enjoyed the task.