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. shell脚本的if判断语句

    if条件判断语句 if (表达式) #if ( Variable in Array ) 语句1 else 语句2 fi 1.测试数字大小 #!/bin/sh NUM=100 if (( $NUM &g ...

  2. LRJ入门经典-0905邮票和信封305

    原题 LRJ入门经典-0905邮票和信封305 难度级别:B: 运行时间限制:1000ms: 运行空间限制:256000KB: 代码长度限制:2000000B 试题描述 假定一张信封最多贴5张邮票,如 ...

  3. ASP.NET通过JavaScript实现Button 的Enabled=false

    正常代码控制无法满足需求,所以记录一下方法: <input id="Button5" onclick=" CX()" type="button& ...

  4. 使用Linux遇到的一些问题和解决方案

    1.如何在重装系统或换机器以后继续使用以前用过的thunderbird邮件 执行命令thunderbird -ProfileManager以后会打开一个配置用户界面. 在里面添加一个新的配置,然后选择 ...

  5. 解决QML开发中ComboBox中一个已选择项没有清除的问题

    解决QML开发中ComboBox中一个已选择项没有清除的问题 近期使用QML开发一个项目.须要使用ComboBox进行显示.当进行一个操作时,须要向ComboBox加入一个元素,当进行另外一个操作时. ...

  6. POJ 2039 Floyd

    句意理解题 解释输入好啦: 第一行n个数 m场电影 随后m行 每行的第一个数 代表 有k奶牛在这个电影中出现过 随后k个数 是奶牛的编号 如果两头奶牛在同一个电影中出现过 相互度为1 奶牛们的相互度可 ...

  7. POJ 3049 DFS

    思路:暴搜 //By SiriusRen #include <cstdio> #include <iostream> #include <algorithm> us ...

  8. Lucene 定义

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  9. #学习笔记#——JavaScript 数组部分编程(七)

    24.柯里化 首先想解释一下,“柯里化”的意思, [在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结 ...

  10. Kinect 开发 —— 常见手势识别(上)

    悬浮按钮 (Hover Button) 悬浮按钮通过将鼠标点击换成悬浮然后等待(hover-and-wait)动作,解决了不小心点击的问题.当光标位于按钮之上时,意味着用户通过将光标悬浮在按钮上一段时 ...