In this lesson, we’ll make a few small changes to our scripts and add some environment variables that will be used at build time to get our application ready to be deployed to a production environment using the now service. Once properly configured, we’ll use the now CLI and publish our application to a production server.

React support .env file by default, add a .env file in the root folder:

REACT_APP_BASE_URL=http://localhost:9001/todos

which just holding our api configuration.

Also create a .env.production file:

REACT_APP_BASE_URL=./todos

Because we want json-server and our ui using the same domain & port, so here we can just use relative path.

To use the variable in .env, we can do:

const baseUrl = process.env.REACT_APP_BASE_URL;

export const getTodos = async () => {
return await fetch(baseUrl)
.then((response) => response.json());
};

Update package.json:

    "start": "json-server --static ./build db.json",
"dev": "react-scripts start",

We change the original "start" to "dev".

Because after "build", there will be a "build" folder, so tell json-server to server the build folder and use db.json file a db.

After everything set up, just run:

now

[React] Configure a React & Redux Application For Production Deployment and Deploy to Now的更多相关文章

  1. 如何优雅地在React项目中使用Redux

    前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...

  2. 优雅的在React项目中使用Redux

    概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux react-redux React插件,作用:方便在 ...

  3. 如何在非 React 项目中使用 Redux

    本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...

  4. 【前端】react学习阶段总结,学习react、react-router与redux的这些事儿

    前言 借用阮一峰的一句话:真正学会 React 是一个漫长的过程. 这句话在我接触react深入以后,更有感触了.整个react体系都是全新的,最初做简单的应用,仅仅使用react-tools打包js ...

  5. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  6. 前端笔记之React(五)Redux深入浅出

    一.Redux整体感知 Redux是JavaScript状态管理容器,提供了可被预测状态的状态管理容器.来自于Flux思想,Facebook基于Flux思想,在2015年推出Redux库. 中文网站: ...

  7. 【React】360- 完全理解 redux(从零实现一个 redux)

    点击上方"前端自习课"关注,学习起来~ 前言 记得开始接触 react 技术栈的时候,最难理解的地方就是 redux.全是新名词:reducer.store.dispatch.mi ...

  8. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  9. react,react-router,redux+react-redux 构建一个React Demo

    创建初始化应用 加速我们的npm. npm install -g cnpm --registry=https://registry.npm.taobao.org 利用create-react-app ...

随机推荐

  1. zip-tar

    1.zip 制作压缩文件 (1)格式:zip 压缩文件名 文件1 文件2... zip文件不能用cat查看 (2)选项: -r:用来压缩目录 2.unzip 解压缩文件 (1)格式:unzip 压缩文 ...

  2. 分享到twitter,facebook,google,yahoo,linkedined,msn

    编辑器加载中... 1. 分享到twitter的代码” title=”分享到 Twitter” target=”_blank” rel=”nofollow”>Twitter 2. 分享到Face ...

  3. 什么是string interning(字符串驻留)以及python中字符串的intern机制

    Incomputer science, string interning is a method of storing only onecopy of each distinct string val ...

  4. element-ui一些注意点:

    1.change ($event,“你要传递的其他值”),使用el-select组件时,想传递多个值. 或者 在el-option上的value属性上传递对象 eg: :value="{'c ...

  5. 【DRF频率】

    目录 使用自带的频率限制类 使用自定义的频率限制类 开发平台的API接口调用需要限制其频率,以节约服务器资源和避免恶意的频繁调用. DRF就为我们提供了一些频率限制的方法. DRF中的版本.认证.权限 ...

  6. 【DRF版本】

    目录 使用内置的URLPathVersioning类 使用自定义的版本控制类 首先,我们开发的项目会有多个版本. 其次,我们的项目版本会随着更新越来越多,我们不可能因出了新版本就不维护旧版本了. 那么 ...

  7. 【重构】C# VS 配置引用程序集的路径(分离exe和dll从指定路径调用)

    原文:[重构]C# VS 配置引用程序集的路径(分离exe和dll从指定路径调用) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/CocoWu892 ...

  8. JNDI学习总结(3)——Tomcat下使用C3P0配置JNDI数据源

    一.C3P0下载 C3P0下载地址:http://sourceforge.net/projects/c3p0/files/?source=navbar 下载完成之后得到一个压缩包. 二.使用C3P0配 ...

  9. RK3066 实现LED闪烁的代码分析

    实现LED灯的闪烁,须要在驱动里加入一个定时器函数,详细实现涉及到了LED GPIO驱动.用户空间程序调用驱动程序. 1.首先来看LED设备驱动注冊过程,代码位于../kernel/drivers/l ...

  10. linux下uboot kernel操作cpu寄存器

    大多数的内核里面都有会对GPIO的操作,而且内核里面对GPIO进行配置也很方便,要什么功能就配置成什么就可以了. 还有一些寄存器是内核没有配置到的,但是我们要操作怎么办,内核里面也定义了相关的接口函数 ...