react-java-mysql: use create-react-app for frontend
Signed-off-by: Jérémie Drouet <jeremie.drouet@gmail.com>master
Jérémie Drouet
5 years ago
parent
bf31ad4ece
commit
70be09e941
@ -1,23 +0,0 @@
|
|||||||
{
|
|
||||||
"presets": [
|
|
||||||
[
|
|
||||||
"env",
|
|
||||||
{
|
|
||||||
"loose": true,
|
|
||||||
"modules": false
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"react"
|
|
||||||
],
|
|
||||||
"plugins": [
|
|
||||||
"react-hot-loader/babel",
|
|
||||||
"transform-runtime",
|
|
||||||
"transform-object-rest-spread",
|
|
||||||
"lodash"
|
|
||||||
],
|
|
||||||
"env": {
|
|
||||||
"test": {
|
|
||||||
"plugins": ["transform-es2015-modules-commonjs"]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 3 versions
|
|
||||||
Firefox ESR
|
|
||||||
Opera 12.1
|
|
||||||
IE >= 10
|
|
||||||
@ -1 +0,0 @@
|
|||||||
webpack/*
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
{
|
|
||||||
"extends": [
|
|
||||||
"standard",
|
|
||||||
"standard-react",
|
|
||||||
"plugin:jsx-a11y/recommended"
|
|
||||||
],
|
|
||||||
"env": {
|
|
||||||
"es6" : true,
|
|
||||||
"browser" : true,
|
|
||||||
"node" : true,
|
|
||||||
"jest" : true
|
|
||||||
},
|
|
||||||
"plugins": [
|
|
||||||
"react",
|
|
||||||
"import"
|
|
||||||
],
|
|
||||||
"parser": "babel-eslint",
|
|
||||||
"parserOptions": {
|
|
||||||
"sourceType": "module"
|
|
||||||
},
|
|
||||||
"rules" : {
|
|
||||||
"no-eq-null" : 0,
|
|
||||||
"quotes": 0,
|
|
||||||
"eol-last": 0,
|
|
||||||
"semi": [2, "always"],
|
|
||||||
"key-spacing": [1, {"beforeColon": true, "afterColon": true, "mode": "minimum", "align": "colon"}],
|
|
||||||
"padded-blocks": [1, { "switches": "never", "classes" : "always"}],
|
|
||||||
"space-before-function-paren": ["error", "never"],
|
|
||||||
"indent": [1, 4]
|
|
||||||
},
|
|
||||||
"globals" : {
|
|
||||||
"__DEV__" : false,
|
|
||||||
"__filename" : false,
|
|
||||||
"__dirname" : false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,4 +1,23 @@
|
|||||||
node_modules
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
.happypack
|
|
||||||
build/*
|
# dependencies
|
||||||
dist/*
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|||||||
@ -1,9 +1,21 @@
|
|||||||
FROM node:10
|
FROM node:lts AS development
|
||||||
|
|
||||||
RUN mkdir /project
|
WORKDIR /code
|
||||||
WORKDIR /project
|
COPY package.json /code/package.json
|
||||||
|
COPY package-lock.json /code/package-lock.json
|
||||||
|
|
||||||
COPY . .
|
RUN npm ci
|
||||||
|
COPY . /code
|
||||||
|
|
||||||
RUN yarn install
|
ENV CI=true
|
||||||
CMD ["yarn", "run", "start"]
|
ENV PORT=3000
|
||||||
|
|
||||||
|
CMD [ "npm", "start" ]
|
||||||
|
|
||||||
|
FROM development AS build
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
FROM nginx:1.13-alpine
|
||||||
|
|
||||||
|
COPY --from=build /code/build /usr/share/nginx/html
|
||||||
|
|||||||
@ -1,12 +0,0 @@
|
|||||||
FROM node:10 as build
|
|
||||||
|
|
||||||
RUN mkdir /project
|
|
||||||
WORKDIR /project
|
|
||||||
COPY . .
|
|
||||||
RUN yarn install
|
|
||||||
RUN yarn run package
|
|
||||||
|
|
||||||
FROM nginx:1.13-alpine
|
|
||||||
|
|
||||||
COPY config/nginx.conf /etc/nginx/conf.d/default.conf
|
|
||||||
COPY --from=build /project/dist /usr/share/nginx/html
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
server {
|
|
||||||
listen 9000;
|
|
||||||
server_name localhost;
|
|
||||||
|
|
||||||
location / {
|
|
||||||
root /usr/share/nginx/html;
|
|
||||||
index index.html index.htm;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
"moduleFileExtensions": [
|
|
||||||
"js",
|
|
||||||
"jsx",
|
|
||||||
"json"
|
|
||||||
],
|
|
||||||
"moduleDirectories": [
|
|
||||||
"node_modules",
|
|
||||||
"src"
|
|
||||||
],
|
|
||||||
"moduleNameMapper": {
|
|
||||||
"^.+\\.(css|scss)$": "<rootDir>/test/mocks/styleMock.js",
|
|
||||||
"^.+\\.(jpg|jpeg|gif|png|svg|eot|ttf|woff|woff2|)$": "<rootDir>/test/mocks/imageMock.js"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,72 +1,42 @@
|
|||||||
{
|
{
|
||||||
"name": "react-app",
|
"name": "frontend",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
|
"@testing-library/react": "^9.5.0",
|
||||||
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
"@types/jest": "^24.9.1",
|
||||||
|
"@types/node": "^12.12.30",
|
||||||
|
"@types/react": "^16.9.25",
|
||||||
|
"@types/react-dom": "^16.9.5",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"react-scripts": "3.4.1",
|
||||||
|
"typescript": "^3.7.5"
|
||||||
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rimraf ./dist/* && rimraf ./build/*",
|
"start": "react-scripts start",
|
||||||
"start": "cross-env NODE_ENV=development node webpack/dev-server.js",
|
"build": "react-scripts build",
|
||||||
"build": "cross-env NODE_ENV=development webpack --config webpack.config.js",
|
"test": "react-scripts test",
|
||||||
"package": "cross-env NODE_ENV=production webpack --config webpack.config.js",
|
"eject": "react-scripts eject"
|
||||||
"test": "cross-env NODE_ENV=test jest",
|
|
||||||
"lint:js": "eslint ./src"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"eslintConfig": {
|
||||||
"express": "4.16.3",
|
"extends": "react-app"
|
||||||
"axios": "0.18.0",
|
},
|
||||||
"classnames": "2.2.5",
|
"browserslist": {
|
||||||
"lodash": "4.17.5",
|
"production": [
|
||||||
"moment": "2.20.0",
|
">0.2%",
|
||||||
"history": "4.7.2",
|
"not dead",
|
||||||
"react": "^16.8.6",
|
"not op_mini all"
|
||||||
"react-dom": "^16.8.6",
|
],
|
||||||
"react-redux": "^5.1.1",
|
"development": [
|
||||||
"react-router-dom": "^4.3.1",
|
"last 1 chrome version",
|
||||||
"react-router-redux": "5.0.0-alpha.8",
|
"last 1 firefox version",
|
||||||
"redux": "^3.7.2",
|
"last 1 safari version"
|
||||||
"redux-actions": "^2.6.5",
|
]
|
||||||
"redux-saga": "0.16.0",
|
|
||||||
"reselect": "3.0.1",
|
|
||||||
"query-string": "6.0.0"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"rimraf": "2.6.1",
|
"http-proxy-middleware": "^1.0.3"
|
||||||
"cross-env": "5.1.4",
|
|
||||||
"webpack": "4.5.0",
|
|
||||||
"webpack-cli": "3.3.1",
|
|
||||||
"webpack-dev-server": "3.1.3",
|
|
||||||
"html-webpack-plugin": "3.2.0",
|
|
||||||
"mini-css-extract-plugin": "0.4.0",
|
|
||||||
"react-hot-loader": "3.1.3",
|
|
||||||
"node-sass": "^4.11.0",
|
|
||||||
"babel-core": "6.26.0",
|
|
||||||
"babel-runtime": "6.26.0",
|
|
||||||
"babel-loader": "7.1.4",
|
|
||||||
"babel-preset-env": "^1.7.0",
|
|
||||||
"babel-eslint": "8.2.2",
|
|
||||||
"babel-preset-react": "6.24.1",
|
|
||||||
"babel-plugin-transform-runtime": "6.23.0",
|
|
||||||
"babel-plugin-transform-object-rest-spread": "6.26.0",
|
|
||||||
"babel-plugin-lodash": "3.3.2",
|
|
||||||
"css-loader": "^2.1.1",
|
|
||||||
"sass-loader": "6.0.7",
|
|
||||||
"style-loader": "0.20.3",
|
|
||||||
"file-loader": "1.1.11",
|
|
||||||
"postcss-loader": "2.1.3",
|
|
||||||
"autoprefixer": "8.2.0",
|
|
||||||
"cssnano": "4.1.10",
|
|
||||||
"identity-obj-proxy": "3.0.0",
|
|
||||||
"jest": "^20.0.4",
|
|
||||||
"jest-cli": "^20.0.4",
|
|
||||||
"babel-jest": "20.0.3",
|
|
||||||
"eslint": "4.19.1",
|
|
||||||
"eslint-config-standard": "^10.2.1",
|
|
||||||
"eslint-config-standard-react": "^5.0.0",
|
|
||||||
"eslint-loader": "^1.9.0",
|
|
||||||
"eslint-plugin-import": "^2.7.0",
|
|
||||||
"eslint-plugin-node": "^5.1.1",
|
|
||||||
"eslint-plugin-promise": "^3.3.0",
|
|
||||||
"eslint-plugin-react": "7.1.0",
|
|
||||||
"eslint-plugin-jsx-a11y": "6.0.2",
|
|
||||||
"eslint-plugin-standard": "3.0.1"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -0,0 +1,43 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
<meta name="theme-color" content="#000000" />
|
||||||
|
<meta
|
||||||
|
name="description"
|
||||||
|
content="Web site created using create-react-app"
|
||||||
|
/>
|
||||||
|
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
||||||
|
<!--
|
||||||
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
|
-->
|
||||||
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||||
|
<!--
|
||||||
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
|
Only files inside the `public` folder can be referenced from the HTML.
|
||||||
|
|
||||||
|
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
||||||
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
|
-->
|
||||||
|
<title>React App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||||
|
<div id="root"></div>
|
||||||
|
<!--
|
||||||
|
This HTML file is a template.
|
||||||
|
If you open it directly in the browser, you will see an empty page.
|
||||||
|
|
||||||
|
You can add webfonts, meta tags, or analytics to this file.
|
||||||
|
The build step will place the bundled scripts into the <body> tag.
|
||||||
|
|
||||||
|
To begin the development, run `npm start` or `yarn start`.
|
||||||
|
To create a production bundle, use `npm run build` or `yarn build`.
|
||||||
|
-->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"short_name": "React App",
|
||||||
|
"name": "Create React App Sample",
|
||||||
|
"icons": [
|
||||||
|
{
|
||||||
|
"src": "favicon.ico",
|
||||||
|
"sizes": "64x64 32x32 24x24 16x16",
|
||||||
|
"type": "image/x-icon"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo192.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "192x192"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"src": "logo512.png",
|
||||||
|
"type": "image/png",
|
||||||
|
"sizes": "512x512"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"start_url": ".",
|
||||||
|
"display": "standalone",
|
||||||
|
"theme_color": "#000000",
|
||||||
|
"background_color": "#ffffff"
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
# https://www.robotstxt.org/robotstxt.html
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
@ -0,0 +1,38 @@
|
|||||||
|
.App {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-logo {
|
||||||
|
height: 40vmin;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: no-preference) {
|
||||||
|
.App-logo {
|
||||||
|
animation: App-logo-spin infinite 20s linear;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-header {
|
||||||
|
background-color: #282c34;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: calc(10px + 2vmin);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.App-link {
|
||||||
|
color: #61dafb;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes App-logo-spin {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,9 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { render } from '@testing-library/react';
|
||||||
|
import App from './App';
|
||||||
|
|
||||||
|
test('renders learn react link', () => {
|
||||||
|
const { getByText } = render(<App />);
|
||||||
|
const linkElement = getByText(/learn react/i);
|
||||||
|
expect(linkElement).toBeInTheDocument();
|
||||||
|
});
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import logo from "./logo.svg";
|
||||||
|
import "./App.css";
|
||||||
|
|
||||||
|
type Greeting = {
|
||||||
|
id: number;
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const [greeting, setGreeting] = useState<Greeting>();
|
||||||
|
useEffect(() => {
|
||||||
|
fetch("/api")
|
||||||
|
.then(res => res.json())
|
||||||
|
.then(setGreeting)
|
||||||
|
.catch(console.error);
|
||||||
|
}, [setGreeting]);
|
||||||
|
return (
|
||||||
|
<div className="App">
|
||||||
|
<header className="App-header">
|
||||||
|
<img src={logo} className="App-logo" alt="logo" />
|
||||||
|
{greeting ? (
|
||||||
|
<p>Hello from {greeting.name}</p>
|
||||||
|
) : (
|
||||||
|
<p>Loading...</p>
|
||||||
|
)}
|
||||||
|
<p>
|
||||||
|
Edit <code>src/App.tsx</code> and save to reload.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
className="App-link"
|
||||||
|
href="https://reactjs.org"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Learn React
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import * as React from "react"
|
|
||||||
import { Switch } from "react-router-dom"
|
|
||||||
import { renderRoutes } from "./routes"
|
|
||||||
|
|
||||||
import { ApplicationContainer } from "app/components/layout"
|
|
||||||
|
|
||||||
require("./core/styles/reset.css");
|
|
||||||
require("./core/styles/normalize.scss");
|
|
||||||
//require("./core/styles/main.scss");
|
|
||||||
|
|
||||||
export class App extends React.Component {
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<ApplicationContainer>
|
|
||||||
<Switch>
|
|
||||||
{renderRoutes()}
|
|
||||||
</Switch>
|
|
||||||
</ApplicationContainer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export default class ApplicationContainer extends React.Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="main-container">
|
|
||||||
<div className="main-content">
|
|
||||||
{this.props.children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
import ApplicationContainer from "./ApplicationContainer";
|
|
||||||
|
|
||||||
export {
|
|
||||||
ApplicationContainer,
|
|
||||||
}
|
|
||||||
@ -1,396 +0,0 @@
|
|||||||
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// HTML5 display definitions
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct `block` display not defined in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
details,
|
|
||||||
figcaption,
|
|
||||||
figure,
|
|
||||||
footer,
|
|
||||||
header,
|
|
||||||
hgroup,
|
|
||||||
main,
|
|
||||||
nav,
|
|
||||||
section,
|
|
||||||
summary {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct `inline-block` display not defined in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
video {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Prevent modern browsers from displaying `audio` without controls.
|
|
||||||
// Remove excess height in iOS 5 devices.
|
|
||||||
//
|
|
||||||
|
|
||||||
audio:not([controls]) {
|
|
||||||
display: none;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address styling not present in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
[hidden] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Base
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Set default font family to sans-serif.
|
|
||||||
// 2. Prevent iOS text size adjust after orientation change, without disabling
|
|
||||||
// user zoom.
|
|
||||||
//
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: sans-serif; // 1
|
|
||||||
-webkit-text-size-adjust: 100%; // 2
|
|
||||||
-ms-text-size-adjust: 100%; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove default margin.
|
|
||||||
//
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Links
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address `outline` inconsistency between Chrome and other browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
a:focus {
|
|
||||||
outline: thin dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Improve readability when focused and also mouse hovered in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
a:active,
|
|
||||||
a:hover {
|
|
||||||
outline: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Typography
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address variable `h1` font-size and margin within `section` and `article`
|
|
||||||
// contexts in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
margin: 0.67em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address styling not present in IE 8/9, Safari 5, and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
abbr[title] {
|
|
||||||
border-bottom: 1px dotted;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
b,
|
|
||||||
strong {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address styling not present in Safari 5 and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
dfn {
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address differences between Firefox and other browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
hr {
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
box-sizing: content-box;
|
|
||||||
height: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address styling not present in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
mark {
|
|
||||||
background: #ff0;
|
|
||||||
color: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct font family set oddly in Safari 5 and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
code,
|
|
||||||
kbd,
|
|
||||||
pre,
|
|
||||||
samp {
|
|
||||||
font-family: monospace, serif;
|
|
||||||
font-size: 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Improve readability of pre-formatted text in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
pre {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Set consistent quote types.
|
|
||||||
//
|
|
||||||
|
|
||||||
q {
|
|
||||||
quotes: "\201C" "\201D" "\2018" "\2019";
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address inconsistent and variable font size in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
small {
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Prevent `sub` and `sup` affecting `line-height` in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
sub,
|
|
||||||
sup {
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup {
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub {
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Embedded content
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove border when inside `a` element in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
img {
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Correct overflow displayed oddly in IE 9.
|
|
||||||
//
|
|
||||||
|
|
||||||
svg:not(:root) {
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Figures
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address margin not present in IE 8/9 and Safari 5.
|
|
||||||
//
|
|
||||||
|
|
||||||
figure {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Forms
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Define consistent border, margin, and padding.
|
|
||||||
//
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 1px solid #c0c0c0;
|
|
||||||
margin: 0 2px;
|
|
||||||
padding: 0.35em 0.625em 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct `color` not being inherited in IE 8/9.
|
|
||||||
// 2. Remove padding so people aren't caught out if they zero out fieldsets.
|
|
||||||
//
|
|
||||||
|
|
||||||
legend {
|
|
||||||
border: 0; // 1
|
|
||||||
padding: 0; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Correct font family not being inherited in all browsers.
|
|
||||||
// 2. Correct font size not being inherited in all browsers.
|
|
||||||
// 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
input,
|
|
||||||
select,
|
|
||||||
textarea {
|
|
||||||
font-family: inherit; // 1
|
|
||||||
font-size: 100%; // 2
|
|
||||||
margin: 0; // 3
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address Firefox 4+ setting `line-height` on `input` using `!important` in
|
|
||||||
// the UA stylesheet.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
input {
|
|
||||||
line-height: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Address inconsistent `text-transform` inheritance for `button` and `select`.
|
|
||||||
// All other form control elements do not inherit `text-transform` values.
|
|
||||||
// Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
|
|
||||||
// Correct `select` style inheritance in Firefox 4+ and Opera.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
select {
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
|
|
||||||
// and `video` controls.
|
|
||||||
// 2. Correct inability to style clickable `input` types in iOS.
|
|
||||||
// 3. Improve usability and consistency of cursor style between image-type
|
|
||||||
// `input` and others.
|
|
||||||
//
|
|
||||||
|
|
||||||
button,
|
|
||||||
html input[type="button"], // 1
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="submit"] {
|
|
||||||
-webkit-appearance: button; // 2
|
|
||||||
cursor: pointer; // 3
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Re-set default cursor for disabled elements.
|
|
||||||
//
|
|
||||||
|
|
||||||
button[disabled],
|
|
||||||
html input[disabled] {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Address box sizing set to `content-box` in IE 8/9.
|
|
||||||
// 2. Remove excess padding in IE 8/9.
|
|
||||||
//
|
|
||||||
|
|
||||||
input[type="checkbox"],
|
|
||||||
input[type="radio"] {
|
|
||||||
box-sizing: border-box; // 1
|
|
||||||
padding: 0; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
|
|
||||||
// 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
|
|
||||||
// (include `-moz` to future-proof).
|
|
||||||
//
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-appearance: textfield; // 1
|
|
||||||
-moz-box-sizing: content-box;
|
|
||||||
-webkit-box-sizing: content-box; // 2
|
|
||||||
box-sizing: content-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove inner padding and search cancel button in Safari 5 and Chrome
|
|
||||||
// on OS X.
|
|
||||||
//
|
|
||||||
|
|
||||||
input[type="search"]::-webkit-search-cancel-button,
|
|
||||||
input[type="search"]::-webkit-search-decoration {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove inner padding and border in Firefox 4+.
|
|
||||||
//
|
|
||||||
|
|
||||||
button::-moz-focus-inner,
|
|
||||||
input::-moz-focus-inner {
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
//
|
|
||||||
// 1. Remove default vertical scrollbar in IE 8/9.
|
|
||||||
// 2. Improve readability and alignment in all browsers.
|
|
||||||
//
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
overflow: auto; // 1
|
|
||||||
vertical-align: top; // 2
|
|
||||||
}
|
|
||||||
|
|
||||||
// ==========================================================================
|
|
||||||
// Tables
|
|
||||||
// ==========================================================================
|
|
||||||
|
|
||||||
//
|
|
||||||
// Remove most spacing between table cells.
|
|
||||||
//
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
@ -1,48 +0,0 @@
|
|||||||
/* http://meyerweb.com/eric/tools/css/reset/
|
|
||||||
v2.0 | 20110126
|
|
||||||
License: none (public domain)
|
|
||||||
*/
|
|
||||||
|
|
||||||
html, body, div, span, applet, object, iframe,
|
|
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
||||||
a, abbr, acronym, address, big, cite, code,
|
|
||||||
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
||||||
small, strike, strong, sub, sup, tt, var,
|
|
||||||
b, u, i, center,
|
|
||||||
dl, dt, dd, ol, ul, li,
|
|
||||||
fieldset, form, label, legend,
|
|
||||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
||||||
article, aside, canvas, details, embed,
|
|
||||||
figure, figcaption, footer, header, hgroup,
|
|
||||||
menu, nav, output, ruby, section, summary,
|
|
||||||
time, mark, audio, video {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
font-size: 100%;
|
|
||||||
font: inherit;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
/* HTML5 display-role reset for older browsers */
|
|
||||||
article, aside, details, figcaption, figure,
|
|
||||||
footer, header, hgroup, menu, nav, section {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
ol, ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
blockquote, q {
|
|
||||||
quotes: none;
|
|
||||||
}
|
|
||||||
blockquote:before, blockquote:after,
|
|
||||||
q:before, q:after {
|
|
||||||
content: '';
|
|
||||||
content: none;
|
|
||||||
}
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
border-spacing: 0;
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { render, unmountComponentAtNode } from "react-dom"
|
|
||||||
import { AppContainer } from "react-hot-loader"
|
|
||||||
import { Provider } from 'react-redux';
|
|
||||||
import { ConnectedRouter } from "react-router-redux"
|
|
||||||
import { createBrowserHistory } from "history"
|
|
||||||
|
|
||||||
import { configureStore, sagaMiddleware } from "./store"
|
|
||||||
import { runApplicationSagas } from "./sagas"
|
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
|
||||||
const store = configureStore(history);
|
|
||||||
|
|
||||||
const getAppContainer = () => document.getElementById('app-container');
|
|
||||||
|
|
||||||
const renderApp = () => {
|
|
||||||
const App = require('./app').App;
|
|
||||||
render(
|
|
||||||
<AppContainer>
|
|
||||||
<Provider store={store}>
|
|
||||||
<ConnectedRouter history={history}>
|
|
||||||
<App/>
|
|
||||||
</ConnectedRouter>
|
|
||||||
</Provider>
|
|
||||||
</AppContainer>
|
|
||||||
, getAppContainer());
|
|
||||||
};
|
|
||||||
|
|
||||||
if (__DEV__ && module.hot) {
|
|
||||||
const hotReloadApp = () => renderApp();
|
|
||||||
module.hot.accept('./app', () => {
|
|
||||||
// Preventing the hot reloading error from react-router
|
|
||||||
unmountComponentAtNode(getAppContainer());
|
|
||||||
hotReloadApp();
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
// runApplicationSagas(sagaMiddleware);
|
|
||||||
renderApp();
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { connect } from "react-redux";
|
|
||||||
|
|
||||||
require("./home.scss");
|
|
||||||
|
|
||||||
const mapStateToProps = (state, props) => {
|
|
||||||
return {};
|
|
||||||
};
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch) => {
|
|
||||||
return {};
|
|
||||||
};
|
|
||||||
|
|
||||||
class HomePage extends React.Component {
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<div className="home-page page">
|
|
||||||
<h1>My New React App</h1>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(HomePage)
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
|
|
||||||
|
|
||||||
.home-page {
|
|
||||||
background-color: blue;
|
|
||||||
color: red;
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Route } from "react-router-dom";
|
|
||||||
import HomePage from './HomePage';
|
|
||||||
|
|
||||||
const route = <Route path="/" exact key="home" component={HomePage}/>;
|
|
||||||
|
|
||||||
export default route;
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import { combineReducers } from 'redux';
|
|
||||||
import { routerReducer } from 'react-router-redux';
|
|
||||||
|
|
||||||
import whalesReducer from 'app/redux/whales';
|
|
||||||
|
|
||||||
export const rootReducer = combineReducers({
|
|
||||||
router: routerReducer,
|
|
||||||
|
|
||||||
whales: whalesReducer,
|
|
||||||
});
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
import { createAction } from 'redux-actions';
|
|
||||||
import * as ActionTypes from "./action-types";
|
|
||||||
|
|
||||||
export const fetchWhales = createAction(ActionTypes.FETCH_WHALES);
|
|
||||||
@ -1,4 +0,0 @@
|
|||||||
|
|
||||||
const prefix = 'WHALES';
|
|
||||||
|
|
||||||
export const FETCH_WHALES = `${prefix}/FETCH`;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import Reducer from './reducer';
|
|
||||||
|
|
||||||
export default Reducer;
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import * as ActionTypes from "./action-types";
|
|
||||||
import { handleActions } from "redux-actions";
|
|
||||||
|
|
||||||
const defaultState = {
|
|
||||||
list: [],
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleFetchWhales = (state, {payload}) => {
|
|
||||||
return state;
|
|
||||||
};
|
|
||||||
|
|
||||||
const reducer = handleActions({
|
|
||||||
[ActionTypes.FETCH_WHALES] : handleFetchWhales
|
|
||||||
}, defaultState);
|
|
||||||
|
|
||||||
export default reducer;
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import Home from "./pages/home"
|
|
||||||
|
|
||||||
const routes = [
|
|
||||||
Home,
|
|
||||||
];
|
|
||||||
|
|
||||||
export const renderRoutes = () => {
|
|
||||||
return routes;
|
|
||||||
};
|
|
||||||
@ -1,9 +0,0 @@
|
|||||||
//import { templatesSaga } from "./data/templates/sagas";
|
|
||||||
//import { appWizardSaga } from "./data/app-wizard/sagas";
|
|
||||||
|
|
||||||
const startupSagas = [
|
|
||||||
];
|
|
||||||
|
|
||||||
export const runApplicationSagas = (sagaMiddleware) => {
|
|
||||||
startupSagas.forEach(sagaMiddleware.run);
|
|
||||||
};
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
import { routerMiddleware } from 'react-router-redux';
|
|
||||||
import { createStore, applyMiddleware, compose } from 'redux';
|
|
||||||
import createSagaMiddleware from "redux-saga";
|
|
||||||
import { rootReducer } from "./reducers";
|
|
||||||
|
|
||||||
export const sagaMiddleware = createSagaMiddleware();
|
|
||||||
|
|
||||||
export const configureStore = (history, initialState = {}) => {
|
|
||||||
|
|
||||||
const middlewares = [
|
|
||||||
routerMiddleware(history),
|
|
||||||
sagaMiddleware
|
|
||||||
];
|
|
||||||
|
|
||||||
const enhancers = [
|
|
||||||
applyMiddleware(...middlewares),
|
|
||||||
];
|
|
||||||
|
|
||||||
if(__DEV__) {
|
|
||||||
const devToolEnhancer = () => {
|
|
||||||
return typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
|
|
||||||
? window.devToolsExtension() : f => f;
|
|
||||||
};
|
|
||||||
enhancers.push(devToolEnhancer())
|
|
||||||
}
|
|
||||||
|
|
||||||
const store = createStore(rootReducer, initialState, compose(...enhancers));
|
|
||||||
|
|
||||||
if(__DEV__ && module.hot) {
|
|
||||||
module.hot.accept('./reducers', () => {
|
|
||||||
const nextReducer = require('./reducers').default;
|
|
||||||
store.replaceReducer(nextReducer);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return store;
|
|
||||||
};
|
|
||||||
@ -0,0 +1,13 @@
|
|||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
|
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||||
|
sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<title>Sample application</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app-container"></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
import './index.css';
|
||||||
|
import App from './App';
|
||||||
|
import * as serviceWorker from './serviceWorker';
|
||||||
|
|
||||||
|
ReactDOM.render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<App />
|
||||||
|
</React.StrictMode>,
|
||||||
|
document.getElementById('root')
|
||||||
|
);
|
||||||
|
|
||||||
|
// If you want your app to work offline and load faster, you can change
|
||||||
|
// unregister() to register() below. Note this comes with some pitfalls.
|
||||||
|
// Learn more about service workers: https://bit.ly/CRA-PWA
|
||||||
|
serviceWorker.unregister();
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
|
||||||
|
<g fill="#61DAFB">
|
||||||
|
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
|
||||||
|
<circle cx="420.9" cy="296.5" r="45.7"/>
|
||||||
|
<path d="M520.5 78.1z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.6 KiB |
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="react-scripts" />
|
||||||
@ -0,0 +1,149 @@
|
|||||||
|
// This optional code is used to register a service worker.
|
||||||
|
// register() is not called by default.
|
||||||
|
|
||||||
|
// This lets the app load faster on subsequent visits in production, and gives
|
||||||
|
// it offline capabilities. However, it also means that developers (and users)
|
||||||
|
// will only see deployed updates on subsequent visits to a page, after all the
|
||||||
|
// existing tabs open on the page have been closed, since previously cached
|
||||||
|
// resources are updated in the background.
|
||||||
|
|
||||||
|
// To learn more about the benefits of this model and instructions on how to
|
||||||
|
// opt-in, read https://bit.ly/CRA-PWA
|
||||||
|
|
||||||
|
const isLocalhost = Boolean(
|
||||||
|
window.location.hostname === 'localhost' ||
|
||||||
|
// [::1] is the IPv6 localhost address.
|
||||||
|
window.location.hostname === '[::1]' ||
|
||||||
|
// 127.0.0.0/8 are considered localhost for IPv4.
|
||||||
|
window.location.hostname.match(
|
||||||
|
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||||
|
)
|
||||||
|
);
|
||||||
|
|
||||||
|
type Config = {
|
||||||
|
onSuccess?: (registration: ServiceWorkerRegistration) => void;
|
||||||
|
onUpdate?: (registration: ServiceWorkerRegistration) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function register(config?: Config) {
|
||||||
|
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||||
|
// The URL constructor is available in all browsers that support SW.
|
||||||
|
const publicUrl = new URL(
|
||||||
|
process.env.PUBLIC_URL,
|
||||||
|
window.location.href
|
||||||
|
);
|
||||||
|
if (publicUrl.origin !== window.location.origin) {
|
||||||
|
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||||
|
// from what our page is served on. This might happen if a CDN is used to
|
||||||
|
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||||
|
|
||||||
|
if (isLocalhost) {
|
||||||
|
// This is running on localhost. Let's check if a service worker still exists or not.
|
||||||
|
checkValidServiceWorker(swUrl, config);
|
||||||
|
|
||||||
|
// Add some additional logging to localhost, pointing developers to the
|
||||||
|
// service worker/PWA documentation.
|
||||||
|
navigator.serviceWorker.ready.then(() => {
|
||||||
|
console.log(
|
||||||
|
'This web app is being served cache-first by a service ' +
|
||||||
|
'worker. To learn more, visit https://bit.ly/CRA-PWA'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Is not localhost. Just register service worker
|
||||||
|
registerValidSW(swUrl, config);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function registerValidSW(swUrl: string, config?: Config) {
|
||||||
|
navigator.serviceWorker
|
||||||
|
.register(swUrl)
|
||||||
|
.then(registration => {
|
||||||
|
registration.onupdatefound = () => {
|
||||||
|
const installingWorker = registration.installing;
|
||||||
|
if (installingWorker == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
installingWorker.onstatechange = () => {
|
||||||
|
if (installingWorker.state === 'installed') {
|
||||||
|
if (navigator.serviceWorker.controller) {
|
||||||
|
// At this point, the updated precached content has been fetched,
|
||||||
|
// but the previous service worker will still serve the older
|
||||||
|
// content until all client tabs are closed.
|
||||||
|
console.log(
|
||||||
|
'New content is available and will be used when all ' +
|
||||||
|
'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
|
||||||
|
);
|
||||||
|
|
||||||
|
// Execute callback
|
||||||
|
if (config && config.onUpdate) {
|
||||||
|
config.onUpdate(registration);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// At this point, everything has been precached.
|
||||||
|
// It's the perfect time to display a
|
||||||
|
// "Content is cached for offline use." message.
|
||||||
|
console.log('Content is cached for offline use.');
|
||||||
|
|
||||||
|
// Execute callback
|
||||||
|
if (config && config.onSuccess) {
|
||||||
|
config.onSuccess(registration);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error('Error during service worker registration:', error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkValidServiceWorker(swUrl: string, config?: Config) {
|
||||||
|
// Check if the service worker can be found. If it can't reload the page.
|
||||||
|
fetch(swUrl, {
|
||||||
|
headers: { 'Service-Worker': 'script' }
|
||||||
|
})
|
||||||
|
.then(response => {
|
||||||
|
// Ensure service worker exists, and that we really are getting a JS file.
|
||||||
|
const contentType = response.headers.get('content-type');
|
||||||
|
if (
|
||||||
|
response.status === 404 ||
|
||||||
|
(contentType != null && contentType.indexOf('javascript') === -1)
|
||||||
|
) {
|
||||||
|
// No service worker found. Probably a different app. Reload the page.
|
||||||
|
navigator.serviceWorker.ready.then(registration => {
|
||||||
|
registration.unregister().then(() => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// Service worker found. Proceed as normal.
|
||||||
|
registerValidSW(swUrl, config);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
console.log(
|
||||||
|
'No internet connection found. App is running in offline mode.'
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function unregister() {
|
||||||
|
if ('serviceWorker' in navigator) {
|
||||||
|
navigator.serviceWorker.ready
|
||||||
|
.then(registration => {
|
||||||
|
registration.unregister();
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error.message);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
const { createProxyMiddleware } = require("http-proxy-middleware");
|
||||||
|
|
||||||
|
module.exports = function(app) {
|
||||||
|
app.use(
|
||||||
|
"/api",
|
||||||
|
createProxyMiddleware({
|
||||||
|
target: "http://backend:8080",
|
||||||
|
pathRewrite: { "^/api": "" }
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
// jest-dom adds custom jest matchers for asserting on DOM nodes.
|
||||||
|
// allows you to do things like:
|
||||||
|
// expect(element).toHaveTextContent(/react/i)
|
||||||
|
// learn more: https://github.com/testing-library/jest-dom
|
||||||
|
import '@testing-library/jest-dom/extend-expect';
|
||||||
@ -1,3 +0,0 @@
|
|||||||
// Return an empty string or other mock path to emulate the url that
|
|
||||||
// Webpack provides via the file-loader
|
|
||||||
module.exports = 'mocked-image.jpg';
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
// Return a Proxy to emulate css modules (if you are using them)
|
|
||||||
module.exports = require('identity-obj-proxy');
|
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"lib": [
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"esnext"
|
||||||
|
],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1 +0,0 @@
|
|||||||
module.exports = require("./webpack/config-builder")(process.env.NODE_ENV || 'production');
|
|
||||||
@ -1,231 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const path = require('path'),
|
|
||||||
webpack = require('webpack'),
|
|
||||||
HtmlWebpackPlugin = require('html-webpack-plugin'),
|
|
||||||
MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
|
||||||
|
|
||||||
const PROJECT_ROOT = path.resolve(__dirname, "..");
|
|
||||||
|
|
||||||
module.exports = (env) => {
|
|
||||||
const isDev = env === 'development';
|
|
||||||
const isTest = env === 'test';
|
|
||||||
const isProd = !isDev && !isTest;
|
|
||||||
|
|
||||||
const getAppEntry = () => {
|
|
||||||
const appEntry = path.resolve(PROJECT_ROOT, "src/app/entry.jsx");
|
|
||||||
if(isDev) {
|
|
||||||
return [
|
|
||||||
'react-hot-loader/patch',
|
|
||||||
'webpack-dev-server/client?http://localhost:9000',
|
|
||||||
'webpack/hot/only-dev-server',
|
|
||||||
appEntry
|
|
||||||
]
|
|
||||||
} else {
|
|
||||||
return [appEntry]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const getPlugins = () => {
|
|
||||||
|
|
||||||
// common plugins
|
|
||||||
let plugins = [
|
|
||||||
// Global variables
|
|
||||||
new webpack.DefinePlugin({
|
|
||||||
'process.env.NODE_ENV': JSON.stringify(env),
|
|
||||||
'__DEV__': isDev,
|
|
||||||
'__PROD__': isProd,
|
|
||||||
'__TEST__': isTest,
|
|
||||||
}),
|
|
||||||
// ignore moment locale files
|
|
||||||
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
|
||||||
// extract styles to css file
|
|
||||||
new MiniCssExtractPlugin({
|
|
||||||
filename: "[name].[contenthash].css",
|
|
||||||
chunkFilename: "[id].css",
|
|
||||||
disable: isDev,
|
|
||||||
}),
|
|
||||||
// makes index.html
|
|
||||||
new HtmlWebpackPlugin({
|
|
||||||
template: path.resolve(PROJECT_ROOT, 'src/index.ejs'),
|
|
||||||
})
|
|
||||||
];
|
|
||||||
|
|
||||||
// development plugins
|
|
||||||
if(isDev) {
|
|
||||||
plugins.push(
|
|
||||||
// Hot Reload (HMR)
|
|
||||||
new webpack.HotModuleReplacementPlugin(),
|
|
||||||
// Named Modules
|
|
||||||
new webpack.NamedModulesPlugin()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// production plugins
|
|
||||||
if(isProd) {
|
|
||||||
plugins.push(
|
|
||||||
new webpack.optimize.ModuleConcatenationPlugin()
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return plugins;
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
target: 'web',
|
|
||||||
mode: isProd ? "production" : "development",
|
|
||||||
context: PROJECT_ROOT,
|
|
||||||
|
|
||||||
entry: {
|
|
||||||
app: getAppEntry()
|
|
||||||
},
|
|
||||||
|
|
||||||
output: {
|
|
||||||
path: path.resolve(PROJECT_ROOT, isProd ? 'dist' : 'build'),
|
|
||||||
filename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
|
|
||||||
publicPath: '/',
|
|
||||||
sourceMapFilename: '[file].map',
|
|
||||||
chunkFilename: isProd ? '[name].[chunkhash:8].js' : '[name].js',
|
|
||||||
pathinfo: isDev
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
devtool: isProd ? "hidden-sourcemap" : 'eval',
|
|
||||||
|
|
||||||
resolve: {
|
|
||||||
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
|
||||||
modules: ["node_modules", "src"],
|
|
||||||
alias: {}
|
|
||||||
},
|
|
||||||
|
|
||||||
module: {
|
|
||||||
rules: [
|
|
||||||
// JS / JSX files
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx)$/,
|
|
||||||
exclude: /(node_modules)/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'babel-loader',
|
|
||||||
options: {
|
|
||||||
cacheDirectory: true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// SASS files
|
|
||||||
{
|
|
||||||
test: /\.scss$/,
|
|
||||||
exclude: /(node_modules|bower_components)/,
|
|
||||||
use: [
|
|
||||||
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
|
|
||||||
{
|
|
||||||
loader: "css-loader",
|
|
||||||
options: {
|
|
||||||
importLoaders: 2,
|
|
||||||
url: true,
|
|
||||||
import: false,
|
|
||||||
sourceMap: isDev
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: "postcss-loader",
|
|
||||||
options: {
|
|
||||||
sourceMap: isDev,
|
|
||||||
plugins: isDev ? [] : [
|
|
||||||
require("autoprefixer"),
|
|
||||||
require("cssnano")({
|
|
||||||
safe: true,
|
|
||||||
zindex: false,
|
|
||||||
discardComments: {
|
|
||||||
removeAll: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: "sass-loader",
|
|
||||||
options: {
|
|
||||||
sourceMap: isDev,
|
|
||||||
includePaths: [".", path.join(process.cwd(), "src/app/core/styles")]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// Plain CSS files
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
isDev ? "style-loader" : MiniCssExtractPlugin.loader,
|
|
||||||
{
|
|
||||||
loader: "css-loader",
|
|
||||||
options: {
|
|
||||||
importLoaders: 1,
|
|
||||||
url: true,
|
|
||||||
import: false,
|
|
||||||
sourceMap: isDev
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
loader: "postcss-loader",
|
|
||||||
options: {
|
|
||||||
sourceMap: isDev,
|
|
||||||
plugins: isDev ? [] : [
|
|
||||||
require("autoprefixer"),
|
|
||||||
require("cssnano")({
|
|
||||||
safe: true,
|
|
||||||
zindex: false,
|
|
||||||
discardComments: {
|
|
||||||
removeAll: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// images loader
|
|
||||||
{
|
|
||||||
test: /\.(png|jpe?g|gif|svg|ico)(\?.*)?$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'file-loader',
|
|
||||||
options: {
|
|
||||||
name: "[name].[ext]",
|
|
||||||
outputPath: isProd ? "../images/" : "images/"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
// font loader
|
|
||||||
{
|
|
||||||
test: /\.(woff|woff2|ttf|eot)(\?.*)?$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'file-loader',
|
|
||||||
options: {
|
|
||||||
name: "[name].[ext]",
|
|
||||||
publicPath: isProd ? "" : "/webpack/",
|
|
||||||
useRelativePath: isProd,
|
|
||||||
outputPath: isProd ? "../fonts/" : "fonts/"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
plugins: getPlugins(),
|
|
||||||
|
|
||||||
node: {
|
|
||||||
__filename: true,
|
|
||||||
__dirname: true,
|
|
||||||
fs: 'empty',
|
|
||||||
vm: 'empty',
|
|
||||||
net: 'empty',
|
|
||||||
tls: 'empty',
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
};
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
const webpack = require('webpack'),
|
|
||||||
WebpackDevServer = require('webpack-dev-server'),
|
|
||||||
makeConfig = require("./config-builder");
|
|
||||||
|
|
||||||
const startWebpackServer = () => {
|
|
||||||
const config = makeConfig('development');
|
|
||||||
|
|
||||||
const SERVER_PORT = 9000;
|
|
||||||
|
|
||||||
new WebpackDevServer(webpack(config), {
|
|
||||||
publicPath : config.output.publicPath,
|
|
||||||
hot : true,
|
|
||||||
historyApiFallback : true,
|
|
||||||
contentBase : "./build/",
|
|
||||||
|
|
||||||
watchOptions: { // no file events on D4W
|
|
||||||
aggregateTimeout: 300,
|
|
||||||
poll: 1000
|
|
||||||
},
|
|
||||||
|
|
||||||
proxy : {
|
|
||||||
"/api/*" : "http://127.0.0.1:8080" // proxy to backend
|
|
||||||
},
|
|
||||||
|
|
||||||
before : function(app) {
|
|
||||||
// manually configure app `app.use(...)`
|
|
||||||
}
|
|
||||||
}).listen(SERVER_PORT, '0.0.0.0', function (err, result) {
|
|
||||||
if (err) {
|
|
||||||
console.log(err);
|
|
||||||
}
|
|
||||||
console.log('Webpack dev server listening at localhost:' + SERVER_PORT);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
startWebpackServer();
|
|
||||||
Loading…
Reference in New Issue