首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CRA应用程序在生产构建后不运行吗?

CRA应用程序在生产构建后是可以运行的。CRA(Create React App)是一个用于快速搭建React应用程序的脚手架工具,它提供了一套默认的配置和开发环境,使得开发者可以更专注于业务逻辑的实现。

在使用CRA构建React应用程序时,开发者可以通过运行npm run build命令来生成生产环境所需的静态文件。该命令会将React应用程序的源代码进行打包、优化和压缩,生成一个用于部署的静态文件夹。

生成的生产构建文件可以通过将静态文件夹部署到服务器上来运行应用程序。可以使用各种服务器软件(如Nginx、Apache等)来托管静态文件,并通过配置服务器路由来确保正确的访问路径。

CRA应用程序在生产构建后的运行具有以下优势:

  1. 性能优化:生产构建会对代码进行优化和压缩,减小文件体积,提高加载速度和性能。
  2. 安全性增强:生产构建会移除开发环境中的调试工具和敏感信息,增强应用程序的安全性。
  3. 部署简便:生成的静态文件可以轻松地部署到各种服务器上,无需复杂的配置和依赖项。

CRA应用程序的生产构建适用于各种场景,包括但不限于:

  1. Web应用程序:可以构建各种类型的Web应用程序,如企业网站、电子商务平台、社交媒体应用等。
  2. 单页应用程序(SPA):适用于需要在前端进行路由和状态管理的单页应用程序。
  3. 静态网站:可以生成纯静态的网站,无需后端服务器支持。

腾讯云提供了一系列与云计算相关的产品,适用于CRA应用程序的部署和运行。其中,推荐的产品包括:

  1. 云服务器(CVM):提供弹性计算能力,可用于托管CRA应用程序的静态文件夹。
  2. 云存储(COS):提供高可靠、低成本的对象存储服务,可用于存储CRA应用程序的静态文件。
  3. 云网络(VPC):提供安全可靠的网络环境,可用于搭建与CRA应用程序相关的网络架构。

更多关于腾讯云产品的详细信息和介绍,请访问腾讯云官方网站:腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

快将你的 React 应用迁移到 Vite 吧,速度太快啦

生产构建时间,部署快速修复可能需要大约 10 到 20 分钟。 But, 时间就是金钱。 为什么 CRA 如此慢? CRA 使用 Webpack 来 bundle 代码。...我们可以迁移到 Vite,而不是使用 CRA 来创建 React App。Vite 是下一代前端工具,可以更快地构建应用程序。...Vite 通过将应用程序的模块分为两类:依赖项和源代码来改进开发服务器的启动时间。 依赖项大多是纯 JavaScript,开发过程中不会经常更改。...接下来,让我们也比较一下两者的生产构建时间。 CRA build 时间 VS Vite build 时间 CRA花了16.66秒来构建应用程序。让我们看看Vite的性能。...Vite 使用与 Rollup 相同的 bundle 方法进行生产构建,因为在生产中使用未捆绑的原生 ESM 会导致额外的 HTTP 请求。

1.3K20

我们如何使用 Next.js 将 React 加载时间缩短 70%

