首页 > 其他分享 >如何在 Netlify 上手动部署 React 和 TypeScript 项目

如何在 Netlify 上手动部署 React 和 TypeScript 项目

时间:2024-04-19 09:11:07浏览次数:23  
标签:站点 TypeScript 项目 Netlify 手动 URL React 部署

在本教程中,我将教你如何使用 Vite 在 Netlify 上手动部署 React 和 TypeScript 项目。我将向你展示一些快速简单的步骤,让你的项目能够立即运行。

要跟着本教程操作,有几个先决条件:

  1. 一个现有的 React 和 TypeScript 项目,使用 Vite 构建,并且你想要部署它。
  2. Visual Studio Code(VSCode)编辑器或其他代码编辑器,比如 Sublime。
  3. 可选:你可以只使用命令行/终端,而不是你代码编辑器的内置终端。
  4. 一个已经登录的现有 Netlify 账户。

让我们开始我们的部署吧!

(本文视频讲解:java567.com)

期望的结果

你将会手动在 Netlify 上部署你的项目,重命名你在该平台上的网站,并且能够获得你项目的在线版本。

如何部署你的 React 和 TypeScript 项目

1. 在 VSCode 中打开你现有的项目

在你选择的代码编辑器中打开你的项目。

2. 构建项目

在 VSCode 中打开终端,使用以下代码来构建你的项目:

npm run build

这应该会在你的根目录下生成一个 dist 文件夹,其中包含你项目的被压缩版本。

fig-2-0图 2.0 在终端中运行项目,创建项目结构中的 dist 文件夹。

3. 将 Dist 文件夹拖放到 Netlify 中

在 Netlify 的团队概览中,点击“添加新站点”按钮。它应该有三个选项:

  1. 导入现有项目
  2. 从模板开始
  3. 手动部署

选择第三个选项手动部署。

fig-3-0图 3.0 点击“添加新站点”按钮会显示三个选择项。选择“手动部署”。

它应该会带你到下面图片所示的页面:

fig-3-1图 3.1 选择手动部署时的拖放视图。

点击页面并导航到你项目的文件路径。

将之前在项目中生成的 dist 文件夹上传到 Netlify。

fig-3-2图 3.2 导航到项目文件夹并将 dist 文件夹上传到 Netlify。

项目部署需要几秒钟或几分钟的时间。

一旦部署成功,你将看到一个类似下面的页面。默认情况下,它会给你的站点 URL 一个随机生成的子域名。例如,在我的情况下,它是 delightful-pie-bba293

fig-3-3图 3.3 部署成功。

你的站点名是 Netlify 域的子域名。

https://<你的站点名>.netlify.app

4. 重命名你的站点

点击左侧边栏中的“站点配置”。

在站点详细信息下的“站点信息”中,点击“更改站点名称”按钮。

fig-4-0图 4.0 查看站点配置下的站点详细信息。

这将弹出一个窗口来更改你的站点名称。

将你的站点名称更改为你喜欢的任何名称:

fig-4-1-1图 4.1 更改你站点的名称。

返回到站点概述,你可以在项目名称下方找到你站点的 URL。你的站点 URL 就在你项目名称的正下方。

figure-4-2图 4.2 站点概览中你可以找到你站点的 URL。

点击 URL 查看你的站点!

fig-4-3-1图 4.3 从新创建的 URL 查看我的站点。

结论

现在,你的项目已经有了在线版本,并且你可以在 Netlify 上手动部署它们。

为了添加自定义域名还有额外的步骤,但我们在本教程中不涉及。

这也让你在简历、作品集网站或其他地方更容易地引用你的项目。

感谢你阅读本文,祝你编码愉快!

标签:站点,TypeScript,项目,Netlify,手动,URL,React,部署
From: https://www.cnblogs.com/web-666/p/18145071

相关文章

  • REACT小练习
    react组件间props传递functionDetail({content,active}){return(<div><p>{content}</p><p>{active?'已激活':'未激活'}</p></div>)}functionArticle({title,de......
  • 1 React介绍
    一React介绍1、React是渲染用户界面(UI)的JavaScript库2、React完全基于JavaScript用JavaScript可以生成结构、使用样式及控制逻辑3、学习路径JSX-》组件-》Hooks-》状态管理-》路由二开发环境搭建1、创建项目npxcreate-react-appreact-basicReact脚手架......
  • React初次使用
    大概过了一下JS,今天再试试React一、React核心语法1、脚手架创建一个项目npxcreate-react-appdemo2、插值functionApp(){constdivContent='标签内容'constdivTitle='标签标题'return(<divclassName="App"><headerclassName="A......
  • react-native-camera 安装
    npmi react-native-camera--save或yarnadd react-native-camera 在android/app/build.gradle中添加:missingDimensionStrategy'react-native-camera','general'implementationproject(path:':react-native-camera') 在MainApplicatio......
  • 鸿蒙开发TypeScript语言:【函数】
    函数是一组一起执行一个任务的语句。您可以把代码划分到不同的函数中。如何划分代码到不同的函数中是由您来决定的,但在逻辑上,划分通常是根据每个函数执行一个特定的任务来进行的。函数声明告诉编译器函数的名称、返回类型和参数。函数定义提供了函数的实际主体。函数定义函数......
  • react 的拖动面板SplitPane的使用
    1、我刚开始,是准备使用npminstallreact-split-pane来引入的。但是引入的过程报错了npmERR!codeERESOLVEnpmERR!ERESOLVEunabletoresolvedependencytreenpmERR!npmERR!Whileresolving:[email protected]!Found:[email protected]!n......
  • react 使用effect 的报错
    1、像这种,根据someId值的改变,每次调用一次useEffect的。如果在useEffect加上async则会出现报错 正确的做法,则是去掉useEffect上的async useEffect(()=>{asyncfunctionfetchData(){try{//在这里进行异步操作constresponse=awaitMyAPI.g......
  • React 简单登录平台Demo(0):环境配置
    目录前言Create-react-app环境配置文件路径添加组件添加tailWindcss文件tailwind.config.js添加compilecss目标常见错误添加路由简单路由添加复杂路由添加LoginPageMainPagerouter.js总结前言这次用React简单写一个登录网页的DemoCreate-react-app环境配置create-react-app......
  • Typescript有哪些类型
    基础类型:number:用于表示数字string:用于表示文本数据boolean:用于表示逻辑值,即true或falsesymbol:用于表示唯一的、不可变的值null和undefined:用于表示空值或未定义的值void:通常用于表示没有返回值的函数any:用于表示任意JavaScript值。使用any会失去TypeScript的......
  • TypeScript 中 Type 'typeof globalThis' has no index signature 错误解决
    TypeScript中Type'typeofglobalThis'hasnoindexsignature错误解决当我们尝试访问 global 对象上不存在的属性时,会出现错误“Elementimplicitlyhasan'any'typebecausetype'typeofglobalThis'hasnoindexsignature”。要解决此错误,需要扩展全局对象并为必......