Express + Prisma + MongoDB Starter

The Express + Prisma + MongoDB Starter is an easy way to start a new full-stack project. This starter is a simple To Do List web app with a REST API back end and a basic JavaScript front end UI. It's based on the Express.js framework, the Prisma ORM, and a MongoDB datastore. With just a couple of clicks, this starter will:

Create a new GitHub repo for your project
Copy the source code for the To Do List template app into your new repo
Host your new app on Adaptable, complete with a MongoDB database, SSL/TLS, and everything else you need to run your app in production
Enable Continuous Deployment on your new repo, re-deploying to Adaptable on each push to your main branch

To get started creating your new app, click the button below.

If you're not already signed in, you'll need to sign in with your GitHub account.

The next screen explains the actions the starter will perform. Click Next to continue.

Starter information

»Step 1: Connect to GitHub

If this is your first time using Adaptable, you'll need to connect Adaptable to one or more of your GitHub scopes. This will allow Adaptable to:

Create your new GitHub repo.
Populate it with template source code from the starter.
Monitor the repo and update the Adaptable deployment on every push to your main branch.

A GitHub scope can be either a GitHub organization you belong to or your personal scope.

Click the Connect to GitHub Scope button.

Connect to GitHub

Choose which scope you'd like to connect Adaptable to.

Install Adaptable on GitHub

And finally, click the Install & Authorize button.

Authorize Adaptable on GitHub

»Step 2: Choosing Names for Your GitHub Repo and Adaptable App

Choose a connected GitHub scope where you'd like to create your new repository and choose a name that's unique within that GitHub scope. If you don't see the GitHub scope where you want to create the new repository, click Connect to more GitHub scopes to install Adaptable on another GitHub scope.

Choosing a repo name

Click Next to continue.

Then choose a name for your app project on Adaptable. It must be unique among all other app names on Adaptable.

Choosing an app name

Click Create Repo & Deploy to start the process of creating and deploying your new app.

Adaptable will now create your new GitHub repo and deploy it. This process typically takes about 3 minutes.

Adaptable shows you progress on each of the starter operations.

Deploying the starter

»Done!

Once deployment is complete, Adaptable provides information about the actions the starter performed.

Deployment complete

Adaptable shows the following information:

A link to the new GitHub repo that was created by the starter.
The public URL for your new app, running on the Adaptable Cloud.
Information about which repo branch is enabled for continuous deployment.

To manage settings for your app and to access logs and other information, click the View App Status button. Or to see all your Adaptable apps, go to your Dashboard.

To learn more about managing your Adaptable apps, see Managing Apps.

»What's Next?

Here are a few ideas on what to do with your new app.

»Idea #1: Check out your new app

The app is a simple web-based To Do list where you can add tasks and mark them complete. The task data is stored in the MongoDB instance deployed alongside your app.

From the Starter Complete screen (see above), click the Visit App button to connect to your app. You can also find the URL for your new app on your App Dashboard.

Express + Prisma + MongoDB To Do List App

To add a new task, type in the New task... box and click Add. To mark a task complete, click the checkbox next to the task.

»Idea #2: Deploy a code update

Your new app has a large congratulations message at the top of the screen. You can edit the app source code to remove the message and Adaptable will re-deploy the updated app when you push to your main branch on GitHub.

First, clone your new GitHub repo on your local system

You can get to your app's GitHub repo by clicking on the GitHub icon for the app on the App Dashboard. Alternatively, you can click the name of your new repo on the Starter Complete screen (see above) to go to your newly created repository. For more info on cloning a repo, see the GitHub docs.

Edit public/index.html to remove the message

Remove the HTML code between these two HTML comments:

<!-- REMOVE MESSAGE BEGIN -->
... code to remove ...
<!-- REMOVE MESSAGE END -->

Edit src/routes/todos.js to remove the code that adds the pre-populated To Do items

Remove the JavaScript code between these two JavaScript comments:

// REMOVE TODO ITEMS BEGIN
... code to remove ...
// REMOVE TODO ITEMS END

The To Do items will still be in the database, but will not be added back after this change. To fully remove the items, you can either implement the delete code shown below, or manually connect to the database with the information in the Resources tab for your app and delete the entries with the tool of your choice.

Commit and push

Save and commit your changes to git. Then push the changes to GitHub.

Each time you push to the main branch, Adaptable will automatically deploy your code changes.

git add .
git commit -m "Removing congratulations message"
git push origin

Monitor app deploy status

Go to your App Dashboard page and click on the app name to see the App Status Page.

The App Status page shows if your app is currently being re-deployed. Wait for your latest changes to finish deploying, then click the app's URL to see the updated To Do List page.

App Status Page

»Idea #3: Start building your app by adding more API services

Now it's time to start customizing the To Do app to add functionality, eventually transforming it into your own app.

The To Do app already allows you to mark tasks as complete, but it doesn't support deleting a task from the database. To add support for deleting tasks, follow these steps:

If you haven't already, clone your app's GitHub repository

Add delete to the REST API

In your new app's source code repo, edit src/routes/todos.js and add the following code at the end of the file:

router.delete('/:id', asyncMiddleware(async (req, res) => {
  const { id } = req.params;
  const deleted = await prisma.TodoItem.delete({
    where: { id },
  });
  res.json(deleted);
}));

Add a delete button to the UI

Edit public/js/client.js and find the comment INSERT DELETE BUTTON HERE. Just below that comment, add the following code that displays a trash can icon button:

<!-- INSERT DELETE BUTTON HERE -->
<a
  style="color: red;"
  href="#"
  role="button"
  onclick="handleTodoDelete(event, '${id}')"
>
  <i class="far fa-lg fa-trash-alt"></i>
</a>

Add code to handle delete button clicks

Also in public/js/client.js, find the comment INSERT handleTodoDelete HERE. Just below that comment, add the following code to respond to a click of the delete button.

// INSERT handleTodoDelete HERE
const handleTodoDelete = (ev, id) => {
  ev.preventDefault();
  const doDelete = async () => {
    await apiFetch(`/todos/${id}`, "DELETE");
    refreshList();
  }
  doDelete().catch(err => console.log("Error deleting todo", err));
};
window.handleTodoDelete = handleTodoDelete;

Commit, push, and re-deploy your app

Save all your source code files. When you commit your changes and push to GitHub, Adaptable will re-deploy your app. See instructions above for detailed steps for committing your code and monitoring the App Status page to watch your app being re-deployed.

Using these simple steps, you can now start to customize the To Do app and add the services your app needs.

»Questions? Need Help?

If you have questions or need help getting started with Adaptable, contact our support team for help.

App Starters