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

在本教程中,我将教你如何使用 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 上手动部署它们。

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/704.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

bug(警告):[vue-router] Duplicate named routes definition: …

查看警告&#xff1a;[vue-router] Duplicate named routes definition——翻译[vue-router]重复命名路由定义 小编劝诫&#xff1a;当我们在开发过程中警告也一定不要忽略&#xff0c;虽然你在本地跑代码时这些警告影响项目的正常运行&#xff0c;但是会让你产生误区&#xff…

OSPGF高级实验综合

1.实验拓扑 二.实验要求 1、R4为ISP&#xff0c;其上只配置IP地址&#xff1b;R4与其他所直连设备间均使用公有IP&#xff1b; 2、R3-R5、R6、R7为MGRE环境&#xff0c;R3为中心站点&#xff1b; 3、整个OSPF环境IP基于172.16.0.0/16划分&#xff1b;除了R12有两个环回&#x…

深入理解JAVA垃圾收集器CMS,G1工作流程原理 GC流程图 什么社会触发Minor GC?触发MinorGC过程。Full GC 过程。

java CMS&#xff0c;G1垃圾收集器工作流程原理浅析 JVM内存空间基础知识点&#xff08;基于JDk1.8&#xff09; 1.方法区&#xff1a;逻辑概念&#xff0c;元空间&#xff0c;方法区主要用于存储类的信息、常量池、方法数据、方法代码等。方法区逻辑上属于堆的一部分&#xf…

java实现chatGPT SDK

搭建一个 ChatGPT-SDK 组件工程&#xff0c;专门用于封装对 OpenAI 接口的使用。由于 OpenAI 接口本身较多&#xff0c;并有各类配置的设置&#xff0c;所以开发一个共用的 SDK 组件&#xff0c;更合适我们在各类工程中扩展使用 整个流程为&#xff1a;以会话模型为出口&#x…

C++笔试强训day3

目录 1.简写单词 2.dd爱框框 3.除2&#xff01; 1.简写单词 链接 我的思路超级简单&#xff0c;就是将输入的每个string存入vector&#xff0c;然后遍历每个string的第一个元素&#xff0c;如果为小写字母&#xff0c;就-32存入&#xff0c;若为大写&#xff0c;则直接存入。…

Docker in Docker的原理与实战

Docker in Docker&#xff08;简称DinD&#xff09;是一种在Docker容器内部运行另一个Docker实例的技术。这种技术允许用户在一个隔离的Docker容器中创建、管理和运行其他Docker容器&#xff0c;从而提供了更灵活和可控的部署选项。以下是DinD的主要特点&#xff1a; 隔离性&am…

Maven实战—搭建微服务 Maven 工程架构

需求案例&#xff1a;搭建一个电商平台项目&#xff0c;该平台包括用户服务、订单服务、通用工具模块等。 项目架构&#xff1a; 用户服务&#xff1a;负责处理用户相关的逻辑&#xff0c;例如用户信息的管理、用户注册、登录等。订单服务&#xff1a;负责处理订单相关的逻辑…

使用示例解释.NET中的Mocking是什么?

让我们踏上探索.NET软件开发中Mocking概念的旅程&#xff0c;让我们深入了解Mocking是多么简单易懂、易于访问。请与我一起穿越这个主题&#xff0c;我将涵盖以下内容&#xff1a; 理解Mocking&#xff1a;为何它对于构建强大的测试策略至关重要。探索一些最常见的Mocking库&a…

Ansible组件说明

1.Ansible Inventory 工作当中有不同的业务主机&#xff0c;我们需要在把这些机器信息存放在inventory里面&#xff0c;ansible默认的inventory的文件是/etc/ansible/hosts&#xff0c;也可以通过ANSIBLE_HOSTS环境变量来指定或者运行ansible和ansible-playbook的时候用-i参数临…

视频教程下载:用ChatGPT玩转海外抖音TikTok

CHATGPT for TikTok是一门前沿课程&#xff0c;旨在帮助您充分发挥TikTok广告活动的全部潜力。随着数字营销的爆炸性增长&#xff0c;企业需要使用先进的工具来保持竞争优势。在这门课程中&#xff0c;您将学习如何利用CHATGPT——一种先进的人工智能工具——来创建与目标受众产…

