Build from Scratch

Navigate to the Home screen and select Create App:

Select the Choose a Template tab and enter “Express.js” in the search field to locate the corresponding Template as shown in the following image:

Set the App’s title in the Title field and make sure Private is selected. You can modify these values later.

Select Create App to proceed.

Navigate to the Assistant tab.

Assistant is Replit’s AI-powered tool that specializes in building smaller changes to your app.

Enter the following prompt in the text area and submit it to modify a specific file:

Update the endpoint in index.js to say "Hello, Replit!" followed by a random cheerful emoji.

Select Apply all to accept changes or Preview code changes to view them.

After applying the changes, you should see the updated message in the Webview tab as shown in the following image:

Navigate to the Files tab to access your Replit App’s files.

Select index.js to open a file editor tab.

Locate the endpoint and change the message from “Hello, Replit!” to “Aloha, Replit!”

If you’re unsure where to edit, replace the endpoint with the following code:

    app.get('/', (req, res) => {
        const emojis = ['😊', '🎉', '✨', '🌟', '💫', '🌈', '🎨', '🚀'];
        const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
        res.send(`<h1>Aloha, Replit! ${randomEmoji}</h1>`);
    });

Switch to the Webview tab and select the refresh button .

After the browser reloads, the page should resemble the following image:

From the All Tools tab or search box, locate and select Assistant. Assistant is an AI chatbot that can modify your code to add new features or fix errors.

Enter the following prompt in the text area and submit it:

Add the morgan HTTP request logger

After analyzing the request and existing code, Assistant prompts you to view or accept its changes as shown in the following dialog:

Select Apply All to add the dependency and update the configuration.

Navigate to the Dependencies tab.

The dependencies list should include the morgan package as shown in the following image:

To access the tool, open the All Tools tab or search box, locate and select the Dependencies tab as shown in the following image:

In the Imports tab, select Add new package to open a dialog. Search for and add the “express-rate-limit” package as shown in the following image:

Alternatively, select Open package.json to open package.json in an editor tab, where you can add or edit dependencies.

Navigate to the Assistant tab.

Enter the following prompt in the text area and submit it:

What features should I consider next?

Assistant might respond with the options shown in the following image:

Enter the following prompt in the text area and submit it:

Add API endpoints that let me modify the message

Assistant might respond with the implementation described in the following image:

Select Apply all to make the code changes.

Test the API endpoints by navigating to the Shell tab and running the shell commands recommended by Assistant.

Alternatively, ask Assistant to test the endpoints. In the response, you should see action buttons such as Run and Run in Shell as shown in the following image:

Select these to execute the commands to retrieve the current message and update it.

Verify changes to the message by navigating to the Webview tab and selecting Refresh in the address toolbar.

The Express.js Template includes a workflow that runs a command to start the Express.js server. However, the server requires a restart to view the latest changes to the files it serves which can inconvenience development.

To avoid this repetitive task, you can ask Assistant to perform the following tasks:

• Install the nodemon package which automatically restarts the Express.js server when it detects file changes
• Update the workflow to manage the Express.js server using nodemon.

To request this change, navigate to the Assistant tab and enter the following prompt:

Install nodemon and configure the app to automatically restart the Express server whenever I make changes

Assistant’s response should resemble the following image:

Select Install to add the dependencies, and Apply All to update the configuration.

To confirm the workflow updates, select the downward arrow next to the Run or Stop button and select Manage Workflows as shown in the following image:

Select the Dev workflow to view the details, which should resemble the following image:

To ensure your App runs using the selected workflow, select Stop and then Run.

Try making a change to the message returned by the endpoint. After your update, you should see the updated message in the Webview tab.