React Tutorial

React Tutorial

1642407601

Build a Simple MDX-based Blog using Remix and Tailwind CSS

Build Your Own Blog with Remix and Tailwind CSS, and deploy to Vercel!

In this quick tutorial we'll build a simple MDX-based (markdown) blog using Remix (a.k.a. "remix run" a new React framework) and Tailwind Typography. I'll also show how easy it is to deploy this to Vercel!

00:00 - Intro
01:07 - Installation and setup
02:56 - First MDX Route
03:47 - Markdown attributes
06:17 - Add Syntax Highlighting
11:15 - Add Tailwind and Typography plugin
15:49 - Create list of articles
19:11 - Deploying to Vercel
23:01 - Outro

#remix #react #tailwindcss #tailwind #webdev #markdown #vercel

Build a Simple MDX-based Blog using Remix and Tailwind CSS
渚  直樹

渚 直樹

1642029720

Vercelを使用してReactアプリを無料でデプロイする

ホスティングプロバイダーのストレスを経験することなく、ライブURLを介してプロジェクトを利用できるようにすることを考えたことはありますか?

以前は、Vercelのようなクラウドプラットフォームが登場する前は、ホスティングは、変更を加えるたびに静的アセット(プロジェクトビルドフォルダーなど)をアップロードする必要があるホスティングプロバイダー(GoDaddyなど)によってのみ実行されていました。このアップロードは、FTPソフトウェアまたはcPanelのようなシステムのいずれかによって行われるため、非常にストレスがかかり、技術的になる可能性があります。

今日、GitHubの登場により、開発者は、展開を容易にするVercelなどのクラウドプラットフォームにアクセスできるようになりました。

Vercelはサーバーレスクラウドプラットフォームであり、開発者(基本的にはフロントエンド開発者)が、瞬時に起動し、自動的に成長し、監視を必要としないWebサイトやオンラインサービスを、すべて最小限の構成でホストできるようにします。Vercelは、Reactアプリケーションを簡単にデプロイして、高性能のWebサイトやアプリケーションを構築するための包括的なツールを提供するのに最適です。

なぜVercelを使用するのですか?

  • Vercelは、ライブサーバーにコードをデプロイするための無料ドメイン(vercel.appサフィックスを含む)を提供します。また、独自の/個人ドメインを利用することもできます
  • Vercelは自動デプロイメントをサポートしています。つまり、リポジトリの本番ブランチ(メインまたはマスター)に変更をプッシュするたびに、Vercelはそれらを自動的に検出してサーバーにデプロイします。
  • そしてもっとたくさん…

入門

このガイドでは、APIからランダムクォートを取得するランダムクォートジェネレーターアプリ使用します

始める前に、Vercelを利用するために必要ないくつかの前提条件を見てみましょう。

  • Gitプロバイダー(GitHub、GitLab、またはBitbucket)のアカウントを持っている
  • npm(Nodeに付属)またはYarn
  • ターミナルの使用方法の基本的な理解

コードをGitHubにプッシュする

アプリケーション/プロジェクトをVercelにデプロイするには、プロジェクトを任意のGitプロバイダーにプッシュする必要があります。

このガイドでは、ターミナルを介してGitHubを使用してReactアプリケーションをプッシュします。

まず、GitHubにリポジトリを作成しましょう。

Vercelでの新しいリポジトリの作成

次に、必要な情報を入力して、[リポジトリの作成]をクリックします

Vercelでの新しいリポジトリの作成

ターミナルに戻って、すべてのファイルをステージングしてリポジトリにコミットできるようにしmain、次のコマンドを使用して新しいブランチを作成することから始めましょう。

git init
git add .
git commit -m "first commit"
git branch -M main

これが完了すると、次のコマンドを使用して、作成されたリモートリポジトリにプッシュできます。

git remote add origin https://github.com/olawanlejoel/random-quotes.git
git push -u origin main

注意: GitHubのリモートURLを自分のものに置き換えてください。

リポジトリを更新すると、コードが表示されます。

Vercelリポジトリへの新しいコードの入力

Vercelリポジトリへの新しいコードの入力

次に、Vercelにデプロイする方法は約4つありますが、ここでは2つの主要な方法のみを検討します(これは他のすべてのフレームワークで機能します)。

