Welcome to your first step in building the AI Cooking Helper! In this lesson, you will learn how to set up the foundation of your web application using TypeScript and Express, a popular web framework for Node.js. Express is lightweight, easy to use, and perfect for beginners who want to build web apps quickly with TypeScript.
By the end of this lesson, you will have a working Express project written in TypeScript, connected to a database. This setup is essential for storing recipes, user data, and more as you continue to develop your cooking app. Everything you learn here will be used in future lessons as you add more features and functionality.
Before we dive in, let’s quickly review how TypeScript projects are usually organized in a Node.js environment. A typical TypeScript project has an entry point file (like src/index.ts) that starts the application, and folders (like src/routes/ and src/) that hold different parts of the code, such as routes and database logic.
For example, your project might look like this:
src/index.tsis where your application starts.- The
src/routes/folder keeps your code organized by separating different route handlers. src/config.tsholds configuration values.src/db.tsmanages the database connection.prisma/contains your database schema if you usePrismaas your ORM.
This structure helps keep your code clean and easy to manage as your project grows.
Let’s start by creating a basic Express application in TypeScript. In your src/index.ts file, you will need to import Express and create an app instance.
Here’s what’s happening:
import express from "express"imports theExpresslibrary.const app = express()creates a newExpressapplication.app.get("/health", ...)defines a simple route for checking if the server is running.app.listen(3000, ...)starts the server on port 3000.
You can add more configuration and middleware as your app grows. For example, to parse JSON request bodies, add:
To work with a database in TypeScript, you can use an ORM (Object-Relational Mapper) like Prisma. Prisma makes it easy to interact with your database using TypeScript code.
To connect Prisma to your Express app, create a src/db.ts file:
In your src/index.ts, you can import and use the Prisma client as needed. For example, to check the database connection when the server starts:
The prisma.$queryRaw is used to test the database connection when your server starts. It sends a simple SQL query (SELECT 1) to the database, which always succeeds if the connection is working. If there’s a problem connecting to the database, this line will throw an error, letting you know right away that something is wrong with your database setup.
We will be using a sqlite database that is already set up for you in the Codesignal environment, no need to worry about it!
As your app grows, you’ll want to keep your code organized. Express routers help you split your routes into different files. This makes your code easier to read and maintain.
For example, you can define a recipes router in src/routes/recipes.ts:
Then, in your src/index.ts, import and use the router:
This keeps your main application file clean and lets you organize your routes by topic or feature.
To run your app, use the script defined in your package.json:
You should see output like:
You can now check if your app is running by sending a request to the health endpoint using curl:
You should see a response like:
As your projects grow, it’s important to keep sensitive information — like your database URL and other configuration values — secure. In real-world applications, you should use environment variables or a separate configuration file (not committed to version control) to store these settings, rather than hard-coding them in your source code. In Node.js/TypeScript projects, you can use the dotenv package to load environment variables from a .env file:
This helps protect your data and makes your app easier to configure for different environments.
In this lesson, you learned how to:
- Set up a basic
Expressapplication insrc/index.tsusingTypeScript - Configure your app to use a database with
Prisma - Connect
Prismaand initialize your database tables - Organize your routes using
Expressrouters for a clean code structure - Use environment variables to keep sensitive information organized
You now have a solid foundation for your AI Cooking Helper. In the next practice exercises, you’ll get hands-on experience with these steps, making sure you can set up and run your own Express project with a working database. This setup will support all the features you’ll build in the rest of the course!
