Skip to content

Commit 5086f98

Browse files
committed
day 29 - update CRA, add travis deploy script, update post
1 parent 13999fa commit 5086f98

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+11299
-5830
lines changed

day-21/src/App.test.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import { render } from '@testing-library/react';
3-
import App from './App';
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import App from "./containers/Root";
44

5-
test('renders learn react link', () => {
5+
test("renders welcom home text", () => {
66
const { getByText } = render(<App />);
7-
const linkElement = getByText(/learn react/i);
8-
expect(linkElement).toBeInTheDocument();
7+
const textElement = getByText(/welcome home/i);
8+
expect(textElement).toBeInTheDocument();
99
});

day-27/src/App.test.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import React from 'react';
2-
import { render } from '@testing-library/react';
3-
import App from './App';
1+
import React from "react";
2+
import { render } from "@testing-library/react";
3+
import App from "./containers/Root";
44

5-
test('renders learn react link', () => {
5+
test("renders welcom home text", () => {
66
const { getByText } = render(<App />);
7-
const linkElement = getByText(/learn react/i);
8-
expect(linkElement).toBeInTheDocument();
7+
const textElement = getByText(/welcome home/i);
8+
expect(textElement).toBeInTheDocument();
99
});

day-29/.travis.yml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
language: node_js
2+
node_js:
3+
- "10.15.0"
4+
before_deploy:
5+
- npm run build
6+
deploy:
7+
provider: script
8+
skip_cleanup: true
9+
script: sh scripts/deploy.sh
10+
on:
11+
branch: master

day-29/config/development.config.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TIME_SERVER='https://fullstacktime.herokuapp.com'

day-29/config/env.js

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
"use strict";
2+
3+
const fs = require("fs");
4+
const path = require("path");
5+
const paths = require("./paths");
6+
const dotenv = require("dotenv");
7+
8+
const { resolve, join } = path;
9+
10+
// Make sure that including paths.js after env.js will read .env variables.
11+
delete require.cache[require.resolve("./paths")];
12+
13+
const NODE_ENV = process.env.NODE_ENV;
14+
if (!NODE_ENV) {
15+
throw new Error(
16+
"The NODE_ENV environment variable is required but was not specified."
17+
);
18+
}
19+
20+
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
21+
const dotenvFiles = [
22+
`${paths.dotenv}.${NODE_ENV}.local`,
23+
`${paths.dotenv}.${NODE_ENV}`,
24+
// Don't include `.env.local` for `test` environment
25+
// since normally you expect tests to produce the same
26+
// results for everyone
27+
NODE_ENV !== "test" && `${paths.dotenv}.local`,
28+
paths.dotenv
29+
].filter(Boolean);
30+
31+
// Load environment variables from .env* files. Suppress warnings using silent
32+
// if this file is missing. dotenv will never modify any environment variables
33+
// that have already been set. Variable expansion is supported in .env files.
34+
// https://github.com/motdotla/dotenv
35+
// https://github.com/motdotla/dotenv-expand
36+
dotenvFiles.forEach(dotenvFile => {
37+
if (fs.existsSync(dotenvFile)) {
38+
require("dotenv-expand")(
39+
require("dotenv").config({
40+
path: dotenvFile
41+
})
42+
);
43+
}
44+
});
45+
46+
// We support resolving modules according to `NODE_PATH`.
47+
// This lets you use absolute paths in imports inside large monorepos:
48+
// https://github.com/facebook/create-react-app/issues/253.
49+
// It works similar to `NODE_PATH` in Node itself:
50+
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
51+
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
52+
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
53+
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
54+
// We also resolve them to make sure all tools using them work consistently.
55+
const appDirectory = fs.realpathSync(process.cwd());
56+
process.env.NODE_PATH = (process.env.NODE_PATH || "")
57+
.split(path.delimiter)
58+
.filter(folder => folder && !path.isAbsolute(folder))
59+
.map(folder => path.resolve(appDirectory, folder))
60+
.join(path.delimiter);
61+
62+
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
63+
// injected into the application via DefinePlugin in Webpack configuration.
64+
const REACT_APP = /^REACT_APP_/i;
65+
66+
const currentDir = resolve(__dirname);
67+
const rootDir = join(currentDir, "..");
68+
69+
// 1. Step one (loading the default .env file)
70+
const globalDotEnv = dotenv.config({
71+
path: join(rootDir, ".env"),
72+
silent: true
73+
});
74+
// 2. Load the environment config
75+
const envDotEnv = dotenv.config({
76+
path: join(currentDir, NODE_ENV + `.config.env`),
77+
silent: true
78+
});
79+
80+
const allVars = Object.assign(
81+
{},
82+
{
83+
NODE_ENV: NODE_ENV
84+
},
85+
globalDotEnv.parsed,
86+
envDotEnv.parsed
87+
);
88+
89+
function getClientEnvironment(publicUrl) {
90+
const raw = Object.keys(process.env)
91+
.filter(key => REACT_APP.test(key))
92+
.reduce(
93+
(env, key) => {
94+
env[key] = process.env[key];
95+
return env;
96+
},
97+
{
98+
// Useful for determining whether we’re running in production mode.
99+
// Most importantly, it switches React into the correct mode.
100+
NODE_ENV: process.env.NODE_ENV || "development",
101+
// Useful for resolving the correct path to static assets in `public`.
102+
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
103+
// This should only be used as an escape hatch. Normally you would put
104+
// images into the `src` and `import` them in code to get their paths.
105+
PUBLIC_URL: publicUrl,
106+
...allVars
107+
}
108+
);
109+
// Stringify all values so we can feed into Webpack DefinePlugin
110+
const stringified = {
111+
"process.env": Object.keys(raw).reduce((env, key) => {
112+
env[key] = JSON.stringify(raw[key]);
113+
return env;
114+
}, {})
115+
};
116+
117+
return { raw, stringified };
118+
}
119+
120+
module.exports = getClientEnvironment;

day-29/config/jest/cssTransform.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use strict';
2+
3+
// This is a custom Jest transformer turning style imports into empty objects.
4+
// http://facebook.github.io/jest/docs/en/webpack.html
5+
6+
module.exports = {
7+
process() {
8+
return 'module.exports = {};';
9+
},
10+
getCacheKey() {
11+
// The output is always the same.
12+
return 'cssTransform';
13+
},
14+
};

day-29/config/jest/fileTransform.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
'use strict';
2+
3+
const path = require('path');
4+
const camelcase = require('camelcase');
5+
6+
// This is a custom Jest transformer turning file imports into filenames.
7+
// http://facebook.github.io/jest/docs/en/webpack.html
8+
9+
module.exports = {
10+
process(src, filename) {
11+
const assetFilename = JSON.stringify(path.basename(filename));
12+
13+
if (filename.match(/\.svg$/)) {
14+
// Based on how SVGR generates a component name:
15+
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16+
const pascalCaseFilename = camelcase(path.parse(filename).name, {
17+
pascalCase: true,
18+
});
19+
const componentName = `Svg${pascalCaseFilename}`;
20+
return `const React = require('react');
21+
module.exports = {
22+
__esModule: true,
23+
default: ${assetFilename},
24+
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25+
return {
26+
$$typeof: Symbol.for('react.element'),
27+
type: 'svg',
28+
ref: ref,
29+
key: null,
30+
props: Object.assign({}, props, {
31+
children: ${assetFilename}
32+
})
33+
};
34+
}),
35+
};`;
36+
}
37+
38+
return `module.exports = ${assetFilename};`;
39+
},
40+
};

day-29/config/modules.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
'use strict';
2+
3+
const fs = require('fs');
4+
const path = require('path');
5+
const paths = require('./paths');
6+
const chalk = require('react-dev-utils/chalk');
7+
const resolve = require('resolve');
8+
9+
/**
10+
* Get additional module paths based on the baseUrl of a compilerOptions object.
11+
*
12+
* @param {Object} options
13+
*/
14+
function getAdditionalModulePaths(options = {}) {
15+
const baseUrl = options.baseUrl;
16+
17+
// We need to explicitly check for null and undefined (and not a falsy value) because
18+
// TypeScript treats an empty string as `.`.
19+
if (baseUrl == null) {
20+
// If there's no baseUrl set we respect NODE_PATH
21+
// Note that NODE_PATH is deprecated and will be removed
22+
// in the next major release of create-react-app.
23+
24+
const nodePath = process.env.NODE_PATH || '';
25+
return nodePath.split(path.delimiter).filter(Boolean);
26+
}
27+
28+
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
29+
30+
// We don't need to do anything if `baseUrl` is set to `node_modules`. This is
31+
// the default behavior.
32+
if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
33+
return null;
34+
}
35+
36+
// Allow the user set the `baseUrl` to `appSrc`.
37+
if (path.relative(paths.appSrc, baseUrlResolved) === '') {
38+
return [paths.appSrc];
39+
}
40+
41+
// If the path is equal to the root directory we ignore it here.
42+
// We don't want to allow importing from the root directly as source files are
43+
// not transpiled outside of `src`. We do allow importing them with the
44+
// absolute path (e.g. `src/Components/Button.js`) but we set that up with
45+
// an alias.
46+
if (path.relative(paths.appPath, baseUrlResolved) === '') {
47+
return null;
48+
}
49+
50+
// Otherwise, throw an error.
51+
throw new Error(
52+
chalk.red.bold(
53+
"Your project's `baseUrl` can only be set to `src` or `node_modules`." +
54+
' Create React App does not support other values at this time.'
55+
)
56+
);
57+
}
58+
59+
/**
60+
* Get webpack aliases based on the baseUrl of a compilerOptions object.
61+
*
62+
* @param {*} options
63+
*/
64+
function getWebpackAliases(options = {}) {
65+
const baseUrl = options.baseUrl;
66+
67+
if (!baseUrl) {
68+
return {};
69+
}
70+
71+
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
72+
73+
if (path.relative(paths.appPath, baseUrlResolved) === '') {
74+
return {
75+
src: paths.appSrc,
76+
};
77+
}
78+
}
79+
80+
/**
81+
* Get jest aliases based on the baseUrl of a compilerOptions object.
82+
*
83+
* @param {*} options
84+
*/
85+
function getJestAliases(options = {}) {
86+
const baseUrl = options.baseUrl;
87+
88+
if (!baseUrl) {
89+
return {};
90+
}
91+
92+
const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
93+
94+
if (path.relative(paths.appPath, baseUrlResolved) === '') {
95+
return {
96+
'^src/(.*)$': '<rootDir>/src/$1',
97+
};
98+
}
99+
}
100+
101+
function getModules() {
102+
// Check if TypeScript is setup
103+
const hasTsConfig = fs.existsSync(paths.appTsConfig);
104+
const hasJsConfig = fs.existsSync(paths.appJsConfig);
105+
106+
if (hasTsConfig && hasJsConfig) {
107+
throw new Error(
108+
'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109+
);
110+
}
111+
112+
let config;
113+
114+
// If there's a tsconfig.json we assume it's a
115+
// TypeScript project and set up the config
116+
// based on tsconfig.json
117+
if (hasTsConfig) {
118+
const ts = require(resolve.sync('typescript', {
119+
basedir: paths.appNodeModules,
120+
}));
121+
config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122+
// Otherwise we'll check if there is jsconfig.json
123+
// for non TS projects.
124+
} else if (hasJsConfig) {
125+
config = require(paths.appJsConfig);
126+
}
127+
128+
config = config || {};
129+
const options = config.compilerOptions || {};
130+
131+
const additionalModulePaths = getAdditionalModulePaths(options);
132+
133+
return {
134+
additionalModulePaths: additionalModulePaths,
135+
webpackAliases: getWebpackAliases(options),
136+
jestAliases: getJestAliases(options),
137+
hasTsConfig,
138+
};
139+
}
140+
141+
module.exports = getModules();

0 commit comments

Comments
 (0)