手動展開(Vercel for Git)とVercelCLIを介したターミナル展開の両方の方法を調べてみましょう。最後に、どちらが最適かを結論付けます。

VercelCLIを使用したデプロイ

この最初のステップは、https://vercel.com/にアクセスし、右上隅にある[サインアップ]ボタンをクリックすることです。GitHub、GitLab、またはBitbucketのいずれかでサインアップできます。

Vercelにサインアップする

それが成功すると、ダッシュボードは次のようになります。

Vercelダッシュボード

次のステップは、VercelCLIをインストールすることです。このガイドでは、プロジェクトをReactにプッシュするために必要なコマンドのみを使用します。その他のコマンドと機能については、CLIのドキュメントを確認してください。

Vercel CLIをグローバルにインストールするには、ターミナルで次のコマンドを実行します。

npm i -g vercel

注意:正常にインストールされたかどうかを確認するため に、ターミナルで実行できvercel--version ます。

正常にインストールされたら、次のステップはコードをプッシュすることです。初めてなので、ターミナルからVercelにログインする必要があります。ターミナルで以下のコマンドを実行します。

vercel

次のように表示されます。

Vercelログインターミナル

方向ボタンを使用して上下に移動し、Enterボタンをタップしてお好みのオプションを選択します。

これにより、ブラウザタブにリダイレクトされ、成功または失敗のいずれかが表示されます。

注意: 以前にVercelアカウントを作成したときに使用したアカウントでログインしてください。

次のステップは、ターミナルに戻り、開始したことを続行することです。😄質問に答えることによって、最初に、これがデプロイするプロジェクトであることを確認します。

? Set up and deploy “path to your project”? [Y/n] y

次の質問は、アプリをデプロイするアカウントを確認することです。

? Which scope do you want to deploy to? Your Vercel Account

注意、これはデフォルトのオプションを提供します。Enterキーを押すだけで続行できます。

次に、これを既存のプロジェクトにリンクするかどうかを尋ねられます。次のように入力するだけですN

? Link to existing project? [y/N] n

次のステップは、プロジェクトに名前を付けることです。

? What’s your project’s name? project-name

パスを指定するように求められます。./すでにプロジェクトディレクトリにいるので、これはデフォルトのオプションを利用します:

? In which directory is your code located? ./

最後に、CLIの優れた機能の1つは、自動フレームワーク検出です。これにより、使用しているフレームワークを検出し、それに応じてデフォルトのプロジェクト設定を提供できます。これには、ビルドコマンド出力ディレクトリ、および開発コマンドが含まれます。

これは単に、プロジェクトがを使用create-react-appして初期化されたかどうかを自動検出し、それに応じて設定を構成することを意味します。それ以外の場合は、それらを設定するように求められます。

Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start

最後の質問は、設定を上書きするかどうかを確認することです。次のように入力するだけですn

? Want to override the settings? [y/N] n

やあ、プロジェクトは正常にデプロイされました。これがどのように見えるかの要約です:

Vercelターミナルにデプロイされたプロジェクト

これが成功すると、Vercelはプロダクションリンクをクリップボードに自動的にコピーします。ブラウザに移動し、本番リンクまたはctrl + clickターミナルにリンクを貼り付けます。

Vercelターミナルにプロダクションリンクを貼り付ける

Vercelを使用して手動でデプロイする

次に、別の展開方法を見てみましょう。この方法は、端末に精通しておらず、手動で展開を実行するのが好きな個人に適しています。

最初のステップは、ダッシュボードアクセスして[新しいプロジェクト]をクリックすることです。

Vercelダッシュボードでの新しいプロジェクトの作成

これにより、プロジェクトを作成できるページにリダイレクトされます。次に、検索バーをクリックしてGitHub名前空間追加します

GitHub名前空間を追加する

これにより、GitHubから認証ページがポップアップ表示されます。展開元のアカウント(個人アカウントまたは組織アカウントの場合があります)をクリックしてください。次に、Vercelをインストールするように求められます。

Vercelをインストールする

注意:GitHubのパスワードを入力して、自分のアカウントであることを確認する必要があります。

それが成功すると、すべてのGitHubリポジトリが表示されます。次のステップは、インポートしてデプロイするリポジトリを選択することです。

Vercelにデプロイするリポジトリを選択

