Create a Project from Scratch#

Creating a new project in Erstwhile Framework is pretty simple.

# create a new directory for your project
mkdir myproject

# enter it
cd myproject

# initialize npm
npm init

# add the erstwhile framework
npm install --save erstwhile

# run the erstwhile init script to create a new project
npx erstwhile init MyProject

That’s it!

From this point you can start the dev server with the following command:

# start dev server
npm run start

You can view your application by going to http://localhost:8080.

Install the Todos Test Application#

The easiest way to learn Erstwhile Framework is through looking at a working application. For this reason, we created a simple todo list application called Todos. This application consists of both a frontend using the framework and a simple backend built using the server-side module of the framework. The server-side portion requires a PostgreSQL database.

Backend Install#

First let’s get the backend from Github and get it installed:

# clone application into directory
git clone git@github.com:RestlessDev/todos_application_backend.git todos_backend

# enter the directory
cd todos_backend

# npm install
npm install

# copy the .env template
cp .env.template .env

A this point you’ll need to go to your PostgreSQL tool of choice; we recommend the PGAdmin.

You’ll need to complete the following steps:

  1. Create a new database. We call ours todos.
  2. Create a new user with all the permissions on that new database. We call ours todos_user. Choose a good password for this user.
  3. Run the script located in <projectroot>/sql/todos.sql to create the tables.

Now you’ll need to update the .env file you just created with your new database parameters.

# database
RESTPGORM_DB_HOST=<your host name>
RESTPGORM_DB_PORT=5432
RESTPGORM_DB_USERNAME=<your user name>
RESTPGORM_DB_PASSWORD=<your password>
RESTPGORM_DB_NAME=<your database name>

If this has all worked successfully, you should be able to launch the server with the following command:

# start server
npm run start

The server will be running at port 8022 by default.

Frontend Install#

Installing the frontend is more straightfoward.

# get the code from github
git clone git@github.com:RestlessDev/todos_application.git todos_frontend

# enter the directory
cd todos_frontend

# npm install
npm install

# start the dev server
npm run start

Please note that if you’ve got the server listening on a different port that 8022 you’ll need to update the entry in /config/app.js to reflect that.

Navigating Around the App#

Todos is a very basic application that allows users to record tasks that they need to complete, assign them due dates and color codes, display them on a calendar, and record when they have been completed.

Once both the backend and frontend servers are running, you can access the application by going to http://localhost:8080.

Login/Signup

When first visiting the application, you are redirected to the /login page:

Since you don’t initially have an account, you can create one from the link under the form. This will send you to the /signup page:

Please enter any details you would like to create your account; please note that it is saving everything to your local database and no emails are sent from this application.

Once you’ve created your account, you can go back to the Login page to login.

List Page

After logging in you are sent to the /todos/list page:

This page shows a list of all of your current incomplete todos, with the ability to search and adjust the filter (to include all todos, or just the completed ones). It has an action button on top to create a new todo, which opens this modal:

Upon submitting this form, the list page should reload with your new todo added to the list.

To mark a todo as complete, click the Mark Done button by that todo. You’ll get the following modal:

To mark the todo as done, toggle the Completed switch and add any notes about the todo in the field. Hitting update should bring you back to the list, where your todo may have disappeared depending on the filters you have set.

If you would like to edit the details of a todo, click the Edit button for that todo. You will be send to the todo edit page:

Edit your todo however you would like, and save when done. On success, you will be sent back to the list page after 3 seconds.

Finally, you can click the navigation link for Calendar to go to the /calendar page:

This page will let you click through month by month to see your todos color coded on the calendar, with ones that are complete struck through.