commit cf0e4a7ad2584ad3cee8ce7f8b11e7ad81b1191d Author: Tristan Yang Date: Tue Aug 27 17:27:26 2019 +0800 Initial commit diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..5c8e82a --- /dev/null +++ b/.babelrc @@ -0,0 +1,16 @@ +{ + "presets": [ + [ + "@babel/preset-env", + { + "modules": false, + "corejs": 3, + "targets": { + "chrome": 60 + } + } + ], + "@babel/preset-react" + ], + "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"] +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..93dd0d2 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,19 @@ +# EditorConfig is awesome: http://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*.md] +trim_trailing_whitespace = false + +[*.js] +trim_trailing_whitespace = true + +# Unix-style newlines with a newline ending every file +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +insert_final_newline = true +max_line_length = 100 \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 0000000..f14c5c7 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,5 @@ +/scripts +/node_modules +/build +/.vscode +/public \ No newline at end of file diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..b302fea --- /dev/null +++ b/.eslintrc @@ -0,0 +1,32 @@ +{ + "extends": ["eslint:recommended", "plugin:react/recommended", "prettier"], + "plugins": ["react-hooks"], + "rules": { + "semi": 2, + "no-console": "off", + "react/prop-types": 0, + "no-unused-vars": ["error", { "ignoreRestSiblings": true }], + "react-hooks/rules-of-hooks": "error", + "react-hooks/exhaustive-deps": "warn", + "max-lines": ["warn", 400] + }, + "parser": "babel-eslint", + "parserOptions": { + "ecmaVersion": 2018, + "sourceType": "module", + "ecmaFeatures": { + "jsx": true + } + }, + "env": { + "browser": true, + "node": true, + "es6": true, + "serviceworker": true + }, + "settings": { + "react": { + "version": "16.8" + } + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9507a83 --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +# dependencies +/node_modules +*/node_modules + +# testing +/coverage + +# production +/build +/dist + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +.idea diff --git a/.huskyrc b/.huskyrc new file mode 100644 index 0000000..5a1b2a8 --- /dev/null +++ b/.huskyrc @@ -0,0 +1,6 @@ +{ + "hooks": { + "commit-msg": "commitlint -E HUSKY_GIT_PARAMS", + "pre-commit": "lint-staged" + } +} diff --git a/.lintstagedrc b/.lintstagedrc new file mode 100644 index 0000000..4a920cc --- /dev/null +++ b/.lintstagedrc @@ -0,0 +1,3 @@ +{ + "src/**/*.{js,jsx}": ["eslint --fix", "git add"] +} diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..a2fc639 --- /dev/null +++ b/.npmrc @@ -0,0 +1,2 @@ +registry=https://registry.npm.taobao.org +engine-strict=true diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..a3c8d3b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "printWidth": 100, + "singleQuote": true, + "bracketSpacing": true, + "jsxBracketSameLine": false, + "tabWidth": 2, + "semi": true +} diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..83067ad --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,21 @@ +# Changelog + +Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). + +## 1.0.1 - 2019-07-15 + +### Commits + +- docs: first blood [`649a8cb`](https://github.com/zerosoul/react-starter/commit/649a8cb3ffa064a8eb1d68b7b1baa4c3f07c0094) +- feat: add installedCheck and update packages [`8407a06`](https://github.com/zerosoul/react-starter/commit/8407a06048cacc90dca5699d57821c5a8e93d7cc) +- build: update packages [`da8ad8b`](https://github.com/zerosoul/react-starter/commit/da8ad8bc6e468538d300c35f5a51191cbfdb1507) +- chore: update packages [`626c164`](https://github.com/zerosoul/react-starter/commit/626c164b42184726fd4d16c782fad834ff7f98ab) +- fix: add installedCheck [`8a0ef02`](https://github.com/zerosoul/react-starter/commit/8a0ef028ecb74314fb4a8844bffab61eb23509a5) +- build: update packages [`4008cd2`](https://github.com/zerosoul/react-starter/commit/4008cd20d21c13fe1cc01ceb27c69482eea8604c) +- build: update packages [`180bd5c`](https://github.com/zerosoul/react-starter/commit/180bd5ca802265dff16a1f79e49f3df985697ded) +- feat: update packages [`33e927e`](https://github.com/zerosoul/react-starter/commit/33e927eab5e5b726413a240aa305b2b9bb589664) +- feat: disable AutoDllPlugin in dev [`eb72b1a`](https://github.com/zerosoul/react-starter/commit/eb72b1a3fd636c23c1b1d36d01e13bc3e1a6daa2) +- Initial commit [`c61a6fa`](https://github.com/zerosoul/react-starter/commit/c61a6faccb32fb7e30c9b198be4112dbcc49eee2) +- docs: readme [`086b511`](https://github.com/zerosoul/react-starter/commit/086b51158b96d7157454179585c2505469a26e5e) +- feat: remove pre push hooks [`9f4d9cc`](https://github.com/zerosoul/react-starter/commit/9f4d9ccf5d3a217b3f25594eabd3d96be7db4528) +- docs: remove image file [`e628e85`](https://github.com/zerosoul/react-starter/commit/e628e85e1b70db05cb911fe799183b245d792792) diff --git a/README.md b/README.md new file mode 100644 index 0000000..aa2de66 --- /dev/null +++ b/README.md @@ -0,0 +1,3 @@ +# react-starter + +react webapp development scaffold for mobile and pc, with or without redux/router. diff --git a/README.zh.md b/README.zh.md new file mode 100644 index 0000000..841cd81 --- /dev/null +++ b/README.zh.md @@ -0,0 +1,29 @@ +# 项目名 + +[English Version](README.md) + +[项目名](https://xxx.com/) + +## 特性 + +### 功能 + +- [x] 已完成的 +- [ ] 未完成的 + +### 体验 + +- [x] 已具备的 + +## 技术栈 + +- [create-react-app](https://github.com/facebook/create-react-app): 大家都在用的 react 项目构建架子 +- [react](https://reactjs.org): 最流行的前端 UI 构建语言 +- redux + react-redux: 最流行的 react 状态管理解决方案 +- [styled-components](https://styled-components.com): react 中 css 解决方案，CSS-IN-JS 最佳实践 +- eslint + prettier: 为了更好地编码 +- husky + commitlint: 为了更好地 GIT 提交 + +## 更新日志 + +[更新日志](CHANGELOG.md) diff --git a/changelog.template.hbs b/changelog.template.hbs new file mode 100644 index 0000000..ec44184 --- /dev/null +++ b/changelog.template.hbs @@ -0,0 +1,36 @@ +# Changelog + +Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog). + +{{#each releases}} +{{#if href}} +## [{{title}}]({{href}}){{#if tag}} - {{isoDate}}{{/if}} +{{else}} +## {{title}}{{#if tag}} - {{isoDate}}{{/if}} +{{/if}} + +{{#if summary}} +{{summary}} +{{/if}} + +{{#if merges}} +### Merged + +{{#each merges}} +- {{{message}}} {{#if href}}[`#{{id}}`]({{href}}){{/if}} +{{/each}} +{{/if}} + +{{#if fixes}} +### Fixed + +{{#each fixes}} +- {{{commit.subject}}}{{#each fixes}} {{#if href}}[`#{{id}}`]({{href}}){{/if}}{{/each}} +{{/each}} +{{/if}} + +{{#commit-list commits heading='### Commits'}} +- {{#if breaking}}**Breaking change:** {{/if}}{{{subject}}} {{#if href}}[`{{shorthash}}`]({{href}}){{/if}} +{{/commit-list}} + +{{/each}} diff --git a/commitlint.config.js b/commitlint.config.js new file mode 100644 index 0000000..422b194 --- /dev/null +++ b/commitlint.config.js @@ -0,0 +1 @@ +module.exports = { extends: ['@commitlint/config-conventional'] }; diff --git a/config/env.js b/config/env.js new file mode 100644 index 0000000..905fb12 --- /dev/null +++ b/config/env.js @@ -0,0 +1,91 @@ +const fs = require("fs"); +const path = require("path"); +const paths = require("./paths"); + +// Make sure that including paths.js after env.js will read .env variables. +delete require.cache[require.resolve("./paths")]; + +const NODE_ENV = process.env.NODE_ENV; +if (!NODE_ENV) { + throw new Error( + "The NODE_ENV environment variable is required but was not specified." + ); +} + +// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use +var dotenvFiles = [ + `${paths.dotenv}.${NODE_ENV}.local`, + `${paths.dotenv}.${NODE_ENV}`, + // Don't include `.env.local` for `test` environment + // since normally you expect tests to produce the same + // results for everyone + NODE_ENV !== "test" && `${paths.dotenv}.local`, + paths.dotenv +].filter(Boolean); + +// Load environment variables from .env* files. Suppress warnings using silent +// if this file is missing. dotenv will never modify any environment variables +// that have already been set. Variable expansion is supported in .env files. +// https://github.com/motdotla/dotenv +// https://github.com/motdotla/dotenv-expand +dotenvFiles.forEach(dotenvFile => { + if (fs.existsSync(dotenvFile)) { + require("dotenv-expand")( + require("dotenv").config({ + path: dotenvFile + }) + ); + } +}); + +// 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 +// 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 +// We also resolve them to make sure all tools using them work consistently. +const appDirectory = fs.realpathSync(process.cwd()); +process.env.NODE_PATH = (process.env.NODE_PATH || "") + .split(path.delimiter) + .filter(folder => folder && !path.isAbsolute(folder)) + .map(folder => path.resolve(appDirectory, folder)) + .join(path.delimiter); + +// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be +// injected into the application via DefinePlugin in Webpack configuration. +const REACT_APP = /^REACT_APP_/i; + +function getClientEnvironment(publicUrl) { + const raw = Object.keys(process.env) + .filter(key => REACT_APP.test(key)) + .reduce( + (env, key) => { + env[key] = 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: 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: publicUrl + } + ); + // Stringify all values so we can feed into Webpack DefinePlugin + const stringified = { + "process.env": Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}) + }; + + return { raw, stringified }; +} + +module.exports = getClientEnvironment; diff --git a/config/paths.js b/config/paths.js new file mode 100644 index 0000000..e4c7466 --- /dev/null +++ b/config/paths.js @@ -0,0 +1,53 @@ +const path = require("path"); +const fs = require("fs"); +const url = require("url"); + +// Make sure any symlinks in the project folder are resolved: +// https://github.com/facebookincubator/create-react-app/issues/637 +const appDirectory = fs.realpathSync(process.cwd()); +const resolveApp = relativePath => path.resolve(appDirectory, relativePath); + +const envPublicUrl = process.env.PUBLIC_URL; + +function ensureSlash(path, needsSlash) { + const hasSlash = path.endsWith("/"); + if (hasSlash && !needsSlash) { + return path.substr(path, path.length - 1); + } else if (!hasSlash && needsSlash) { + return `${path}/`; + } else { + return path; + } +} + +const getPublicUrl = appPackageJson => + envPublicUrl || require(appPackageJson).homepage; + +// We use `PUBLIC_URL` environment variable or "homepage" field to infer +// "public path" at which the app is served. +// Webpack needs to know it to put the right + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..752b0cf --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,15 @@ +{ + "short_name": "Memory Game", + "name": "Frontend Logo Memory Game", + "icons": [ + { + "src": "apple-touch-icon.png", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/png" + } + ], + "start_url": "./index.html", + "display": "standalone", + "theme_color": "#57647e", + "background_color": "#1fbcd2" +} diff --git a/public/site.webmanifest b/public/site.webmanifest new file mode 100755 index 0000000..45dc8a2 --- /dev/null +++ b/public/site.webmanifest @@ -0,0 +1 @@ +{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} \ No newline at end of file diff --git a/public/static/splash/ipad_splash.png b/public/static/splash/ipad_splash.png new file mode 100755 index 0000000..c2e61b8 Binary files /dev/null and b/public/static/splash/ipad_splash.png differ diff --git a/public/static/splash/ipadpro1_splash.png b/public/static/splash/ipadpro1_splash.png new file mode 100755 index 0000000..4c75f96 Binary files /dev/null and b/public/static/splash/ipadpro1_splash.png differ diff --git a/public/static/splash/ipadpro2_splash.png b/public/static/splash/ipadpro2_splash.png new file mode 100755 index 0000000..5f3fd05 Binary files /dev/null and b/public/static/splash/ipadpro2_splash.png differ diff --git a/public/static/splash/ipadpro3_splash.png b/public/static/splash/ipadpro3_splash.png new file mode 100755 index 0000000..c646854 Binary files /dev/null and b/public/static/splash/ipadpro3_splash.png differ diff --git a/public/static/splash/iphone5_splash.png b/public/static/splash/iphone5_splash.png new file mode 100755 index 0000000..a2863c4 Binary files /dev/null and b/public/static/splash/iphone5_splash.png differ diff --git a/public/static/splash/iphone6_splash.png b/public/static/splash/iphone6_splash.png new file mode 100755 index 0000000..f1955ca Binary files /dev/null and b/public/static/splash/iphone6_splash.png differ diff --git a/public/static/splash/iphoneplus_splash.png b/public/static/splash/iphoneplus_splash.png new file mode 100755 index 0000000..2055701 Binary files /dev/null and b/public/static/splash/iphoneplus_splash.png differ diff --git a/public/static/splash/iphonex_splash.png b/public/static/splash/iphonex_splash.png new file mode 100755 index 0000000..de56a34 Binary files /dev/null and b/public/static/splash/iphonex_splash.png differ diff --git a/public/static/splash/iphonexr_splash.png b/public/static/splash/iphonexr_splash.png new file mode 100755 index 0000000..43b9c77 Binary files /dev/null and b/public/static/splash/iphonexr_splash.png differ diff --git a/public/static/splash/iphonexsmax_splash.png b/public/static/splash/iphonexsmax_splash.png new file mode 100755 index 0000000..39824e6 Binary files /dev/null and b/public/static/splash/iphonexsmax_splash.png differ diff --git a/public/sw.js b/public/sw.js new file mode 100644 index 0000000..4e4fe1e --- /dev/null +++ b/public/sw.js @@ -0,0 +1,3 @@ +self.addEventListener('fetch', function(event) { + event.respondWith(fetch(event.request)); +}); diff --git a/scripts/build.js b/scripts/build.js new file mode 100644 index 0000000..4e48156 --- /dev/null +++ b/scripts/build.js @@ -0,0 +1,145 @@ +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = process.env.NODE_ENV || "production"; +process.env.NODE_ENV = process.env.NODE_ENV || "production"; + +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on("unhandledRejection", err => { + throw err; +}); + +// Ensure environment variables are read. +require("../config/env"); + +const path = require("path"); +const chalk = require("chalk"); +const fs = require("fs-extra"); +const webpack = require("webpack"); +const config = require("../config/webpack.config.prod"); +const paths = require("../config/paths"); +const checkRequiredFiles = require("react-dev-utils/checkRequiredFiles"); +const formatWebpackMessages = require("react-dev-utils/formatWebpackMessages"); +const printHostingInstructions = require("react-dev-utils/printHostingInstructions"); +const FileSizeReporter = require("react-dev-utils/FileSizeReporter"); +const printBuildError = require("react-dev-utils/printBuildError"); + +const measureFileSizesBeforeBuild = + FileSizeReporter.measureFileSizesBeforeBuild; +const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; +const useYarn = fs.existsSync(paths.yarnLockFile); + +// 文件体积过大提示：gzip & chunk +const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; +const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; + +// Warn and crash if required files are missing +if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { + process.exit(1); +} + +// 首先读取当前build目录下的文件大小，以便后面作比较 +measureFileSizesBeforeBuild(paths.appBuild) + .then(previousFileSizes => { + // Remove all content but keep the directory so that + // if you're in it, you don't end up in Trash + fs.emptyDirSync(paths.appBuild); + // Merge with the public folder + copyPublicFolder(); + // Start the webpack build + return build(previousFileSizes); + }) + .then( + ({ stats, previousFileSizes, warnings }) => { + if (warnings.length) { + console.log(chalk.yellow("Compiled with warnings.\n")); + console.log(warnings.join("\n\n")); + console.log( + "\nSearch for the " + + chalk.underline(chalk.yellow("keywords")) + + " to learn more about each warning." + ); + console.log( + "To ignore, add " + + chalk.cyan("// eslint-disable-next-line") + + " to the line before.\n" + ); + } else { + console.log(chalk.green("Compiled successfully.\n")); + } + + console.log("File sizes after gzip:\n"); + printFileSizesAfterBuild( + stats, + previousFileSizes, + paths.appBuild, + WARN_AFTER_BUNDLE_GZIP_SIZE, + WARN_AFTER_CHUNK_GZIP_SIZE + ); + const appPackage = require(paths.appPackageJson); + const publicUrl = paths.publicUrl; + const publicPath = config.output.publicPath; + const buildFolder = path.relative(process.cwd(), paths.appBuild); + printHostingInstructions( + appPackage, + publicUrl, + publicPath, + buildFolder, + useYarn + ); + }, + err => { + console.log(chalk.red("Failed to compile.\n")); + printBuildError(err); + process.exit(1); + } + ); + +// Create the production build and print the deployment instructions. +function build(previousFileSizes) { + console.log("Creating an optimized production build..."); + + let compiler = webpack(config); + return new Promise((resolve, reject) => { + compiler.run((err, stats) => { + if (err) { + return reject(err); + } + const messages = formatWebpackMessages(stats.toJson({}, true)); + if (messages.errors.length) { + // Only keep the first error. Others are often indicative + // of the same problem, but confuse the reader with noise. + if (messages.errors.length > 1) { + messages.errors.length = 1; + } + return reject(new Error(messages.errors.join("\n\n"))); + } + if ( + process.env.CI && + (typeof process.env.CI !== "string" || + process.env.CI.toLowerCase() !== "false") && + messages.warnings.length + ) { + console.log( + chalk.yellow( + "\nTreating warnings as errors because process.env.CI = true.\n" + + "Most CI servers set it automatically.\n" + ) + ); + return reject(new Error(messages.warnings.join("\n\n"))); + } + return resolve({ + stats, + previousFileSizes, + warnings: messages.warnings + }); + }); + }); +} + +function copyPublicFolder() { + fs.copySync(paths.appPublic, paths.appBuild, { + dereference: true, + filter: file => file !== paths.appHtml + }); +} diff --git a/scripts/start.js b/scripts/start.js new file mode 100644 index 0000000..ebbc554 --- /dev/null +++ b/scripts/start.js @@ -0,0 +1,114 @@ +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'development'; +process.env.NODE_ENV = 'development'; + +// Makes the script crash on unhandled rejections instead of silently +// ignoring them. In the future, promise rejections that are not handled will +// terminate the Node.js process with a non-zero exit code. +process.on('unhandledRejection', err => { + throw err; +}); + +// Ensure environment variables are read. +require('../config/env'); + +const fs = require('fs'); +const chalk = require('chalk'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const clearConsole = require('react-dev-utils/clearConsole'); +const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); +const { + choosePort, + createCompiler, + prepareProxy, + prepareUrls +} = require('react-dev-utils/WebpackDevServerUtils'); +const openBrowser = require('react-dev-utils/openBrowser'); +const paths = require('../config/paths'); +const config = require('../config/webpack.config.dev'); +const createDevServerConfig = require('../config/webpackDevServer.config'); + +const useYarn = fs.existsSync(paths.yarnLockFile); +const isInteractive = process.stdout.isTTY; +const installedCheck = require('installed-check-core'); + +// Warn and crash if required files are missing +if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { + process.exit(1); +} + +// Tools like Cloud9 rely on this. +const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8088; +const HOST = process.env.HOST || '0.0.0.0'; +// 检查已安装的包和package.json中是否一致 +installedCheck({ versionCheck: true }).then(result => { + if (result.errors.length) { + let logStr = chalk.bgRed.bold( + 'Dependency check errors: \n\n' + result.errors.join('\n') + '\n' + ); + console.log(logStr); + let solveStr = chalk.bgGreenBright.bold( + 'try running: "npm install" to solve this error' + '\n' + ); + console.log(solveStr); + process.exit(1); + } +}); +if (process.env.HOST) { + console.log( + chalk.cyan( + `Attempting to bind to HOST environment variable: ${chalk.yellow( + chalk.bold(process.env.HOST) + )}` + ) + ); + console.log(`If this was unintentional, check that you haven't mistakenly set it in your shell.`); + console.log(`Learn more here: ${chalk.yellow('http://bit.ly/2mwWSwH')}`); + console.log(); +} + +// We attempt to use the default port but if it is busy, we offer the user to +// run on a different port. `choosePort()` Promise resolves to the next free port. +choosePort(HOST, DEFAULT_PORT) + .then(port => { + if (port == null) { + // We have not found a port. + return; + } + const protocol = process.env.HTTPS === 'true' ? 'https' : 'http'; + const appName = require(paths.appPackageJson).name; + const urls = prepareUrls(protocol, HOST, port); + // Create a webpack compiler that is configured with custom messages. + const compiler = createCompiler({ webpack, config, appName, urls, useYarn }); + // Load proxy config + const proxySetting = require(paths.appPackageJson).proxy; + const proxyConfig = prepareProxy(proxySetting, paths.appPublic); + // Serve webpack assets generated by the compiler over a web sever. + const serverConfig = createDevServerConfig(proxyConfig, urls.lanUrlForConfig); + const devServer = new WebpackDevServer(compiler, serverConfig); + // Launch WebpackDevServer. + devServer.listen(port, HOST, err => { + if (err) { + return console.log(err); + } + if (isInteractive) { + clearConsole(); + } + console.log(chalk.cyan('Starting the development server...\n')); + openBrowser(urls.localUrlForBrowser); + }); + + ['SIGINT', 'SIGTERM'].forEach(function(sig) { + process.on(sig, function() { + devServer.close(); + process.exit(); + }); + }); + }) + .catch(err => { + if (err && err.message) { + console.log(err.message); + } + process.exit(1); + }); diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..87bec8d --- /dev/null +++ b/src/App.js @@ -0,0 +1,17 @@ +import React from 'react'; +import Header from './components/Header'; +import Footer from './components/Footer'; +import styled from 'styled-components'; +const StyledBody = styled.section` + height: 60vh; +`; +const App = () => { + return ( + <> +
+ body +