リポジトリをインポートすると、次のように表示されます。

デプロイ前にVercelプロジェクトを構成する

注意:Vercelはフレームワークプリセットを自動的に検出します。

これで、[展開]ボタンをクリックできます。これにより、ビルド、チェックを実行し、最後にドメインを割り当てることで、プロジェクトのデプロイが開始されます。

デプロイしたプロジェクトにドメインを割り当てる

[ダッシュボードに移動]ボタンをクリックすると、ドメイン名やその他の展開情報など、展開されたアプリケーションの詳細を表示できます。

両方の展開方法を比較する

どちらの方法も同じ機能を実行しますが、手段や方法が異なります。どちらが最適かは、開発者としての自分の好みに基づいて選択します。

  • Vercel CLIは端末上ですべての仕事をします。つまり、文字通り、不要なナビゲーションのストレスを経験する必要はありません。
  • 他の方法はかなりクールですが、あなたがする必要があるのは、Vercelダッシュボードをナビゲートすることだけです

コメントセクションで、どの方法が最適だと思うか、なぜそれが最適だと思うかを教えてください。しかし、私にとっては、展開がはるかに簡単になり、IDEから離れることがないため、常にVercelCLIを選択します。😋

結論

この記事では、ReactアプリをVercelにデプロイする方法を確認できました。2つの主要な方法とそれらがどのように機能するかを見ました。

リンク:https//blog.logrocket.com/deploy-react-app-for-free-using-vercel/

#vercel  #react 

Vercelを使用してReactアプリを無料でデプロイする
Jackie  White

Jackie White

1640765640

Por Que Vale A Pena Usar NextJS Na JAM Stack?

Eu falo bastante sobre NextJS aqui nesse canal e nesse vídeo eu quero celebrar todo esse conteúdo explicando quais features e os por ques de eu curtir tanto a ferramenta baseado na minha experiência de vida como Dev e pq eu realmente acredito que vale a pena apostar nela como base para diferentes tipos de projetos.

 

#nextjs  #vercel  #jamstack 

Por Que Vale A Pena Usar NextJS Na JAM Stack?
Code  Camp

Code Camp

1639408284

Full-stack Web Application with Svelte, Postgres, Vercel and Gitpod

Full Stack Web Development in the Cloud Course - Svelte, Postgres, Vercel, Gitpod

