A Realtime TODO App with Aurelia, Socket.IO, Node.js, Koa and RethinkDB.
A summary of tech stack:
- Client: Aurelia, Bootstrap 4, Font-Awesome and Aurelia-Bootstrap-Plugins ...my own creation 😄.
- Server: Koa 2 for RESTful API serving on Node.js.
- Socket.IO along with JSON-RPC is used for real-time client-server communication and browser sync.
- RethinkDB as the best open-source database for the realtime web.
- TypeScript is used for both Aurelia & NodeJS sides
Make sure to have Node.js v8.x or higher, and RethinkDB v2.3.x or higher installed on your computer.
git clone https://github.com/ghiscoding/Realtime-TODO-Aurelia-Auth-RethinkDBWe will use Aurelia-Auth for OAuth login so that we can use (Google, Facebook, GitHub, LinkedIn, Windows Live or Twitter) to login to our application. The configuration of the OAuth secret keys will be under server/config/config.development.js, this file is however excluded from the project (for obvious reason).
A very important step to do, go under the folder /server/config and rename the file from config.development.template.js to config.development.js and then fill in your OAuth secret keys.
The Aurelia-Authis based on Satellizer and uses the same configurations, so you could refer to their GitHub Satellizer repo for more details.
We are using RethinkDB as our favorite NoSQL DB Server, you can use the default port of 28015.
Also make sure to create a test database (if not yet created) with the following tables (todos, users, customers).
Please note that the TypeScript Webpack with the command line npm start will ONLY run the WebUI (Aurelia).
If you want to run both the frontend/backend (WebUI w/Aurelia + WebAPI w/NodeJS), you can do so by calling npm start -- withBackend (make sure to follow the Server installation prior to launching this command).
cd Realtime-TODO-Aurelia-Auth-RethinkDB
npm install # or: yarn install
npm start withBackend # or: yarn start withBackendIf you use VSCode (Visual Studio Code) as your main editor, you can simply load the folder. Once loaded, you can then click on Tasks and then have access to multiple tasks (defined in .vscode/tasks.json) which makes it easy to execute the code without even typing any command in the shell (starting any of the Task Starting X task(s) will also run npm install or yarn install prior to run).
You can change the Default Packager to your liking by editing the config.js file with the packager you wish to use
// config.js
module.exports = {
webUiPort: 4000,
webApiPort: 5000,
packager: 'yarn' // you can use 'npm or 'yarn'
}Optional, see the note below
cd Realtime-TODO-Aurelia-Auth-RethinkDB/server
npm install # or: yarn install
npm start # or: yarn startNote: running the server here is totally optional, since you might have already started it with the backend flag with CLI client or withBackend to run both servers.
If everything goes well, your application should now run locally on port 4000. Open your browser and go to the URL http://localhost:4000.
Server configurations are specified in the /server/config directory. When running npm start it will load the configuration that is defined in your process.env.NODE_ENV (environment variable, if unset it will use development by default).
Default ports for this application are 4000 for the WebUI and 5000 for the API (server) calls.
You can change these ports by going into the config.js that is located in the root of the project.
Please note that the webpack.config.js and package-scripts.js were modifed to use the config.js to make it easier to configure.
Contributions are welcome. I use this project as a placeholder to help (and be helped by) people, which is all about the open community. So please feel free to make any PR (Pull Request).
MIT