有没有手机上使用的库存软件

库存软件是一种仓库的信息管理系统&#xff0c;它主要针对出库与入库这些数据进行管理&#xff0c;传统的库存管理都是在电脑上安装一个专门的数据库管理系统进行管理&#xff0c;这也是一种比较成熟的管理方式&#xff0c;那么有没有手机上使用的库存软件。 手机上使用的库存软…

k8s配置configmap指定到容器的指定文件

我们需要将名称为walletkey.properties的文件做成configmap&#xff0c;然后将walletkey.properties文件单独挂载出来到/data/walletkey.properties&#xff0c;且不能覆盖/data目录&#xff0c;具体如下 1、创建configmap configmap文件内容 其中walletkey.properties: >-引…

python语言零基础入门——注释、print()函数、input()函数

目录 一、注释 1.块注释 2.行内注释 3.多行注释 二、打印变量 1.print()函数&#xff1a;输出/打印指定内容 2.input()函数&#xff1a;输入指定内容 三、编程题&#xff1a;个人名片 一、注释 1.块注释 以#开始&#xff0c;直到本行结束都是注释为了保证代码的可读性…

科技的崛起:国内机器视觉蓬勃发展

文 | BFT机器人 在工业4.0的浪潮下&#xff0c;随着科技的蓬勃发展&#xff0c;机器视觉逐渐走入大众视野&#xff0c;机器视觉产品的普及范围也越来越广。 大家知道机器视觉的由来吗&#xff1f; 机器视觉的由来可以追溯到20世纪70年代&#xff0c;美国麻省理工学院&#xff…

机器学习鸢尾花各种模型准确率对比

流程 获取数据集导入需要的包读取数据划分训练集和测试集调用各种模型比较准确率 获取数据集 链接&#xff1a;https://pan.baidu.com/s/1RzZyXsaiJB3e611itF466Q?pwdj484 提取码&#xff1a;j484 --来自百度网盘超级会员V1的分享导入需要的包 import pandas as pd impo…

华为机考入门python3--(17)牛客17- 坐标移动

分类&#xff1a;字符串 知识点&#xff1a; 正则匹配 re.match(pattern, move) 格式字符串&#xff0c;可以在字符串中直接引用变量 f"{x},{y}" 题目来自【牛客】 import re def is_valid_coordinate(move): # 使用正则表达式验证移动是否合法 # ^: …

施耐德 PLC 及模块 ModbusTCP 通信配置方法

1. 通过【I/O扫描器】服务进行读写 相关文档&#xff1a;各模块说明书仅 NOE 网卡模块、部分 CPU 自带的网口支持 优点&#xff1a;不需要额外编程&#xff0c;系统自动周期型读写数据缺点&#xff1a;扫描周期不定&#xff0c;程序无法控制数据刷新的时序 2. 通过内部程序…

java扩展jmeter依赖

前置条件 创建一个maven项目&#xff0c; 引入依赖 <dependency><groupId>org.apache.jmeter</groupId><artifactId>ApacheJMeter_core</artifactId><version>3.2</version> </dependency> <dependency><groupId&g…

NIO学习

文章目录 前言一、主要模块二、使用步骤1.服务器端2.客户端 三、NIO零拷贝(推荐)四、NIO另一种copy总结 前言 NIO是JDK1.4版本带来的功能,区别于以往的BIO编程,同步非阻塞极大的节省资源开销&#xff0c;避免了线程切换和上下文切换带来的资源浪费。 一、主要模块 Selector&a…

【Linux学习】Linux编辑器-vim使用

这里写目录标题 1. &#x1f320;vim的基本概念&#x1f320;2. vim的基本操作&#x1f320;3.vim异常处理&#x1f320;4. vim正常模式的相关命令&#x1f320;5. vim末&#xff08;底&#xff09;行模式相关命令 vi/vim都是多模式编辑器&#xff0c;不同的是vim是vi的升级版本…