In this tutorial for beginners, you will learn how to develop a full-stack web application entirely in your browser using Gitpod (https://www.gitpod.io/). You will build the app with Svelte and Postgres. From creating a new repository to deploying to production, we will write and discuss every line of code.

Pull requests are available for each section of the course.

💻 The technology stack for this course includes:
💿 Svelte (https://svelte.dev/ )
💿 SvelteKit (https://kit.svelte.dev/ )
💿 Prisma (https://www.prisma.io/ )
💿 Postgres (https://www.postgresql.org/ )
💿 Vercel (https://vercel.com/ )
💿 Railway (https://railway.app/ )

⭐️ Course Contents ⭐️
⌨️ (0:00:00) IntroductionCourse & author intro
⌨️ (0:08:51) What you will learn
⌨️ (0:12:07) Gitpod developer environment
⌨️ (0:13:33) Project Overview: A todo app
⌨️ (0:16:33) Architecture
⌨️ (0:20:39) Initialize the application
⌨️ (0:40:12) Intro to SvelteKit
⌨️ (0:55:31) Configure Gitpod
⌨️ (1:32:07) Develop HTML structure
⌨️ (1:53:46) Apply CSS styles
⌨️ (2:44:32) Develop CRUD endpoints: GET and POST
⌨️ (3:31:54) DELETE
⌨️ (4:16:45) PATCH - Edit Text
⌨️ (4:33:22) PATCH - Mark as Done
⌨️ (4:48:41) Enhance HTML forms
⌨️ (5:40:56) Install & start the dev database
⌨️ (5:50:33) Use Prisma ORM
⌨️ (6:26:32) Update API to use Prisma
⌨️ (6:47:58) Deploy Database on Railway
⌨️ (7:03:33) Deploy web app & API on Vercel
⌨️ (7:12:28) Project review
⌨️ (7:16:14) What's next?
⌨️ (7:19:22) Wrap up

📝 Code: https://github.com/gitpod-io/full-stack-web-development

#cloud #svelte #postgres #vercel #gitpod #webdev #fullstack

Full-stack Web Application with Svelte, Postgres, Vercel and Gitpod
Jennie  Hane

Jennie Hane

1639236480

How Configuring Your Laravel App for Deployment to Serverless Vercel

Deploy a Laravel App for FREE on Vercel Serverless!

In this video I show the process of configuring your Laravel app for deployment to serverless Vercel using a PHP runtime. This is great for prototyping and is free way to host a Laravel site if you have an external database.

Package I built to make this easy: https://github.com/davidgrzyb/deploy-laravel-on-vercel

#laravel #vercel 

How Configuring Your Laravel App for Deployment to Serverless Vercel

Vercel Builder: Vercel Builder for Nuxt.js

Nuxt Vercel Builder

@nuxtjs/vercel-builder is the ideal way to ship a fast, production-ready Nuxt application that scales automatically on Vercel when using SSR rendering.

How it works

This Vercel builder takes a Nuxt application defined by a nuxt.config.js (or .ts) entrypoint and deploys it as a serverless function in a Vercel environment.

It features built-in caching of node_modules and the global yarn cache (even when dependencies change) and a multi-stage build for fast and small deployments.

When to use it

This package is only made for SSR applications.

If you want to deploy a statically generated Nuxt application instead, check this guide from Vercel.

Setup

All you need is a Nuxt application and a Vercel account.

Then, simply create a vercel.json file at the root of your project:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder"
    }
  ]
}

NOTE: When installing your dependencies, Vercel will use the same package manager that is used in the project. Using yarn is highly recommended due to its autoclean functionality, which can decrease lambda size.

Examples

See Basic example for a more complete deployable example, including an example of how to set up vercel dev support.

See Deploying two Nuxt apps side-by-side for details on deploying two Nuxt apps in one monorepo.

Configuration

serverFiles

  • Type: Array

If you need to include files in the server lambda that are not built by webpack (or within static/), such as a local module or serverMiddleware, you may specify them with this option. Each item can be a glob pattern.

Example

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["server-middleware/**"]
      }
    }
  ]
}

internalServer

  • Type: Boolean
  • Default: false

If you have defined serverMiddleware in your nuxt.config, this builder will automatically enable an internal server within the lambda so you can access your own endpoints via http://localhost:3000. (This does not affect how you call your endpoints from client-side.)

If you need to enable or disable the internal server manually (for example, if you are adding server middleware via a module), just set internalServer within the builder options.

generateStaticRoutes

  • Type: Boolean
  • Default: false

To pre-render routes during the build using nuxt generate set this to true. Routes that are not generated will fallback to the server lambda. You will need to specify the routes to be generated in your nuxt.config.

Example

{
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "generateStaticRoutes": true
      }
    }
  ]
}

tscOptions

  • Type: Object

If you need to pass TypeScript compiler options to override your tsconfig.json, you can pass them here. See the TypeScript documentation for valid options.

Example

{
  "src": "nuxt.config.ts",
  "use": "@nuxtjs/vercel-builder",
  "config": {
    "tscOptions": {
      "sourceMap": false
    }
  }
}

You can also include a tsconfig.vercel.json file alongside your tsconfig.json file. The compilerOptions from those files, along with any tscOptions passed through vercel.json, will be merged and the resulting options used to compile your nuxt.config.ts, local modules and serverMiddleware.

memory

  • Type: Number

Pass this option if you need to customize the default memory limit of the serverless function that renders your pages.

maxDuration

  • Type: Number

Pass this option if you need to customize the max duration of the serverless function that renders your pages.

Environment variables

env

If you are accessing environment variables via env within your Nuxt build, then they will be baked in at build time. This means that if you update the variables in the Vercel dashboard, you will need to trigger a deployment again for the changes to take effect. You must include these variables in build.env in your vercel.json (see below).

runtimeConfig

If you are using Nuxt 2.13+, it is recommended to use the new runtimeConfig options instead.

Exposing variables

There are two environments where you may need to expose environment variables within vercel.json. They are env (for runtime variables) and build.env (for build-time variables, which may not be required for runtimeConfig). See Vercel documentation. For example:

