Update mobile login page

This commit is contained in:
John Lyon-Smith
2018-03-08 12:42:13 -08:00
parent b1c72040c9
commit 0b883de202
21 changed files with 505 additions and 205 deletions

2
.gitignore vendored
View File

@@ -2,6 +2,8 @@ node_modules/
coverage/ coverage/
dist/ dist/
scratch/ scratch/
mobile/android/.idea/
mobile/ios/**/xcuserdata/
.DS_Store .DS_Store
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

View File

@@ -1,23 +0,0 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Hello John</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

View File

@@ -0,0 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<module external.linked.project.id="DeightonAR" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$" external.system.id="GRADLE" type="JAVA_MODULE" version="4">
<component name="FacetManager">
<facet type="java-gradle" name="Java-Gradle">
<configuration>
<option name="BUILD_FOLDER_PATH" value="$MODULE_DIR$/build" />
<option name="BUILDABLE" value="false" />
</configuration>
</facet>
</component>
<component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.gradle" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

157
mobile/android/app/app.iml Normal file
View File

@@ -0,0 +1,157 @@
<?xml version="1.0" encoding="UTF-8"?>
<module external.linked.project.id=":app" external.linked.project.path="$MODULE_DIR$" external.root.project.path="$MODULE_DIR$/.." external.system.id="GRADLE" type="JAVA_MODULE" version="4">
<component name="FacetManager">
<facet type="android-gradle" name="Android-Gradle">
<configuration>
<option name="GRADLE_PROJECT_PATH" value=":app" />
</configuration>
</facet>
<facet type="android" name="Android">
<configuration>
<option name="SELECTED_BUILD_VARIANT" value="debug" />
<option name="ASSEMBLE_TASK_NAME" value="assembleDebug" />
<option name="COMPILE_JAVA_TASK_NAME" value="compileDebugSources" />
<afterSyncTasks>
<task>generateDebugSources</task>
</afterSyncTasks>
<option name="ALLOW_USER_CONFIGURATION" value="false" />
<option name="MANIFEST_FILE_RELATIVE_PATH" value="/src/main/AndroidManifest.xml" />
<option name="RES_FOLDER_RELATIVE_PATH" value="/src/main/res" />
<option name="RES_FOLDERS_RELATIVE_PATH" value="file://$MODULE_DIR$/src/main/res" />
<option name="ASSETS_FOLDER_RELATIVE_PATH" value="/src/main/assets" />
</configuration>
</facet>
</component>
<component name="NewModuleRootManager" LANGUAGE_LEVEL="JDK_1_7">
<output url="file://$MODULE_DIR$/build/intermediates/classes/debug" />
<output-test url="file://$MODULE_DIR$/build/intermediates/classes/test/debug" />
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/debug" isTestSource="false" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/debug" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/debug" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/r/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/aidl/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/buildConfig/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/rs/androidTest/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/rs/androidTest/debug" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/res/resValues/androidTest/debug" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/build/generated/source/apt/test/debug" isTestSource="true" generated="true" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/res" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/resources" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/assets" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/aidl" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/java" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/rs" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/debug/shaders" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/res" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/resources" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/assets" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/aidl" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/java" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/rs" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/testDebug/shaders" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/res" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/resources" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/assets" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/aidl" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/java" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/rs" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTestDebug/shaders" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/main/res" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/resources" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/assets" type="java-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/main/aidl" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/rs" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/main/shaders" isTestSource="false" />
<sourceFolder url="file://$MODULE_DIR$/src/test/res" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/test/resources" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/test/assets" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/test/aidl" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/test/java" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/test/rs" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/test/shaders" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/res" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/resources" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/assets" type="java-test-resource" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/aidl" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/java" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/rs" isTestSource="true" />
<sourceFolder url="file://$MODULE_DIR$/src/androidTest/shaders" isTestSource="true" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/assets" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/blame" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/build-info" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/builds" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/check-manifest" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/classes" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/dependency-cache" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental-classes" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental-runtime-classes" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental-safeguard" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/incremental-verifier" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/instant-run-resources" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/instant-run-support" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/javaPrecompile" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/jniLibs" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/lint" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/manifests" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/pre-dexed" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/prebuild" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/reload-dex" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/res" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/rs" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/shaders" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/split-apk" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/splits-support" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/symbols" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/tmp" />
<excludeFolder url="file://$MODULE_DIR$/build/intermediates/transforms" />
<excludeFolder url="file://$MODULE_DIR$/build/outputs" />
<excludeFolder url="file://$MODULE_DIR$/build/tmp" />
</content>
<orderEntry type="jdk" jdkName="Android API 27 Platform" jdkType="Android SDK" />
<orderEntry type="sourceFolder" forTests="false" />
<orderEntry type="library" name="com.facebook.fresco:imagepipeline-okhttp3-1.3.0" level="project" />
<orderEntry type="library" name="javax.inject:javax.inject:1@jar" level="project" />
<orderEntry type="library" name="com.android.support:support-core-ui-25.3.1" level="project" />
<orderEntry type="library" name="com.android.support:support-compat-25.3.1" level="project" />
<orderEntry type="library" name="com.facebook.fresco:imagepipeline-base-1.3.0" level="project" />
<orderEntry type="library" name="com.parse.bolts:bolts-tasks:1.4.0@jar" level="project" />
<orderEntry type="library" name="com.nineoldandroids:library:2.4.0@jar" level="project" />
<orderEntry type="library" name="com.aurelhubert:ahbottomnavigation-2.0.6" level="project" />
<orderEntry type="library" name="com.google.code.findbugs:jsr305:3.0.0@jar" level="project" />
<orderEntry type="library" name="com.squareup.okhttp3:okhttp-urlconnection:3.6.0@jar" level="project" />
<orderEntry type="library" name="com.facebook.soloader:soloader-0.1.0" level="project" />
<orderEntry type="library" name="com.android.support:support-core-utils-25.3.1" level="project" />
<orderEntry type="library" name="com.squareup.okio:okio:1.13.0@jar" level="project" />
<orderEntry type="library" name="com.android.support:support-v4-25.3.1" level="project" />
<orderEntry type="library" name="com.android.support:support-fragment-25.3.1" level="project" />
<orderEntry type="library" name="com.facebook.fresco:fresco-1.3.0" level="project" />
<orderEntry type="library" name="com.android.support:support-media-compat-25.3.1" level="project" />
<orderEntry type="library" name="com.facebook.fresco:imagepipeline-1.3.0" level="project" />
<orderEntry type="library" name="com.android.support:animated-vector-drawable-25.3.1" level="project" />
<orderEntry type="library" name="com.squareup.okhttp3:okhttp:3.6.0@jar" level="project" />
<orderEntry type="library" name="com.facebook.fresco:fbcore-1.3.0" level="project" />
<orderEntry type="library" name="com.android.support:transition-25.3.1" level="project" />
<orderEntry type="library" name="com.android.support:design-25.3.1" level="project" />
<orderEntry type="library" name="com.facebook.fresco:drawee-1.3.0" level="project" />
<orderEntry type="library" name="com.facebook.react:react-native-0.52.0" level="project" />
<orderEntry type="library" name="com.balysv.materialmenu:material-menu-1.5.4" level="project" />
<orderEntry type="library" name="com.facebook.fbui.textlayoutbuilder:staticlayout-proxy:1.0@jar" level="project" />
<orderEntry type="library" name="com.android.support:appcompat-v7-25.3.1" level="project" />
<orderEntry type="library" name="com.balysv.materialmenu:material-menu-toolbar-1.5.4" level="project" />
<orderEntry type="library" name="com.android.support:support-vector-drawable-25.3.1" level="project" />
<orderEntry type="library" name="com.facebook.fbui.textlayoutbuilder:textlayoutbuilder-1.0.0" level="project" />
<orderEntry type="library" name="com.android.support:recyclerview-v7-25.3.1" level="project" />
<orderEntry type="library" name="com.android.support:support-annotations:25.3.1@jar" level="project" />
<orderEntry type="library" name="org.webkit:android-jsc-r174650" level="project" />
<orderEntry type="module" module-name="react-native-navigation" />
</component>
</module>

