App.post() - I cannot make use of response methods like res.json(), res.sendFile() and the like

I am trying to use Replit to accomplish the 3rd through 5th challenge that require using app.post(). The response methods work when I do the project locally. Going back to Replit, I can receive the data but I cannot manage to use any response method. When I change it to a get request it works fine and I can use said methods but when it is a post request all I get is: Cannot GET /api/shorturl

Also there is a new problem to add to Replit issues:
I cannot see what my webview URL so that I can place it into the freeCodeCamp solution input. All that displays is a forward slash for the URL like so: /

Here is my HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>URL Shortener Microservice | freeCodeCamp.org</title>
    <link
      rel="icon"
      type="image/png"
  href="https://cdn.freecodecamp.org/universal/favicons/favicon-16x16.png"
    />
    <link href="/public/style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <h1>URL Shortener Microservice</h1>
    <main>
      <section>
        <form action="/api/shorturl" method="post">
          <fieldset>
            <legend>URL Shortener</legend>
            <label for="url_input">URL:</label>
            <input id="url_input" type="text" name="url" placeholder="https://www.freecodecamp.org/" />
            <input type="submit" value="POST URL" />
          </fieldset>
        </form>
      </section>
    </main>
    <footer>
      <p>By <a href="https://www.freecodecamp.org/">freeCodeCamp</a></p>
    </footer>
  </body>
</html>

Here is my NODE.JS:

require("dotenv").config();
const express = require("express");
const cors = require("cors");
const bodyParser = require("body-parser");
const dns = require("dns");
const fs = require("fs");
const app = express();

// Basic Configuration
const port = process.env.PORT || 3000;

app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use("/public", express.static(`${process.cwd()}/public`));

app.get("/", function (req, res) {
  res.sendFile(process.cwd() + "/views/index.html");
});

app.post("/api/shorturl",(req,res)=>{
  res.json({
    "message":"Please start working for me!"
  })
})

app.listen(port, function () {
  console.log(`Listening on port ${port}`);
});
1 Like

You can’t submit the form from the preview window it has to be in a new tab (click the “New tab” button).

That is also how you can get the URL for the submit.

1 Like

WOW finally it worked! I cannot begin to thank you enough for this revelation! It makes more sense now, when I tested the problem on another persons example in Replit. When I tested it I used a new tab, I just had no idea that it was the only way it could be done! Thank you again, now I can finally get back to the challenge at hand!

3 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.