{
  "env": {
    "MY_VARIABLE": true
  },
  "build": {
    "env": {
      "MY_VARIABLE": true
    }
  }
}

Finally, note that if you want to access Vercel's system environment variables, you may want ensure that system environment variables are automatically exposed.

Usage with Typescript

vercel-builder supports TypeScript runtime compilation. It adds in a pre-compilation step as part of building the lambda for files not compiled by Webpack, such as nuxt.config.ts, local modules and serverMiddleware.

References to original TS files in strings outside of modules or serverMiddleware may therefore cause unexpected errors.

Don't forget to update your Nuxt config filename in your vercel.json file.

Technical details

Monorepos

Just enable the "Include source files outside of the Root Directory in the Build Step" option in the Root Directory section within the project settings.

Vercel monorepo config

Private npm modules

To install private npm modules, define NPM_AUTH_TOKEN or NPM_TOKEN as a build environment variable in vercel.json.

Alternatively, you can inline your entire .npmrc file in a NPM_RC environment variable.

Node version

The Node version used is the latest 14.x release. Alternatively, you can specify Node 12 or 10 in your package.json - see Vercel documentation.

vercel-build script support

This builder will run a given custom build step if you have added a vercel-build key under scripts in package.json.

Deploying additional serverless functions

You can also deploy additional serverless functions alongside your Nuxt application.

serverMiddleware

Create an api folder at the root of your project, and then create a file in it, for example hello.js:

import express from 'express'
import bodyParser from 'body-parser'

const app = express()
app.use(bodyParser.json())

// It is important that the full path is specified here
app.post('/api/hello', function(req, res) {
  const { info } = req.body
  console.log(info)
  res
    .status(200)
    .json({ info })
    .end()
})

export default app

Setup the Vercel config

In your vercel.json, add your additional endpoints:

{
  "version": 2,
  "routes": [
    {
      "src": "/api/hello",
      "dest": "/api/hello.js"
    }
  ],
  "builds": [
    {
      "src": "api/**/*.js",
      "use": "@vercel/node"
    },
    {
      "src": "nuxt.config.ts",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["api/**"]
      }
    }
  ]
}

Add it to the Nuxt config

If you want to interact with this API whilst developing your Nuxt app, you can add it to your serverMiddleware conditionally.

export default {
  serverMiddleware:
    process.env.NODE_ENV === 'production' ? [] : ['~/api/hello.js'],
}

And that's it! You can now go to http://locahost:3000/api/hello and see the result! In production the endpoint will be handled with Vercel, but locally Nuxt will manage it for you.

License

MIT License

Documentation and builder inspired by Next.js by Vercel

#nuxt #vercel 

Vercel Builder: Vercel Builder for Nuxt.js
Landen  Brown

Landen Brown

1635947889

How to Move Development Environment to the Cloud with Gitpod & Vercel

In this video we'll learn how to move your full stack serverless development environment to the cloud with Next.js, Gitpod, and Vercel, enabling you to develop and iterate on full stack web applications from any machine including tablets, Chromebooks, and brand new environments without any previous setup. All you need is a web browser.

Link to repo: https://github.com/wutali/nextjs-netlify-blog-template

#next #nextjs #vercel #cloud

How to Move Development Environment to the Cloud with Gitpod & Vercel
Joshua Yates

Joshua Yates

1635238204

5 FREE Ways to Deploy Your Website on Cloud!

5 FREE Ways to Deploy Your Website on Cloud! How to Host Your Website for FREE!

Timestamps
0:00 Video Starts
0:49 #5 Cloudflare Pages
3:00 #4 Netlify
4:48 #3 Vercel
9:08 #2 Heroku
10:41 #1 Digital Ocean
13:08 Conclusion
13:39 Outro

#webdev #cloudflarepages #netlify #vercel #heroku #digitalocean

5 FREE Ways to Deploy Your Website on Cloud!
John David

John David

1634137399

Using the Prisma Data Proxy with Vercel, Prisma, Next.js, and PostgreSQL

In this video, you will learn about how the Early Access version of the Prisma Data Proxy solves database connection management in serverless environments.

The Prisma Data Proxy is an external connection pooler that sits between your app and your database so you can reliably use relational databases in serverless environments.

