diff --git a/Lesson2/README.md b/Lesson2/README.md new file mode 100644 index 000000000..1fdc5b30b --- /dev/null +++ b/Lesson2/README.md @@ -0,0 +1,16 @@ +## 硅谷live以太坊智能合约频道官方地址 + +### 第二课《智能合约设计进阶-多员工薪酬系统》 + +目录结构 +
| +
|--orgin 课程初始代码 +
| +
|--assignment 课程作业提交代码 +
+### 本节知识点 +第2课:智能合约设计进阶-多员工薪酬系统 +- 动态静态数组的不同 +- 函数输入参数检查 revert +- 循环与遍历的安全性 +- 程序运行错误检查和容错:assert与require diff --git a/Lesson2/assignment/README.md b/Lesson2/assignment/README.md new file mode 100644 index 000000000..a1fa2d047 --- /dev/null +++ b/Lesson2/assignment/README.md @@ -0,0 +1,10 @@ +## 硅谷live以太坊智能合约 第二课作业 +这里是同学提交作业的目录 + +### 第二课:课后作业 +完成今天的智能合约添加100ETH到合约中 +- 加入十个员工,每个员工的薪水都是1ETH +每次加入一个员工后调用calculateRunway这个函数,并且记录消耗的gas是多少?Gas变化么?如果有 为什么? +- 如何优化calculateRunway这个函数来减少gas的消耗? +提交:智能合约代码,gas变化的记录,calculateRunway函数的优化 + diff --git a/Lesson2/assignment/yours.sol b/Lesson2/assignment/yours.sol new file mode 100644 index 000000000..dfdb2c486 --- /dev/null +++ b/Lesson2/assignment/yours.sol @@ -0,0 +1 @@ +/*作业请提交在这个目录下*/ diff --git a/Lesson2/orgin/README.md b/Lesson2/orgin/README.md new file mode 100644 index 000000000..0309d947c --- /dev/null +++ b/Lesson2/orgin/README.md @@ -0,0 +1,3 @@ +## 硅谷live以太坊智能合约 第二课《智能合约设计进阶-多员工薪酬系统》 + +这里是每一课的初始代码,有需要的同学可以参考 diff --git a/Lesson2/orgin/payroll.sol b/Lesson2/orgin/payroll.sol new file mode 100644 index 000000000..62e380e4c --- /dev/null +++ b/Lesson2/orgin/payroll.sol @@ -0,0 +1,50 @@ +pragma solidity ^0.4.14; + +contract Payroll { + struct Employee { + address id; + uint salary; + uint lastPayday; + } + + uint constant payDuration = 10 seconds; + + address owner; + Employee[] employees; + + function Payroll() { + owner = msg.sender; + } + + function _partialPaid(Employee employee) private { + } + + function _findEmployee(address employeeId) private returns (Employee, uint) { + } + + function addEmployee(address employeeId, uint salary) { + } + + function removeEmployee(address employeeId) { + } + + function updateEmployee(address employeeId, uint salary) { + } + + function addFund() payable returns (uint) { + } + + function calculateRunway() returns (uint) { + uint totalSalary = 0; + for (uint i = 0; i < employees.length; i++) { + totalSalary += employees[i].salary; + } + return this.balance / totalSalary; + } + + function hasEnoughFund() returns (bool) { + } + + function getPaid() { + } +} diff --git a/Lesson3/README.md b/Lesson3/README.md new file mode 100644 index 000000000..ba26ced65 --- /dev/null +++ b/Lesson3/README.md @@ -0,0 +1,16 @@ +## 硅谷live以太坊智能合约频道官方地址 + +### 第三课《智能合约后端优化和产品化》 + +目录结构 +
| +
|--orgin 课程初始代码 +
| +
|--assignment 课程作业提交代码 +
+### 本节知识点 +第3课:智能合约后端优化和产品化 +- 如何通过数据结构优化降低合约执行成本 +- 合约的继承 +- 巧用modifier +- 以太坊函数库的使用和基本介绍 diff --git a/Lesson3/assignment/README.md b/Lesson3/assignment/README.md new file mode 100644 index 000000000..01011eb46 --- /dev/null +++ b/Lesson3/assignment/README.md @@ -0,0 +1,14 @@ +## 硅谷live以太坊智能合约 第三课作业 +这里是同学提交作业的目录 + +### 第三课:课后作业 +- 第一题:完成今天所开发的合约产品化内容,使用Remix调用每一个函数,提交函数调用截图 +- 第二题:增加 changePaymentAddress 函数,更改员工的薪水支付地址,思考一下能否使用modifier整合某个功能 +- 第三题(加分题):自学C3 Linearization, 求以下 contract Z 的继承线 +- contract O +- contract A is O +- contract B is O +- contract C is O +- contract K1 is A, B +- contract K2 is A, C +- contract Z is K1, K2 diff --git a/Lesson3/assignment/yours.sol b/Lesson3/assignment/yours.sol new file mode 100644 index 000000000..dfdb2c486 --- /dev/null +++ b/Lesson3/assignment/yours.sol @@ -0,0 +1 @@ +/*作业请提交在这个目录下*/ diff --git a/Lesson3/orgin/README.md b/Lesson3/orgin/README.md new file mode 100644 index 000000000..6106ea195 --- /dev/null +++ b/Lesson3/orgin/README.md @@ -0,0 +1,3 @@ +## 硅谷live以太坊智能合约 第三课 + +这里是每一课的初始代码,有需要的同学可以参考 diff --git a/Lesson3/orgin/payroll.sol b/Lesson3/orgin/payroll.sol new file mode 100644 index 000000000..e69de29bb diff --git a/Lesson4/README.md b/Lesson4/README.md new file mode 100644 index 000000000..34bf0bb82 --- /dev/null +++ b/Lesson4/README.md @@ -0,0 +1,16 @@ +## 硅谷live以太坊智能合约频道官方地址 + +### 第四课《使用Truffle架构进行前后端交互,测试,部署》 + +目录结构 +
| +
|--orgin 课程初始代码 +
| +
|--assignment 课程作业提交代码 +
+### 本节知识点 +第4课:使用Truffle架构进行前后端交互,测试,部署 +- 为什么要用Truffle,Truffle的基本概念 +- Truffle 的command line 功能 +- 初始化项目与Truffle项目目录结构 +- 编译部署合约到testrpc diff --git a/Lesson4/assignment/README.md b/Lesson4/assignment/README.md new file mode 100644 index 000000000..871e6be04 --- /dev/null +++ b/Lesson4/assignment/README.md @@ -0,0 +1,12 @@ +## 硅谷live以太坊智能合约 第四课作业 +这里是同学提交作业的目录 + +### 第四课:课后作业 +- 将第三课完成的payroll.sol程序导入truffle工程 +- 在test文件夹中,写出对如下两个函数的单元测试: +- function addEmployee(address employeeId, uint salary) onlyOwner +- function removeEmployee(address employeeId) onlyOwner employeeExist(employeeId) +- 思考一下我们如何能覆盖所有的测试路径,包括函数异常的捕捉 +- (加分题,选作) +- 写出对以下函数的基于solidity或javascript的单元测试 function getPaid() employeeExist(msg.sender) +- Hint:思考如何对timestamp进行修改,是否需要对所测试的合约进行修改来达到测试的目的? diff --git a/Lesson4/assignment/yours.sol b/Lesson4/assignment/yours.sol new file mode 100644 index 000000000..dfdb2c486 --- /dev/null +++ b/Lesson4/assignment/yours.sol @@ -0,0 +1 @@ +/*作业请提交在这个目录下*/ diff --git a/Lesson4/orgin/README.md b/Lesson4/orgin/README.md new file mode 100644 index 000000000..c27ba052f --- /dev/null +++ b/Lesson4/orgin/README.md @@ -0,0 +1,3 @@ +## 硅谷live以太坊智能合约 第四课 + +这里是每一课的初始代码,有需要的同学可以参考 diff --git a/Lesson4/orgin/payroll.sol b/Lesson4/orgin/payroll.sol new file mode 100644 index 000000000..8b1378917 --- /dev/null +++ b/Lesson4/orgin/payroll.sol @@ -0,0 +1 @@ + diff --git a/Lesson5/README.md b/Lesson5/README.md new file mode 100644 index 000000000..0d3ed1d1e --- /dev/null +++ b/Lesson5/README.md @@ -0,0 +1,13 @@ +## 硅谷live以太坊智能合约频道官方地址 + +### 第五课 + +目录结构 +
| +
|--orgin 课程初始代码 +
| +
|--assignment 课程作业提交代码 +
+ +### 本节知识点 + diff --git a/Lesson5/assignment/README.md b/Lesson5/assignment/README.md new file mode 100644 index 000000000..5661cd368 --- /dev/null +++ b/Lesson5/assignment/README.md @@ -0,0 +1,2 @@ +## 硅谷live以太坊智能合约 第五课作业 +这里是同学提交作业的目录 diff --git a/Lesson5/assignment/yours.sol b/Lesson5/assignment/yours.sol new file mode 100644 index 000000000..dfdb2c486 --- /dev/null +++ b/Lesson5/assignment/yours.sol @@ -0,0 +1 @@ +/*作业请提交在这个目录下*/ diff --git a/Lesson5/orgin/LICENSE b/Lesson5/orgin/LICENSE new file mode 100644 index 000000000..8dada3eda --- /dev/null +++ b/Lesson5/orgin/LICENSE @@ -0,0 +1,201 @@ + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "{}" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright {yyyy} {name of copyright owner} + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. diff --git a/Lesson5/orgin/README.md b/Lesson5/orgin/README.md new file mode 100644 index 000000000..7c98c0387 --- /dev/null +++ b/Lesson5/orgin/README.md @@ -0,0 +1,13 @@ +# payroll + +A payroll system developed with React and Solidty for Ethereum Blockchain platform. + +## Get Started + +1. Install dependencies `npm install -g truffle ethereumjs-testrpc` +1. Install [Metamask](https://metamask.io/) +1. Run `testrpc` +1. Add first account in testrpc to Metamask by importing private key +1. Run `truffle compile` in the project directory +1. `truffle migrate` +1. `npm run start` diff --git a/Lesson5/orgin/box-img-lg.png b/Lesson5/orgin/box-img-lg.png new file mode 100644 index 000000000..60c19962a Binary files /dev/null and b/Lesson5/orgin/box-img-lg.png differ diff --git a/Lesson5/orgin/box-img-sm.png b/Lesson5/orgin/box-img-sm.png new file mode 100644 index 000000000..466e7097e Binary files /dev/null and b/Lesson5/orgin/box-img-sm.png differ diff --git a/Lesson5/orgin/config/env.js b/Lesson5/orgin/config/env.js new file mode 100644 index 000000000..5d0ab7b79 --- /dev/null +++ b/Lesson5/orgin/config/env.js @@ -0,0 +1,28 @@ +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in Webpack configuration. + +var REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + var processEnv = Object + .keys(process.env) + .filter(key => REACT_APP.test(key)) + .reduce((env, key) => { + env[key] = JSON.stringify(process.env[key]); + return env; + }, { + // Useful for determining whether we’re running in production mode. + // Most importantly, it switches React into the correct mode. + 'NODE_ENV': JSON.stringify( + process.env.NODE_ENV || 'development' + ), + // Useful for resolving the correct path to static assets in `public`. + // For example, . + // This should only be used as an escape hatch. Normally you would put + // images into the `src` and `import` them in code to get their paths. + 'PUBLIC_URL': JSON.stringify(publicUrl) + }); + return {'process.env': processEnv}; +} + +module.exports = getClientEnvironment; diff --git a/Lesson5/orgin/config/jest/cssTransform.js b/Lesson5/orgin/config/jest/cssTransform.js new file mode 100644 index 000000000..aa17d127a --- /dev/null +++ b/Lesson5/orgin/config/jest/cssTransform.js @@ -0,0 +1,12 @@ +// This is a custom Jest transformer turning style imports into empty objects. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process() { + return 'module.exports = {};'; + }, + getCacheKey(fileData, filename) { + // The output is always the same. + return 'cssTransform'; + }, +}; diff --git a/Lesson5/orgin/config/jest/fileTransform.js b/Lesson5/orgin/config/jest/fileTransform.js new file mode 100644 index 000000000..927eb305a --- /dev/null +++ b/Lesson5/orgin/config/jest/fileTransform.js @@ -0,0 +1,10 @@ +const path = require('path'); + +// This is a custom Jest transformer turning file imports into filenames. +// http://facebook.github.io/jest/docs/tutorial-webpack.html + +module.exports = { + process(src, filename) { + return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; + }, +}; diff --git a/Lesson5/orgin/config/paths.js b/Lesson5/orgin/config/paths.js new file mode 100644 index 000000000..96c3dfb11 --- /dev/null +++ b/Lesson5/orgin/config/paths.js @@ -0,0 +1,46 @@ +var path = require('path'); +var fs = require('fs'); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebookincubator/create-react-app/issues/637 +var appDirectory = fs.realpathSync(process.cwd()); +function resolveApp(relativePath) { + return path.resolve(appDirectory, relativePath); +} + +// We support resolving modules according to `NODE_PATH`. +// This lets you use absolute paths in imports inside large monorepos: +// https://github.com/facebookincubator/create-react-app/issues/253. + +// It works similar to `NODE_PATH` in Node itself: +// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders + +// We will export `nodePaths` as an array of absolute paths. +// It will then be used by Webpack configs. +// Jest doesn’t need this because it already handles `NODE_PATH` out of the box. + +// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. +// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. +// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 + +var nodePaths = (process.env.NODE_PATH || '') + .split(process.platform === 'win32' ? ';' : ':') + .filter(Boolean) + .filter(folder => !path.isAbsolute(folder)) + .map(resolveApp); + +// config after eject: we're in ./config/ +module.exports = { + // Changed from build to build_webpack so smart contract compilations are not overwritten. + appBuild: resolveApp('build_webpack'), + appPublic: resolveApp('public'), + appHtml: resolveApp('public/index.html'), + appIndexJs: resolveApp('src/index.js'), + appPackageJson: resolveApp('package.json'), + appSrc: resolveApp('src'), + yarnLockFile: resolveApp('yarn.lock'), + testsSetup: resolveApp('src/setupTests.js'), + appNodeModules: resolveApp('node_modules'), + ownNodeModules: resolveApp('node_modules'), + nodePaths: nodePaths +}; diff --git a/Lesson5/orgin/config/polyfills.js b/Lesson5/orgin/config/polyfills.js new file mode 100644 index 000000000..7e601502b --- /dev/null +++ b/Lesson5/orgin/config/polyfills.js @@ -0,0 +1,14 @@ +if (typeof Promise === 'undefined') { + // Rejection tracking prevents a common issue where React gets into an + // inconsistent state due to an error, but it gets swallowed by a Promise, + // and the user has no idea what causes React's erratic future behavior. + require('promise/lib/rejection-tracking').enable(); + window.Promise = require('promise/lib/es6-extensions.js'); +} + +// fetch() polyfill for making API calls. +require('whatwg-fetch'); + +// Object.assign() is commonly used with React. +// It will use the native implementation if it's present and isn't buggy. +Object.assign = require('object-assign'); diff --git a/Lesson5/orgin/config/webpack.config.dev.js b/Lesson5/orgin/config/webpack.config.dev.js new file mode 100644 index 000000000..821743a2e --- /dev/null +++ b/Lesson5/orgin/config/webpack.config.dev.js @@ -0,0 +1,242 @@ +var autoprefixer = require('autoprefixer'); +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); +var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); +var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); +var getClientEnvironment = require('./env'); +var paths = require('./paths'); + + + +// Webpack uses `publicPath` to determine where the app is being served from. +// In development, we always serve from the root. This makes config easier. +var publicPath = '/'; +// `publicUrl` is just like `publicPath`, but we will provide it to our app +// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript. +// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz. +var publicUrl = ''; +// Get environment variables to inject into our app. +var env = getClientEnvironment(publicUrl); + +// This is the development configuration. +// It is focused on developer experience and fast rebuilds. +// The production configuration is different and lives in a separate file. +module.exports = { + // You may want 'eval' instead if you prefer to see the compiled output in DevTools. + // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343. + devtool: 'cheap-module-source-map', + // These are the "entry points" to our application. + // This means they will be the "root" imports that are included in JS bundle. + // The first two entry points enable "hot" CSS and auto-refreshes for JS. + entry: [ + // Include an alternative client for WebpackDevServer. A client's job is to + // connect to WebpackDevServer by a socket and get notified about changes. + // When you save a file, the client will either apply hot updates (in case + // of CSS changes), or refresh the page (in case of JS changes). When you + // make a syntax error, this client will display a syntax error overlay. + // Note: instead of the default WebpackDevServer client, we use a custom one + // to bring better experience for Create React App users. You can replace + // the line below with these two lines if you prefer the stock client: + // require.resolve('webpack-dev-server/client') + '?/', + // require.resolve('webpack/hot/dev-server'), + require.resolve('react-dev-utils/webpackHotDevClient'), + // We ship a few polyfills by default: + require.resolve('./polyfills'), + // Finally, this is your app's code: + paths.appIndexJs + // We include the app code last so that if there is a runtime error during + // initialization, it doesn't blow up the WebpackDevServer client, and + // changing JS code would still trigger a refresh. + ], + output: { + // Next line is not used in dev but WebpackDevServer crashes without it: + path: paths.appBuild, + // Add /* filename */ comments to generated require()s in the output. + pathinfo: true, + // This does not produce a real file. It's just the virtual path that is + // served by WebpackDevServer in development. This is the JS bundle + // containing code from all our entry points, and the Webpack runtime. + filename: 'static/js/bundle.js', + // This is the URL that app is served from. We use "/" in development. + publicPath: publicPath + }, + resolve: { + // This allows you to set a fallback for where Webpack should look for modules. + // We read `NODE_PATH` environment variable in `paths.js` and pass paths here. + // We use `fallback` instead of `root` because we want `node_modules` to "win" + // if there any conflicts. This matches Node resolution mechanism. + // https://github.com/facebookincubator/create-react-app/issues/253 + fallback: paths.nodePaths, + // These are the reasonable defaults supported by the Node ecosystem. + // We also include JSX as a common component filename extension to support + // some tools, although we do not recommend using it, see: + // https://github.com/facebookincubator/create-react-app/issues/290 + extensions: ['.js', '.json', '.jsx', ''], + alias: { + // Support React Native Web + // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ + 'react-native': 'react-native-web' + } + }, + + module: { + // First, run the linter. + // It's important to do this before Babel processes the JS. + preLoaders: [ + { + test: /\.(js|jsx)$/, + loader: 'eslint', + include: paths.appSrc, + } + ], + loaders: [ + // Default loader: load all assets that are not handled + // by other loaders with the url loader. + // Note: This list needs to be updated with every change of extensions + // the other loaders match. + // E.g., when adding a loader for a new supported file extension, + // we need to add the supported extension to this loader too. + // Add one new line in `exclude` for each loader. + // + // "file" loader makes sure those assets get served by WebpackDevServer. + // When you `import` an asset, you get its (virtual) filename. + // In production, they would get copied to the `build` folder. + // "url" loader works like "file" loader except that it embeds assets + // smaller than specified limit in bytes as data URLs to avoid requests. + // A missing `test` is equivalent to a match. + { + exclude: [ + /\.html$/, + /\.(js|jsx)$/, + /\.css$/, + /\.json$/, + /\.woff$/, + /\.woff2$/, + /\.(ttf|svg|eot)$/ + ], + loader: 'url', + query: { + limit: 10000, + name: 'static/media/[name].[hash:8].[ext]' + } + }, + // Process JS with Babel. + { + test: /\.(js|jsx)$/, + include: paths.appSrc, + loader: 'babel', + query: { + + // This is a feature of `babel-loader` for webpack (not Babel itself). + // It enables caching results in ./node_modules/.cache/babel-loader/ + // directory for faster rebuilds. + cacheDirectory: true + } + }, + // "postcss" loader applies autoprefixer to our CSS. + // "css" loader resolves paths in CSS and adds assets as dependencies. + // "style" loader turns CSS into JS modules that inject