Deploying a backend on Vercel (APIs and Functions)

Поділитися
Вставка
  • Опубліковано 30 вер 2024

КОМЕНТАРІ • 82

  • @cnikolov
    @cnikolov 8 місяців тому +9

    Lee you are landing really nicely with these videos, I think the missing piece now is exploring the possibilities with edge

  • @EvHaus
    @EvHaus 8 місяців тому +7

    I would love to be able to deploy a Docker container. Is Vercel planning on supporting that?

  • @jjrise
    @jjrise 8 місяців тому +6

    would love to see some Hono examples! I have a Hono API currently deployed to Render, but all my other apps are on Vercel, so it would be extremely nice to consolidate that all to one place.

  • @jellyfish1772
    @jellyfish1772 8 місяців тому +11

    Please make on showing detailed info on how to deploy a NESTjs backend❤

    • @Varkoff
      @Varkoff 8 місяців тому +1

      yeah i'd need this as well ! Deploying a complete API server (not serverless) on Vercel would be awesome

    • @akshayhere
      @akshayhere 8 місяців тому +2

      Is it even possible? As they said, on Pro subscription, they limit long running services to 5 minutes.

  • @IvanRandomDude
    @IvanRandomDude 8 місяців тому +7

    Does anyone know how this compares to Cloudflare Workers in terms of performance, latency, pricing etc?

    • @cayt3r
      @cayt3r 8 місяців тому +1

      It's always hard to compete with Cloudflare on the pricing front. They own the network which can reduce the egress fee significantly. Vercel is mostly wrapping around the providers like AWS, Cloudflare to provide better DX.
      In any case, if you are using Vercel, you should think of it as outsourcing your DevOps/Platform team to them to provide a modernised DX that builds on top of serverless technology.
      It's essentially a DevOps or Platform Engineering as a service, and the price definitely will be higher than Cloudflare, it's still business profit in the picture despite the DX improvement.

  • @aldoyh
    @aldoyh 8 місяців тому +3

    True.. all backend frameworks.. Except PHP!!

    • @twitchizle
      @twitchizle 8 місяців тому

      they support php afaik

    • @aldoyh
      @aldoyh 8 місяців тому

      @@twitchizle I've reached their support and they replied that's possible if you convert them to JS using some tool! Oh C'mon!

    • @twitchizle
      @twitchizle 8 місяців тому

      @@aldoyh there should be php runtime support related text in the docs. Im 100% sure i saw it.

    • @aldoyh
      @aldoyh 8 місяців тому

      Please dear@@twitchizle .. Amaze me.

  • @ignacioaristegui5197
    @ignacioaristegui5197 8 місяців тому +1

    Would love to see how to deploy a backend with Django.

  • @dev_franqqi
    @dev_franqqi 8 місяців тому +5

    Love this channel

    • @leerob
      @leerob 8 місяців тому

      Let me know what else you'd like to see!

  • @mystickago
    @mystickago 8 місяців тому +2

    yes more the better, your explainations are S tair

  • @atmmoreirarj
    @atmmoreirarj 20 днів тому

    I'm having a problem receiving a 404 error, when I run vercel dev. May someone can help me?

  • @oeuvars
    @oeuvars 8 місяців тому +20

    please show us a guide on how to deploy express with typescript on vercel

    • @neociber24
      @neociber24 8 місяців тому

      Keep in mind Vercel is for serverless

    • @leerob
      @leerob 8 місяців тому +5

      Love this suggestion, can do.

    • @oeuvars
      @oeuvars 8 місяців тому

      @@leerob Thank you!

    • @fire17102
      @fire17102 8 місяців тому

      ​@@oeuvars hey yo, hope it's ok to ask, what's the meaning of the symbol in your pic? Thx and all the best

    • @oeuvars
      @oeuvars 8 місяців тому +1

      @@fire17102 Hindu swastika, i understand the logic behind your question lol.
      And thank you.

  • @mzafarr
    @mzafarr 8 місяців тому +1

    Can we deploy Nest.js on vercel?

  • @raihan8097
    @raihan8097 8 місяців тому +2

    Can i host strapi too?

  • @shivanshpatel4072
    @shivanshpatel4072 8 місяців тому +1

    Does this work for Nestjs as well ?

  • @anuragdhote8902
    @anuragdhote8902 8 місяців тому +2

    does this work for Web Sockets as well?

    • @ujjawal_
      @ujjawal_ 8 місяців тому

      no, I deployed my backend which is in express and socket io on vercel it was not working. After searching got to know it's not supported on vercel. So I looked for other alternatives.

  • @ekchills6948
    @ekchills6948 8 місяців тому +1

    please we need detailed info

  • @Axel.Blazer
    @Axel.Blazer 19 днів тому

    i wanted to deploy a backend n frontend project on vercel..using express n node at backedn and ejs as view engine..idk how but im unable to see anything when deployed..my directory schema is:
    index.js
    /views => all ejs files
    /public => /js /img /css
    can someone help on what im doing wrong or is there another way to host this type of structure
    im not using any db just performing CRUD on a local file in the repo itself
    ill paste index.js in next comment..any help is appreciated.. =))

    • @Axel.Blazer
      @Axel.Blazer 19 днів тому

      const express = require('express');
      const app = express();
      const session = require('express-session');
      const path = require('path');
      const fs = require('fs');
      const multer = require('multer');
      require('dotenv').config();
      // Set up EJS as the view engine
      app.set("views", path.join(__dirname, "views"));
      app.set("view engine", "ejs");
      app.use(express.json());
      app.use(express.urlencoded({ extended: true }));
      app.use(express.static(path.join(__dirname, "public")));
      // Configure session middleware
      app.use(session({
      secret: process.env.SESSION_SECRET,
      resave: false,
      saveUninitialized: true,
      cookie: { secure: false, maxAge: 24 * 60 * 60 * 1000 } // Cookie expires in 24 hours
      }));
      // Middleware to check if the user is logged in
      function checkLoggedIn(req, res, next) {
      if (!req.session.email) {
      return res.redirect('/login');
      }
      next();
      }
      // Set up multer for image uploads
      const storage = multer.memoryStorage();
      const upload = multer({ storage: storage });
      // Route to render index.ejs
      app.get("/", function (req, res) {
      const email = req.session.email;
      let name = null;
      if (email) {
      const users = JSON.parse(fs.readFileSync('users.json', 'utf8'));
      name = users[email]?.name || email.split('@')[0];
      }
      let listings = JSON.parse(fs.readFileSync('listings.json', 'utf8'));
      if (email) {
      listings = Object.entries(listings)
      .filter(([sellerEmail, sellerListings]) => sellerEmail !== email)
      .reduce((acc, [sellerEmail, sellerListings]) => {
      const filteredListings = sellerListings.filter(listing => listing.buyerEmail !== email);
      if (filteredListings.length) {
      acc[sellerEmail] = filteredListings;
      }
      return acc;
      }, {});
      }
      let allListings = Object.values(listings).flat();
      const marqueeListings = allListings.splice(0, 25);
      const books = allListings.filter(listing => listing.category === 'books');
      const notes = allListings.filter(listing => listing.category === 'notes');
      const instruments = allListings.filter(listing => listing.category === 'instruments');
      const utilities = allListings.filter(listing => listing.category === 'other utilities');
      res.render("index", {
      name,
      marqueeListings,
      books,
      notes,
      instruments,
      utilities,
      });
      });
      // Route to render login.ejs
      app.get("/login", function (req, res) {
      res.render("login", { error: null });
      });
      // Route to handle login logic
      app.post("/login", function (req, res) {
      const { email, password } = req.body;
      let users = JSON.parse(fs.readFileSync('users.json'));
      if (users[email] && users[email].password === password) {
      req.session.email = email;
      return res.redirect('/profile');
      } else {
      return res.render('login', { error: "Invalid email or password" });
      }
      });
      // Route to render signup.ejs
      app.get("/signup", function (req, res) {
      res.render("signup", { error: null });
      });
      // Route to handle signup logic
      app.post("/signup", function (req, res) {
      try {
      const { name, email, city, institution, password } = req.body;
      if (!name || !email || !city || !institution || !password) {
      return res.render('signup', { error: "All fields are required" });
      }
      let users = JSON.parse(fs.readFileSync('users.json', 'utf8'));
      if (users[email]) {
      return res.render('signup', { error: "Email is already registered" });
      }
      if (password.length < 8) {
      return res.render('signup', { error: "Password must be at least 8 characters long" });
      }
      users[email] = { name, city, institution, password };
      fs.writeFileSync('users.json', JSON.stringify(users, null, 2));
      req.session.email = email;
      res.redirect('/profile');
      } catch (err) {
      console.error("Error during signup:", err);
      res.render('signup', { error: "An error occurred during signup. Please try again." });
      }
      });
      // Route to render profile.ejs (Requires login)
      app.get("/profile", checkLoggedIn, function (req, res) {
      const email = req.session.email;
      const users = JSON.parse(fs.readFileSync('users.json', 'utf8'));
      const name = users[email]?.name || email.split('@')[0];
      let listings = [];
      let orders = [];
      try {
      const data = JSON.parse(fs.readFileSync('listings.json', 'utf8'));
      if (data[email]) {
      listings = data[email].map(listing => ({
      ...listing,
      image: `data:image/jpeg;base64,${listing.image}`,
      sellerEmail: email // Include the seller's email
      }));
      }
      for (let sellerEmail in data) {
      const userOrders = data[sellerEmail].filter(listing => listing.buyerEmail === email);
      orders.push(...userOrders.map(order => ({
      ...order,
      image: `data:image/jpeg;base64,${order.image}`,
      sellerEmail // Include the seller's email
      })));
      }
      res.render("profile", { email, name, listings, orders });
      } catch (err) {
      console.error("Error reading listings.json:", err);
      res.render("profile", { email, name, listings, orders });
      }
      });
      // Route to sign out
      app.post("/signout", function (req, res) {
      req.session.destroy(err => {
      if (err) {
      console.error("Error during signout:", err);
      }
      res.redirect('/');
      });
      });
      // Route to render list.ejs (Requires login)
      app.get("/list", checkLoggedIn, function (req, res) {
      const email = req.session.email;
      res.render("list", { email });
      });
      // Route to handle product listing logic (Requires login)
      app.post("/list", checkLoggedIn, upload.single('productImage'), function (req, res) {
      const { productName, productTitle, productPrice, productCategory, buyerEmail } = req.body;
      const productImage = req.file.buffer.toString('base64');
      let listings = JSON.parse(fs.readFileSync('listings.json'));
      const listing = {
      id: Math.random().toString(36).substr(2, 32),
      title: productTitle,
      description: productName,
      price: productPrice,
      category: productCategory,
      image: productImage,
      buyerEmail: buyerEmail || null
      };
      if (!listings[req.session.email]) {
      listings[req.session.email] = [];
      }
      listings[req.session.email].push(listing);
      fs.writeFileSync('listings.json', JSON.stringify(listings, null, 2));
      res.redirect('/profile');
      });
      // Start the server
      app.listen(3000, () => {
      console.log("Server running on localhost:3000");
      });

  • @tejusr5525
    @tejusr5525 8 місяців тому +2

    would love to see an in-depth video ✌👍

  • @codemedic
    @codemedic 4 місяці тому

    Pls make a more descriptive step-by-step tutorial 🙏🙏

  • @simonmbewe6324
    @simonmbewe6324 6 місяців тому

    time westing .next time just go direct to a point

  • @fire17102
    @fire17102 8 місяців тому

    Hey guys, how come Python is not a Vercel Framework? Don't get it...
    Why can't you run my flask?

  • @jonathangamble
    @jonathangamble 8 місяців тому +1

    Please fix vercel/og outside of nextjs!

  • @aralroca
    @aralroca 8 місяців тому

    Would love to see some Bun.js examples! 😊

  • @george_davituri
    @george_davituri 8 місяців тому

    🤟🏻🏂

  • @kennysus6174
    @kennysus6174 2 місяці тому

    Hey whenever i host any website on vercel, the css just doesnt not load. all of the other things work fine...

  • @BlackishGreen
    @BlackishGreen 7 місяців тому

    can i deploy a discord.js backend app based on websocket too?

  • @lovekyordie15
    @lovekyordie15 4 місяці тому

    I really hope Vercel keeps investing in hosting backends! Such an underrated use case. It is such an improvement to the considerably more manual options like managing all of the infrastructure and CI/CD on AWS directly.

  • @thehostingchannel
    @thehostingchannel 8 місяців тому

    Make it so you get unlimited bandwith with pro plan

  • @loveboat
    @loveboat 8 місяців тому

    Understood about 1% of this.

  • @nicov99
    @nicov99 8 місяців тому

    does it work with a .NET api?

  • @stonekingproductions
    @stonekingproductions 7 місяців тому

    I would like to see a more in depth video here. In order to use the api/ folder do you need to install Next.js?

  • @lambertotamayo4320
    @lambertotamayo4320 8 місяців тому

    Its like firebase function.

  • @guillermobarboza5903
    @guillermobarboza5903 8 місяців тому

    are this lambdas?

  • @b_two
    @b_two 8 місяців тому +1

    can we run deno on vercel?

    • @VercelHQ
      @VercelHQ  8 місяців тому +1

      github.com/vercel-community/deno

  • @arkoose
    @arkoose 8 місяців тому

    Nice one!, You explain it very good.

  • @BhideSvelte
    @BhideSvelte 8 місяців тому

    now can we host pocketbase on vercel ?

  • @miguelemmara5046
    @miguelemmara5046 8 місяців тому

    is there a way to make it faster? less than 30ms per request?

  • @KulturanCov
    @KulturanCov 4 місяці тому

    More in-depth videos, please!

  • @geralddd.g
    @geralddd.g 8 місяців тому

    Needed

  • @dmarksbarber
    @dmarksbarber 8 місяців тому

    I tried deploying Hono TypeScript with path aliases. Ran into issues. Tech support reached out to engineering but they never got back. Happy to share the ticket number.

    • @leerob
      @leerob 8 місяців тому

      Thank you, yeah would love to dig in and also get a better Hono example up!

  • @JosueHernandez-qj4ty
    @JosueHernandez-qj4ty 7 місяців тому

    I second that, great video!

  • @RAMIRREZ-2008
    @RAMIRREZ-2008 7 місяців тому

    Dang that was some legit backend action right there.

  • @yaelgonzalez6114
    @yaelgonzalez6114 7 місяців тому

    Deploying to Vercel looks amazing.

  • @anayeliriverasalgado8062
    @anayeliriverasalgado8062 7 місяців тому

    Finally a simple way to deploy APIs.

  • @TadeoGonzalez-oq4ym
    @TadeoGonzalez-oq4ym 7 місяців тому

    Thanks Vercerl you da real MVP

  • @cnikolov
    @cnikolov 8 місяців тому +5

    The easiest way to turn your apis to lambdas

  • @aldrickdev
    @aldrickdev 8 місяців тому

    Wil this eventually work for other languages, or is this going to stay as a tool for Javascript developers?

    • @VercelHQ
      @VercelHQ  8 місяців тому +1

      We support Python and Go as well.

  • @0xtz_
    @0xtz_ 8 місяців тому

    I can't change the run command ? bc I have a project with front and server and I need to run the vite and then node ./server/index.js

    • @nikitaistomin3588
      @nikitaistomin3588 8 місяців тому

      Have you tried using "concurrently" pkg?

    • @0xtz_
      @0xtz_ 8 місяців тому

      @@nikitaistomin3588 yes but didn't work well hhhhh or 8 did something wrong

  • @gappalchemist
    @gappalchemist 8 місяців тому

    Lee Rob the Goat 👌

  • @HardikAjani
    @HardikAjani 8 місяців тому

    Lovely

  • @ColdestElite_Vibe
    @ColdestElite_Vibe 8 місяців тому

    thanks

  • @mettle_x
    @mettle_x 8 місяців тому

    I found Vercel serverless functions very flaky. It started receiving empty JSON body from Discord webhook interactions suddenly without prior notice or any code change from my end. The fault might not be from the Discord side since I just switched to a VPS and it worked fine there.

    • @aberba
      @aberba 8 місяців тому

      Do you build with babel?

    • @sleekism
      @sleekism 8 місяців тому +1

      Deploying to a lot of modern clouds have this issue. Stuff just stops working without any stimulus

    • @mettle_x
      @mettle_x 8 місяців тому

      @@aberba No, I use the default TypeScript setup from Next.js