Causal 的前端是 2019 年用 Create React App(CRA构建的,它为我们提供了很好的服务——它只需要最小的初始设置,并允许快速迭代。...随着我们的客户规模和复杂性的增加,性能变得越来越受到关注,我们达到了 CRA 设计支持的极限。最重要的是,CRA 本身并不支持跨多页应用程序的路由分割,所以我们的页面加载时间慢得令人沮丧。...Next.js 是一个框架,带有构建工具和运行时库,用于创建丰富的 React 应用程序。...在这里,CRA 和 Next.js 有根本的区别。CRA构建输出只是静态文件,所以提供它相对简单。Next.js 的构建输出确实包括一些静态文件,但它也可能包括运行一个单独服务器的代码。...评估部署我们新的 Next.js 前端的选项时,我们确定了三种可能性: 不要对 Next.js 使用任何服务器端渲染,使用 next export 构建,并将输出与 CRA 的静态输出完全相同。

4.7K10
  • SPA和React: 并不总是需要服务器端渲染

    我已经使用文档列表中的所有“生产级React框架”构建应用程序,但我也花了多年时间构建只需要客户端功能的单页面应用程序(SPAs),一切正常。...SPA存在的问题 反复出现的一个问题是“spinner-geddon”;每次您导航到一个新的“页面”时,都会显示一个加载动画来指示正在请求数据,只有HTTP请求成功完成,页面才会用内容进行渲染。...有许多内部应用程序永远不会面向公众,也不需要使用更现代的React驱动SSR框架提供的任何功能。但是由于React文档不再推荐CRA,如果今天要构建SPA,您还可以使用什么呢?...从上图中您还可以看到,Vite不仅是一个构建React应用的好选择,它也适用于其他框架。 使用Vite的主要好处是什么? 简而言之,是打包。 开发应用程序时,代码被拆分成较小的模块。...只有在这个打包步骤完成,浏览器才会刷新,这反过来又允许开发者看到他们的更改。 随着应用程序的增长和越来越多的JavaScript被添加,打包器需要做越来越多的工作。

    13410

    React应用中实现Web推送通知

    默认情况下,Create-react-app CRA的工作方式是开发人员模式下不存在ServiceWorker,并且任何以前安装的sw都将被虚拟人替换。...const swFileName = process.env.NODE_ENV ==='生产' ?'...额外的步骤:等等,生产模式如何? 在这种情况下,Create React App会编译build文件夹中的文件,并在其中放置一个默认服务工作程序,其中包含对现代应用程序有用的东西。...如果我们决定保留它们并只添加我们的推送功能,则需要对构建过程进行一些修改。CRA中有用于服务人员构建的工作箱。而且,即使您的目的只是添加一些自定义代码,也没有内置的方法可以对其进行修改。...首先,添加一个新的depenendecy: yarn add cra-append-sw 之后,我们需要在package.json中扩展build-script,在其中添加一个新命令,该命令main进程之后执行

    3.1K30

    【前端部署第五篇】使用 docker 部署单页应用,挂载 nginx 配置文件并对其进行系列优化

    「前端部署」系列正在更新: 5/20 ---- 在上篇文章中,我们介绍了 Docker 中使用构建缓存与多阶段构建进行缓存优化。 但是部署单页应用时,仍然有一个问题,那就是客户端路由。...长期缓存 (Long Term Cache) CRA 应用中,./build/static 目录均由 webpack 构建产生,资源路径将会带有 hash 值。 $ tree ....构建资源的优化: 使用 terser 压缩 Javascript 资源 使用 cssnano 压缩 CSS 资源 使用 sharp/CDN 压缩 Image 资源或转化为 Webp 使用 webpack...传统的前端部署由维进行主导,「每次上线都要邮件通知维该项目前端的上线步骤」,由维完成,前端对部署的自由度较小。...而前端关于部署自由度的延长,体现在以下两个方面: 通过 Docker 对前端进行容器化,再也无需邮件通知维上线步骤 通过 Docker 与 nginx 配置文件对前端进行 nginx 的配置,一些细小琐碎但与项目强相关的配置无需维介入

    2K40

    【前端部署第七篇】将静态资源上传至 OSSCDN 并优化上传速度

    构建的资源全部上传到对象存储,然而「有些资源内容并未发生变更」,将会导致过多的上传时间。 冗余资源。「前端每改一行代码,便会生成一个新的资源,而旧资源将会在 OSS 不断堆积,占用额外体积。」...「对于构建含有 hash 的资源,对比文件名即可了解资源是否发生变更。」...删除 OSS 中冗余资源 在生产环境中,OSS 只需保留最后一次线上环境所依赖的资源。(多版本共存情况下除外) 此时可根据 OSS 中所有资源与最后一次构建生成的资源一一对比文件名,进行删除。...生产环境发布了多个版本的前端,如 AB 测试,toB 面向不同大客户的差异化开发与部署,此时可针对不同版本对应不同的 output.path 来解决。...小结 通过对 OSS 进行优化,OSS 篇基本完结。 接下来,如何将部署自动化完成呢,如何将应用使得可通过域名访问呢?

    3.1K40

    SPA 和 React:你并不总是需要服务器端渲染

    Create React App 曾经是构建 React 应用程序的首选方式(它只需要客户端路由和页面渲染)。...我曾经使用“生产级 React 框架”列表中的所有框架构建过应用,但是我也花了很多年的时间构建只需要客户端功能的 SPA(单页应用),而且一切运行良好。...一个反复出现的问题就是“无休无止的加载器(spinner-geddon)”,每当导航到一个新的“页面”时,都会出现一个加载器动画,表示正在加载数据,只有成功完成 HTTP 请求,页面才会充满内容。...但是,既然 React 文档不再推荐使用 CRA,那么如果你现在要构建 SPA,那还能使用什么呢?...只有在打包步骤完成,浏览器才会刷新,进而让开发人员真正看到自己的变更。 随着应用程序的发展,会有越来越多的 JavaScript 添加进来,打包的工作量也会越来越大。

    34530

    前端工程化之概念介绍

    」 3) 确定项目技术栈 可以采用React/Vue来构建视图 4) 构建工具 构建工具的主流选择还是 webpack增加相关的 webpack 配置文件: 开发环境/生产环境 5) 构建流程 安装与配置各种...复制重命名为 .gitignore,「public/index.html和src/index 为运行 react-scripts 的必要文件」 对应的目录结构如下: cra-template-[template-name...开发环境和生产环境下,对于 source map 功能的期望也有所不同。...开发环境中,要求构建速度快/质量高/便于提升开发效率,而不关注生成文件的大小和访问方式 在生产环境中,需要考虑是否需要提供线上Source Map/生成的文件大小/访问方式是否会对页面性能造成影响,最后才考虑质量和构建速度...整体要「快于」不带 eval- 的 SourceMapDevToolPlugin 质量最佳的配置下,eval-source-map 的再次构建速度要远快于其他几种 在生产环境下 通常不会开启再次构建

    74410

    【前端部署十四篇】结合 CI 与 docker 自动部署 Preview 功能分支环境

    prod:生产环境,线上供用户使用的环境, shanyue.tech 类似的地址。此时环境的面向对象主要是用户。 这里我们增加一个功能分支测试环境,对应于 feature 分支。...对不同分支根据分支名配置不同的 service 对每个 service 根据分支名配置响应的 labels 回忆之前关于 CI 的章节内容,我们构建服务器中,「可通过环境变量获取到当前仓库的当前分支」...Preview/Production ,我们希望可以看到 PR 的评论或者其它地方可以看到我们的部署地址。...CI 中配置 environment 为期望的部署地址,则可以每次部署成功,便可以看到其地址。...如此一来 根据分支名作为镜像的 Tag 构建镜像。

    87710

    【前端部署第十篇】CICD基础概念了解,并实现基于 docker 的自动部署

    (或者 Continuous Delivery,持续交付) CICD 与 git 集成在一起,可理解为服务器端的 git hooks: 当代码 push 到远程仓库,借助 WebHooks 对当前代码构建服务器...但是为了更好的 CICD,构建服务器会赋予控制部署服务集群的权限,「构建服务器中通过一条命令,即可将某个服务部署服务器集群中进行管理。」... CICD 中,构建服务器往往会做以下工作,这也是接下来几篇篇章的内容: 功能分支提交,通过 CICD 进行自动化测试、语法检查、npm 库风险审计等前端质量保障工程,「如未通过 CICD,则无法...Code Review,更无法合并到生产环境分支进行上线」 功能分支提交,通过 CICD 对当前分支代码构建独立镜像并「生成独立的分支环境地址」进行测试如对每一个功能分支生成一个可供测试的地址,一般是...基本功能介绍 文首提到 CICD 的主要意义: 「每当我们将前端代码更新到仓库,代码将会拉取仓库代码并自动部署到服务器。」

    2K20

    React 面试必知必会 Day8

    客户端,React 检测到预渲染的内容,并无缝地衔接该内容。 2. 如何在 React 中启用生产模式?...什么是 CRA 以及它的好处? create-react-app CLI 工具允许你快速创建和运行React应用程序,无需配置步骤。 让我们使用 CRA 创建 Todo 应用程序。...一个构建脚本,用于捆绑 JS、CSS 和图片,并提供哈希和源码图。 4. 安装中的生命周期方法的顺序是什么? 当一个组件的实例被创建并插入到 DOM 中时,生命周期方法按以下顺序被调用。... React v16 中,有哪些生命周期方法将被废弃? 以下生命周期方法将是不安全的编码做法,异步渲染中会出现更多问题。...新的静态的 getDerivedStateFromProps() 生命周期方法一个组件实例化以及重新渲染前被调用。

    2.4K40

    【原创】不想eject,还咋修改create-react-app的配置?

    一、先抛问题 许多刚开始接触create-react-app框架的同学,不免都会有个疑问:如何在执行eject操作的同时,修改create-react-app的配置。...今天胡哥就来带大家一起来看看这个问题~ 二、为啥建议执行eject 1. 执行eject产生了什么变化?...create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中, 执行yarn eject,会将webpack、babel等配置暴露在config目录下...三、有需求咋解决 实际开发中,我们还是需要更新webpack、babel的配置,比如: antd的按需加载; 配置css预处理器 - less; 设置alias、externals; 生产环境打包-去除...config-overrides.js文件 module.exports = {} 完成了基础配置,我们config-overrides.js中进行详细配置,解决我们上面的需求问题。

    2.9K40

    【前端部署第四篇】使用 Docker 构建缓存及多阶段构建优化单页应用

    包括 Docker、CICD 等内容,大纲图示如下: 大纲 「前端部署」系列正在更新: 4/20 ---- 部署完一个简单页面,此时对于 Docker 与服务部署也有了简单理解。...「CRA 是 /build 目录」。 以下,便是 cra 中获得静态资源的命令。...Dockerfile 本地将 CRA 应用跑起来,可通过以下步骤: $ yarn $ npm run build $ npx serve -s build 将命令通过以下几步翻译为一个 Dockerfile...构建时间优化: 构建缓存 我们注意到,一个前端项目的耗时时间主要集中两个命令: npm install (yarn) npm run build 本地环境中,如果没有新的 npm package 需要下载...「那 Docker 中是也可以做到这一点?」 Dockerfile 中,对于 ADD 指令来讲,如果「添加文件内容的 checksum 没有发生变化,则可以利用构建缓存」。

    1.6K20

    定制 create-react-app:如何制作自己的模版

    有很多包括 JavaScript 新人在内的开发者,一天天的简直是胡乱地创建 React 应用,所以 Facebook 的 CRA 团队才构建了 create-react-app 工具以使创建此类应用的过程更快更安全...开发者面对 eject 时的主要挑战一是无法再享受 CRA 之后的新特性了,二是团队内同步设置会非常低效。... packages 目录内,有一个叫做 react-scripts 的文件夹。该文件夹包含了用于构建、测试和启动你的应用的脚本。事实上,这就是我们能作出改进的地方,可以配置并增加新的脚本和模版。...改进配置 clone 目录代码编辑器中打开 react-scripts/scripts/init.js 文件。...总结 好的程序员会日常不断地打磨他们的工具以提高生产力。CRA 是一个快速创建 React 应用的利器。

    1.4K10

    React为什么不将Vite作为默认推荐?

    React文档中,对于构建新的React应用,首推的方式是CRA(create-react-app)。...「Theo」就在React文档仓库发起了一个PR[1],号召React文档不要再默认推荐CRA,而是应该将Vite作为构建应用的首选。...CRA的定位 既然众矢之的是CRA,那么首先我们需要明白CRAReact体系下的定位,再来看看Vite能否在这个定位下取代前者。 CRA诞生的时期(2016年),是SPA(单页应用)最火热的时期。...将当时的一些工程化最佳实践都封装在react-scripts包下,并抹平这些工具兼容的地方。...除了以上两点,随着CRA的走红,React团队还将他作为新特性的快速分发渠道,比如: Fast Refresh(针对React的热更新,不会丢失组件状态) Hooks推出的一系列lint规则 依托CRA

    1.3K10

    ,它只是换了个马甲而已,弥补了DevOps空心理论,让DevOps继续发展壮大

    不同的环境照搬别人的方法,可能平滑运行吗? 所以,采取某种方法的时候一定要根据自身实际来考虑、来剪裁、来调整以使其适应自身的环境和实际。DevOps本质是一种方法论。...平台工程的定义和能力构成 平台工程社区的发起人 Luca Galante platformengineering.org 对平台工程的描述(定义)是这样的: 平台工程是一门设计和构建工具链与工作流的学科...于前期对DevOps的错误认知和不重视自服务敏捷基础设施的建设,把DevOps方法论等同于去构建基础的研发运维支撑平台,让研发人员去做维但却没有基础设施的支撑和赋能,所以导致开发人员的心里落差,对DevOps...没有自服务敏捷基础设施的支撑,让研发人员去做维会使生产力达不到生产关系的要求。 DevOps是方法论,协调的是生产关系;平台工程追求的是工具赋能,是生产工具;生产工具体现着生产力。...所以平台工程是基础,构建新的生产工具,代表新的生产力,理论上应该先推行,以促进生产力的变革,从而促进生产关系的变革。否则,只会使先进的生产关系是无法适应的,使先进的生产关系水土不服。

    47410

    前端工程化_知识点精讲

    复制重命名为 .gitignore,「public/index.html和src/index 为运行 react-scripts 的必要文件」 对应的目录结构如下: cra-template-[template-name...开发环境和生产环境下,对于 source map 功能的期望也有所不同。...开发环境中,要求构建速度快/质量高/便于提升开发效率,而不关注生成文件的大小和访问方式 在生产环境中,需要考虑是否需要提供线上Source Map/生成的文件大小/访问方式是否会对页面性能造成影响,最后才考虑质量和构建速度...构建速度 不同环境下关注的速度也不同 开发环境下 一直开着 devServer,「再次构建的速度」对我们的效率影响远大于初次构建的速度 在生产环境下 通常不会开启再次构建,因此相比再次构建,「初次构建的速度更值得关注...」地构建一个依赖关系图dependency graph,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

    1.7K20

    【前端部署十一篇】通过 CICD 实践 Lint、Test、Performance 等前端质量保障工程

    当功能分支测试完毕没有问题,合并至主分支 master。主分支将会部署到生产环境。 当生产环境出现问题时,切除一条分支 hotfix-*,解决紧急 Bug。...功能分支提交(CI 阶段),进行 Build、Lint、Test、Preview 等,「如未通过 CICD,则无法 Preview,更无法合并到生产环境分支进行上线」 功能分支通过后(CI 阶段),合并到主分支... CI 操作保障代码质量的环节中,可确定以下时机: # 当功能分支代码 push 到远程仓库,进行 CI on: push: branches: - 'feature...但是 Lint 和 Test 都需要依赖安装 (Install),依赖安装结束再执行,此时就是串行的。 「而进行串行时,如果前一个任务失败,则下一个任务也无法继续。...长按识别二维码查看原文 标题:workflows/ci-parallel.yaml image.png Lint/Test 需要使用到 Install 阶段构建而成的 node_modules 目录

    1.2K20

    更骚的create-react-app开发环境配置craco

    背景 使用 CRA 脚手架创建的项目,如果想要修改编译配置,通常可能会选择 npm run eject 弹出配置魔改。...但是,eject 是不可逆操作,弹出配置,你将无法跟随官方的脚步去升级项目的 react-script 版本。...如果想要无 eject 重写 CRA 配置,目前成熟的是下面这几种方式 通过 CRA 官方支持的 --scripts-version 参数,创建项目时使用自己重写过的 react-scripts 包 使用...总结 确实能够 eject 弹出配置的情况下,能够自定义所有的 cra 构建配置,之前进行了详细的说明,有这方面的需求可以去看看(传送门)。...因此在后续的编码中,我们可以随便使用这两种方式构建自己的webpack配置。

    7.9K54
    领券