In the video, Daniel deploys a Next.js app built with Prisma and PostgreSQL to Vercel and runs a load test to show the database connection limit exhausted. He then imports the project to the Prisma Data Platform and configures the Prisma Data Proxy to eliminate database connection exhaustion.

Source code: https://github.com/2color/next-prisma-data-proxy 

Sign up for Early Access to the Prisma Data Proxy: https://pris.ly/prisma-data-proxy 

Timestamps:
00:00 The connection pooling problem in serverless environments
01:40 A look at the demo built using Next.js and Prisma
05:16 Deploying the application to Vercel without using the Data Proxy
06:16 Load testing to demonstrate the connection pooling problem using K6
08:12 A look at the Prisma Data Platform and setting up the Data proxy
12:20 Updating the Next.js demo project to use the Data Proxy
17:29 Adding the Data Proxy connection string to the project on Vercel
18:56 Setting to the Vercel build command to run migrations in builds
21:23 Running the load test with the Data Proxy and comparing the results
24:06 Summary

#prisma #postgresql #vercel #prisma #nextjs

 

Using the Prisma Data Proxy with Vercel, Prisma, Next.js, and PostgreSQL
Rylan  Becker

Rylan Becker

1633593600

instructions for Publishing Next.js Application to Vercel with Nx

During this journey from setting up our Next.js app within an Nx workspace, to configuring Tailwind, Markdown rendering, Storybook and Cypress we’re now at the point where we should look at the deployment of our site. Let’s learn how to deploy to some static environment as well as leverage the rich features when deploying to Vercel.

#vercel #nextjs #nx 


 

instructions for Publishing Next.js Application to Vercel with Nx
Eric  Bukenya

Eric Bukenya

1631073332

How to Create Portfolio investments with Next.js, Tailwind and Vercel

Steps to build a portfolio website using Next.js and Tailwind with Dark Mode Support
#nextjs #tailwind #vercel 

How to Create Portfolio investments with Next.js, Tailwind and Vercel
Debbie Clay

Debbie Clay

1627702091

How to Build a GraphQL Server using Next.js and Neo4j

We'll build a GraphQL server using Next.js API routes and the Neo4j GraphQL library then deploy it to Vercel and Neo4j Aura.

#graphql #nextjs #neo4j #vercel

How to Build a GraphQL Server using Next.js and Neo4j
Talia  Lowe

Talia Lowe

1626943080

Next.js Crash Course in 2021 #8: Deployment in Next.js

Learning How To Deploy your in Next.js

deploy next js to vercel, next js deploy custom server, deploy next js, next js production deployment, vercel continuous deployment

zeit now

----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/c/ImranSayedDev?sub_confirmation=1

*** Full Playlist ***
https://codeytek.com/courses/

*** Github repo ***
https://github.com/imranhsayed/nextjs-example

Please star my repo to support my work 🙏

*** Please nominate me for Github Star ***
https://stars.github.com/nominate/

******* Social Links ********

Please follow 🙏

Twitter - @codeytek

https://twitter.com/codeytek

Github - imranhsayed
https://github.com/imranhsayed

******* Other Playlist ******

==== REACT TUTORIALS ====
https://codeytek.com/course/react-tutorial-from-beginner-to-advanced-course/

==== REDUX TUTORIALS ====
https://codeytek.com/course/redux-tutorial-for-beginners-course/

==== REACT WITH WORDPRESS TUTORIALS ====
https://codeytek.com/course/headless-wordpress-react-course/

==== WEBPACK TUTORIALS ====
https://codeytek.com/course/webpack-tutorial-course/

#vercel #react #nextjs

Next.js Crash Course in 2021 #8: Deployment in Next.js
Dallas  Veum

Dallas Veum

1626830074

Set up a new Vue 3 project with Vite and Tailwind (Deploy to Vercel!)

Learn how to create a new Vue 3 project with Vite, install Tailwind, and deploy our project to Vercel! I’ll take you through every step from start to finish.

  • 0:00 - Introduction
  • 0:55 - Why Vite?
  • 1:25 - Create Vue/Vite Project
  • 2:14 - Why Tailwind?
  • 2:31 - Install Tailwind
  • 4:40 - Deploy to Vercel

#vue #vite #tailwind #tailwindcss #vercel

Set up a new Vue 3 project with Vite and Tailwind (Deploy to Vercel!)