[examples] Update create-react-app examples

Includes basic output when running `yarn create react-app`
mui · oliviertassinari · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018 · Oct 30, 2018
commit b846cd561f6f0859eceef0448d34b73cc89d7331
diff --git a/examples/create-react-app-with-flow/.gitignore b/examples/create-react-app-with-flow/.gitignore
@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

diff --git a/examples/create-react-app-with-flow/package.json b/examples/create-react-app-with-flow/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app-with-flow",
-  "version": "3.0.0",
+  "version": "3.2.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^3.0.0",

diff --git a/examples/create-react-app-with-flow/public/favicon.ico b/examples/create-react-app-with-flow/public/favicon.ico
diff --git a/examples/create-react-app-with-flow/public/index.html b/examples/create-react-app-with-flow/public/index.html
@@ -1,16 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
-    <meta name="viewport" content="user-scalable=0, initial-scale=1, minimum-scale=1, width=device-width, height=device-height">
-    <!-- PWA primary color -->
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

diff --git a/examples/create-react-app-with-flow/public/manifest.json b/examples/create-react-app-with-flow/public/manifest.json
@@ -4,11 +4,11 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

diff --git a/examples/create-react-app-with-jss/.gitignore b/examples/create-react-app-with-jss/.gitignore
@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

diff --git a/examples/create-react-app-with-jss/package.json b/examples/create-react-app-with-jss/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app-with-jss",
-  "version": "3.0.0",
+  "version": "3.2.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
@@ -9,7 +9,7 @@
     "react": "latest",
     "react-dom": "latest",
     "react-jss": "latest",
-    "react-scripts": "^2.0.4"
+    "react-scripts": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/examples/create-react-app-with-jss/public/favicon.ico b/examples/create-react-app-with-jss/public/favicon.ico
diff --git a/examples/create-react-app-with-jss/public/index.html b/examples/create-react-app-with-jss/public/index.html
@@ -1,16 +1,15 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
-    <!-- PWA primary color -->
     <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -20,10 +19,10 @@
       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`.
     -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
     <title>My page</title>
   </head>
   <body>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>

diff --git a/examples/create-react-app-with-jss/public/manifest.json b/examples/create-react-app-with-jss/public/manifest.json
@@ -4,11 +4,11 @@
   "icons": [
     {
       "src": "favicon.ico",
-      "sizes": "192x192",
-      "type": "image/png"
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
     }
   ],
-  "start_url": "./index.html",
+  "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
   "background_color": "#ffffff"

diff --git a/examples/create-react-app-with-typescript/.gitignore b/examples/create-react-app-with-typescript/.gitignore
@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

diff --git a/examples/create-react-app-with-typescript/package.json b/examples/create-react-app-with-typescript/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-app-with-typescript",
-  "version": "0.1.0",
+  "version": "3.2.2",
   "private": true,
   "main": "src/index.tsx",
   "dependencies": {

diff --git a/examples/create-react-app-with-typescript/public/index.html b/examples/create-react-app-with-typescript/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
     <!--
       manifest.json provides metadata used when your web app is added to the

diff --git a/examples/create-react-app/.gitignore b/examples/create-react-app/.gitignore
@@ -1,7 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
+/.pnp
+.pnp.js
 
 # testing
 /coverage

diff --git a/examples/create-react-app/package.json b/examples/create-react-app/package.json
@@ -1,13 +1,13 @@
 {
   "name": "create-react-app",
-  "version": "3.0.0",
+  "version": "3.2.2",
   "private": true,
   "dependencies": {
     "@material-ui/core": "latest",
     "prop-types": "latest",
     "react": "latest",
     "react-dom": "latest",
-    "react-scripts": "^2.0.4"
+    "react-scripts": "latest"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/examples/create-react-app/public/favicon.ico b/examples/create-react-app/public/favicon.ico
diff --git a/examples/create-react-app/public/index.html b/examples/create-react-app/public/index.html
@@ -1,14 +1,41 @@
-<!doctype html>
-<html lang="en" dir="ltr">
+<!DOCTYPE html>
+<html lang="en">
   <head>
     <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
     <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no">
-    <!-- PWA primary color -->
     <meta name="theme-color" content="#000000">
-    <title>My page</title>
+    <!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. 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`.
+    -->
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <title>My page</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>
diff --git a/examples/create-react-app/public/manifest.json b/examples/create-react-app/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}