View File

@@ -94,8 +94,8 @@ def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false def enableProguardInReleaseBuilds = false
android { android {
compileSdkVersion 23 compileSdkVersion 27
buildToolsVersion "23.0.1" buildToolsVersion "26.0.2"
defaultConfig { defaultConfig {
applicationId "com.deightonar" applicationId "com.deightonar"
@@ -140,6 +140,7 @@ dependencies {
compile fileTree(dir: "libs", include: ["*.jar"]) compile fileTree(dir: "libs", include: ["*.jar"])
compile "com.android.support:appcompat-v7:23.0.1" compile "com.android.support:appcompat-v7:23.0.1"
compile "com.facebook.react:react-native:+" // From node_modules compile "com.facebook.react:react-native:+" // From node_modules
compile project(':react-native-navigation')
} }
// Run this once to be able to run the application with BUCK // Run this once to be able to run the application with BUCK

View File

@@ -1,15 +1,11 @@
package com.deightonar; package com.deightonar;
import com.facebook.react.ReactActivity; // import com.facebook.react.ReactActivity;
import com.reactnativenavigation.controllers.SplashActivity;
public class MainActivity extends ReactActivity { public class MainActivity extends SplashActivity {
// @Override
/** // protected String getMainComponentName() {
* Returns the name of the main component registered from JavaScript. // return "DeightonAR";
* This is used to schedule rendering of the component. // }
*/
@Override
protected String getMainComponentName() {
return "DeightonAR";
}
} }

View File

@@ -11,35 +11,63 @@ import com.facebook.soloader.SoLoader;
import java.util.Arrays; import java.util.Arrays;
import java.util.List; import java.util.List;
public class MainApplication extends Application implements ReactApplication { import com.reactnativenavigation.NavigationApplication;
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { public class MainApplication extends NavigationApplication {
@Override @Override
public boolean getUseDeveloperSupport() { public boolean isDebug() {
// Make sure you are using BuildConfig from your own application
return BuildConfig.DEBUG; return BuildConfig.DEBUG;
} }
@Override
protected List<ReactPackage> getPackages() { protected List<ReactPackage> getPackages() {
// Add additional packages you require here
// No need to add RnnPackage and MainReactPackage
return Arrays.<ReactPackage>asList( return Arrays.<ReactPackage>asList(
new MainReactPackage() // eg. new VectorIconsPackage()
); );
} }
@Override @Override
protected String getJSMainModuleName() { public List<ReactPackage> createAdditionalReactPackages() {
return getPackages();
}
@Override
public String getJSMainModuleName() {
return "index"; return "index";
} }
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
@Override
public void onCreate() {
super.onCreate();
SoLoader.init(this, /* native exopackage */ false);
}
} }
// public class MainApplication extends Application implements ReactApplication {
//
// private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
// @Override
// public boolean getUseDeveloperSupport() {
// return BuildConfig.DEBUG;
// }
//
// @Override
// protected List<ReactPackage> getPackages() {
// return Arrays.<ReactPackage>asList(
// new MainReactPackage()
// );
// }
//
// @Override
// protected String getJSMainModuleName() {
// return "index";
// }
// };
//
// @Override
// public ReactNativeHost getReactNativeHost() {
// return mReactNativeHost;
// }
//
// @Override
// public void onCreate() {
// super.onCreate();
// SoLoader.init(this, /* native exopackage */ false);
// }
// }

View File

@@ -5,7 +5,7 @@ buildscript {
jcenter() jcenter()
} }
dependencies { dependencies {
classpath 'com.android.tools.build:gradle:2.2.3' classpath 'com.android.tools.build:gradle:3.0.1'
// NOTE: Do not place your application dependencies here; they belong // NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files // in the individual module build.gradle files

View File

@@ -1,5 +1,6 @@
#Wed Mar 07 13:09:40 PST 2018
distributionBase=GRADLE_USER_HOME distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip

View File

@@ -0,0 +1,11 @@
## This file is automatically generated by Android Studio.
# Do not modify this file -- YOUR CHANGES WILL BE ERASED!
#
# This file must *NOT* be checked into Version Control Systems,
# as it contains information specific to your local configuration.
#
# Location of the SDK. This is only used by Gradle.
# For customization when using a Version Control System, please read the
# header note.
#Wed Mar 07 13:03:42 PST 2018
sdk.dir=/Users/john/Library/Android/sdk

View File

@@ -1,3 +1,6 @@
rootProject.name = 'DeightonAR' rootProject.name = 'DeightonAR'
include ':app' include ':app'
include ':react-native-navigation'
project(':react-native-navigation').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-navigation/android/app/')

View File

@@ -1,4 +1 @@
import App from './src/App' import './src/app'
import App from './App';
import { AppRegistry } from 'react-native'
AppRegistry.registerComponent('DeightonAR', () => App);

View File

@@ -1,5 +1,15 @@
{ {
"images" : [ "images" : [
{
"idiom" : "iphone",
"size" : "20x20",
"scale" : "2x"
},
{
"idiom" : "iphone",
"size" : "20x20",
"scale" : "3x"
},
{ {
"idiom" : "iphone", "idiom" : "iphone",
"size" : "29x29", "size" : "29x29",
@@ -29,6 +39,11 @@
"idiom" : "iphone", "idiom" : "iphone",
"size" : "60x60", "size" : "60x60",
"scale" : "3x" "scale" : "3x"
},
{
"idiom" : "ios-marketing",
"size" : "1024x1024",
"scale" : "1x"
} }
], ],
"info" : { "info" : {

12
mobile/src/app.js Normal file
View File

@@ -0,0 +1,12 @@
import { Platform } from 'react-native'
import { Navigation } from 'react-native-navigation'
import { registerScreens } from './screens'
registerScreens()
Navigation.startSingleScreenApp({
screen: {
screen: 'app.Home',
title: 'Home',
}
})

View File

@@ -0,0 +1,44 @@
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export class Home extends React.Component {
constructor(props) {
super(props);
this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent.bind(this));
}
onNavigatorEvent(event) {
switch(event.id) {
case 'willAppear':
break;
case 'didAppear':
this.props.navigator.showModal({ screen: 'app.Login' })
break;
case 'willDisappear':
break;
case 'didDisappear':
break;
case 'willCommitPreview':
break;
}
}
render() {
return (
<View style={styles.container}>
<Text>Hello John</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

View File

@@ -0,0 +1,36 @@
import React from 'react';
import { StyleSheet, Text, Image, Switch, TextInput, View, Button } from 'react-native';
import logoImage from './images/deighton.png'
export class Login extends React.Component {
constructor(props) {
super(props)
}
handleLogin() {
this.props.navigator.dismissModal()
}
render() {
return (
<View style={styles.container}>
<Image source={logoImage} />
<Text>Email:</Text>
<TextInput />
<Text>Password:</Text>
<TextInput />
<Switch /><Text>Remember Me</Text>
<Button title='Login' onPress={this.handleLogin.bind(this)} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#00ff00',
alignItems: 'center',
justifyContent: 'center',
},
});

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@@ -0,0 +1,8 @@
import { Home } from './Home'
import { Login } from './Login'
import { Navigation } from 'react-native-navigation'
export function registerScreens() {
Navigation.registerComponent('app.Home', () => Home)
Navigation.registerComponent('app.Login', () => Login)
}

View File

@@ -117,16 +117,14 @@ module.exports = {
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
enforce: 'pre', enforce: 'pre',
use: [ use: [{
{ options: {
options: { formatter: eslintFormatter,
formatter: eslintFormatter, eslintPath: require.resolve('eslint'),
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
}, },
], loader: require.resolve('eslint-loader'),
}, ],
include: paths.appSrc, include: paths.appSrc,
}, },
{ {
@@ -134,67 +132,66 @@ module.exports = {
// match the requirements. When no loader matches it will fall // match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list. // back to the "file" loader at the end of the loader list.
oneOf: [ oneOf: [
// "url" loader works like "file" loader except that it embeds assets // "url" loader works like "file" loader except that it embeds assets
// smaller than specified limit in bytes as data URLs to avoid requests. // smaller than specified limit in bytes as data URLs to avoid requests.
// A missing `test` is equivalent to a match. // A missing `test` is equivalent to a match.
{ {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: require.resolve('url-loader'), loader: require.resolve('url-loader'),
options: { options: {
limit: 10000, limit: 10000,
name: 'static/media/[name].[hash:8].[ext]', name: 'static/media/[name].[hash:8].[ext]',
}, },
},
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// 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 <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
}, },
}, // Process JS with Babel.
{ {
loader: require.resolve('postcss-loader'), test: /\.(js|jsx|mjs)$/,
options: { include: paths.appSrc,
// Necessary for external CSS imports to work loader: require.resolve('babel-loader'),
// https://github.com/facebookincubator/create-react-app/issues/2677 options: {
ident: 'postcss', // This is a feature of `babel-loader` for webpack (not Babel itself).
plugins: () => [ // It enables caching results in ./node_modules/.cache/babel-loader/
require('postcss-flexbugs-fixes'), // directory for faster rebuilds.
autoprefixer({ cacheDirectory: true,
browsers: [ },
'>1%', },
'last 4 versions', // "postcss" loader applies autoprefixer to our CSS.
'Firefox ESR', // "css" loader resolves paths in CSS and adds assets as dependencies.
'not ie < 9', // React doesn't support IE8 anyway // "style" loader turns CSS into JS modules that inject <style> tags.
], // In production, we use a plugin to extract that CSS to a file, but
flexbox: 'no-2009', // in development "style" loader enables hot editing of CSS.
}), {
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
], ],
}, },
},
],
},
// "file" loader makes sure those assets get served by WebpackDevServer. // "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename. // When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder. // In production, they would get copied to the `build` folder.

View File

@@ -42,10 +42,11 @@ const cssFilename = 'static/css/[name].[contenthash:8].scss';
// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27) // (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
// However, our output is structured with css, js and media folders. // However, our output is structured with css, js and media folders.
// To have this structure working with relative paths, we have to use custom options. // To have this structure working with relative paths, we have to use custom options.
const extractTextPluginOptions = shouldUseRelativeAssetPaths const extractTextPluginOptions = shouldUseRelativeAssetPaths ? // Making sure that the publicPath goes back to to build folder.
? // Making sure that the publicPath goes back to to build folder. {
{ publicPath: Array(cssFilename.split('/').length).join('../') } publicPath: Array(cssFilename.split('/').length).join('../')
: {}; } :
{};
// This is the production configuration. // This is the production configuration.
// It compiles slowly and is focused on producing a fast and minimal bundle. // It compiles slowly and is focused on producing a fast and minimal bundle.
@@ -71,8 +72,8 @@ module.exports = {
// Point sourcemap entries to original disk location (format as URL on Windows) // Point sourcemap entries to original disk location (format as URL on Windows)
devtoolModuleFilenameTemplate: info => devtoolModuleFilenameTemplate: info =>
path path
.relative(paths.appSrc, info.absoluteResourcePath) .relative(paths.appSrc, info.absoluteResourcePath)
.replace(/\\/g, '/'), .replace(/\\/g, '/'),
}, },
resolve: { resolve: {
// This allows you to set a fallback for where Webpack should look for modules. // This allows you to set a fallback for where Webpack should look for modules.
@@ -123,16 +124,14 @@ module.exports = {
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
enforce: 'pre', enforce: 'pre',
use: [ use: [{
{ options: {
options: { formatter: eslintFormatter,
formatter: eslintFormatter, eslintPath: require.resolve('eslint'),
eslintPath: require.resolve('eslint'),
},
loader: require.resolve('eslint-loader'),
}, },
], loader: require.resolve('eslint-loader'),
}, ],
include: paths.appSrc, include: paths.appSrc,
}, },
{ {
@@ -140,85 +139,82 @@ module.exports = {
// match the requirements. When no loader matches it will fall // match the requirements. When no loader matches it will fall
// back to the "file" loader at the end of the loader list. // back to the "file" loader at the end of the loader list.
oneOf: [ oneOf: [
// "url" loader works just like "file" loader but it also embeds // "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests. // assets smaller than specified size as data URLs to avoid requests.
{ {
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/], test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.svg$/],
loader: require.resolve('url-loader'), loader: require.resolve('url-loader'),
options: { options: {
limit: 10000, limit: 10000,
name: 'static/media/[name].[hash:8].[ext]', name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
// Process JS with Babel. // Process JS with Babel.
{ {
test: /\.(js|jsx|mjs)$/, test: /\.(js|jsx|mjs)$/,
include: paths.appSrc, include: paths.appSrc,
loader: require.resolve('babel-loader'), loader: require.resolve('babel-loader'),
options: { options: {
compact: true, compact: true,
}, },
}, },
// The notation here is somewhat confusing. // The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS. // "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies. // "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>, // "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different. // but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a // (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship // separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style> // a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still // tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be // use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file. // in the main CSS file.
{ {
test: /\.css$/, test: /\.css$/,
loader: ExtractTextPlugin.extract( loader: ExtractTextPlugin.extract(
Object.assign( Object.assign({
{
fallback: { fallback: {
loader: require.resolve('style-loader'), loader: require.resolve('style-loader'),
options: { options: {
hmr: false, hmr: false,
}, },
}, },
use: [ use: [{
{ loader: require.resolve('css-loader'),
loader: require.resolve('css-loader'), options: {
options: { importLoaders: 1,
importLoaders: 1, minimize: true,
minimize: true, sourceMap: shouldUseSourceMap,
sourceMap: shouldUseSourceMap, },
}, },
}, {
{ loader: require.resolve('postcss-loader'),
loader: require.resolve('postcss-loader'), options: {
options: {
// Necessary for external CSS imports to work // Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677 // https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss', ident: 'postcss',
plugins: () => [ plugins: () => [
require('postcss-flexbugs-fixes'), require('postcss-flexbugs-fixes'),
autoprefixer({ autoprefixer({
browsers: [ browsers: [
'>1%', '>1%',
'last 4 versions', 'last 4 versions',
'Firefox ESR', 'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway 'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
], ],
flexbox: 'no-2009', },
}), },
], ],
},
}, },
], extractTextPluginOptions
}, )
extractTextPluginOptions ),
) // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
), },
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder. // "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename. // When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules // This loader doesn't use a "test" so it will catch all modules
@@ -234,7 +230,7 @@ module.exports = {
name: 'static/media/[name].[hash:8].[ext]', name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
// ** STOP ** Are you adding a new loader? // ** STOP ** Are you adding a new loader?
// Make sure to add the new loader(s) before the "file" loader. // Make sure to add the new loader(s) before the "file" loader.
], ],
}, },