├── src
├── index.js
├── index.css
├── App.jsx
└── index.html
├── .gitattributes
├── .babelrc
├── README.md
├── Dockerfile
├── package.json
├── webpack.config.js
└── .gitignore
/src/index.js:
--------------------------------------------------------------------------------
1 | import("./App");
2 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | dist/* linguist-vendored=false
2 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: Arial, Helvetica, sans-serif;
3 | }
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["@babel/preset-react", "@babel/preset-env"],
3 | "plugins": [
4 | ["@babel/transform-runtime"]
5 | ]
6 | }
7 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Cool React template, as seen in awesome tutorial https://www.youtube.com/watch?v=E3NHd-PkLrQ
2 |
3 | 2020 update - if you do git clone you'll be missing the .babelrc file and it's easy to miss that. Reference the repo code
4 |
--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
1 | FROM node:12
2 | WORKDIR /usr/src/app
3 |
4 | COPY package.json ./
5 | COPY yarn.lock ./
6 |
7 | RUN yarn install
8 |
9 | COPY . .
10 |
11 | RUN yarn build
12 |
13 | EXPOSE 8080
14 |
15 | CMD [ "yarn", "build:start" ]
16 |
--------------------------------------------------------------------------------
/src/App.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 |
4 | import "./index.css";
5 |
6 | const App = () => Hi there, I'm React from Webpack 5.
;
7 |
8 | ReactDOM.render(, document.getElementById("app"));
9 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Document
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "wp5-starter-react",
3 | "version": "1.0.1",
4 | "scripts": {
5 | "build": "webpack --mode production",
6 | "build:dev": "webpack --mode development",
7 | "build:start": "cd dist && PORT=8080 npx serve",
8 | "start": "webpack serve --open --mode development",
9 | "start:live": "webpack serve --open --mode development --liveReload",
10 | "docker:build": "docker build . -t wp5-starter",
11 | "docker:run": "docker run -p 8080:8080 wp5-starter"
12 | },
13 | "license": "MIT",
14 | "author": {
15 | "name": "Jack Herrington",
16 | "email": "jherr@pobox.com"
17 | },
18 | "devDependencies": {
19 | "@babel/core": "7.13.15",
20 | "@babel/plugin-transform-runtime": "^7.13.15",
21 | "@babel/preset-env": "^7.13.15",
22 | "@babel/preset-react": "7.13.13",
23 | "@webpack-cli/serve": "^1.3.1",
24 | "babel-loader": "8.2.2",
25 | "css-loader": "^5.2.1",
26 | "html-webpack-plugin": "^5.3.1",
27 | "style-loader": "2.0.0",
28 | "webpack": "5.31.2",
29 | "webpack-cli": "4.6.0",
30 | "webpack-dev-server": "3.11.2"
31 | },
32 | "dependencies": {
33 | "@babel/runtime": "^7.13.10",
34 | "react": "^17.0.2",
35 | "react-dom": "^17.0.2"
36 | }
37 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const HtmlWebPackPlugin = require("html-webpack-plugin");
2 | const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
3 |
4 | const deps = require("./package.json").dependencies;
5 | module.exports = {
6 | output: {
7 | publicPath: "http://localhost:8080/",
8 | },
9 |
10 | resolve: {
11 | extensions: [".jsx", ".js", ".json"],
12 | },
13 |
14 | devServer: {
15 | port: 8080,
16 | },
17 |
18 | module: {
19 | rules: [
20 | {
21 | test: /\.m?js/,
22 | type: "javascript/auto",
23 | resolve: {
24 | fullySpecified: false,
25 | },
26 | },
27 | {
28 | test: /\.css$/i,
29 | use: ["style-loader", "css-loader"],
30 | },
31 | {
32 | test: /\.(js|jsx)$/,
33 | exclude: /node_modules/,
34 | use: {
35 | loader: "babel-loader",
36 | },
37 | },
38 | ],
39 | },
40 |
41 | plugins: [
42 | new ModuleFederationPlugin({
43 | name: "starter",
44 | filename: "remoteEntry.js",
45 | remotes: {},
46 | exposes: {},
47 | shared: {
48 | ...deps,
49 | react: {
50 | singleton: true,
51 | requiredVersion: deps.react,
52 | },
53 | "react-dom": {
54 | singleton: true,
55 | requiredVersion: deps["react-dom"],
56 | },
57 | },
58 | }),
59 | new HtmlWebPackPlugin({
60 | template: "./src/index.html",
61 | }),
62 | ],
63 | };
64 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | lerna-debug.log*
8 |
9 | # Diagnostic reports (https://nodejs.org/api/report.html)
10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11 |
12 | # Runtime data
13 | pids
14 | *.pid
15 | *.seed
16 | *.pid.lock
17 |
18 | # Directory for instrumented libs generated by jscoverage/JSCover
19 | lib-cov
20 |
21 | # Coverage directory used by tools like istanbul
22 | coverage
23 | *.lcov
24 |
25 | # nyc test coverage
26 | .nyc_output
27 |
28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29 | .grunt
30 |
31 | # Bower dependency directory (https://bower.io/)
32 | bower_components
33 |
34 | # node-waf configuration
35 | .lock-wscript
36 |
37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
38 | build/Release
39 |
40 | # Dependency directories
41 | node_modules/
42 | jspm_packages/
43 |
44 | # Snowpack dependency directory (https://snowpack.dev/)
45 | web_modules/
46 |
47 | # TypeScript cache
48 | *.tsbuildinfo
49 |
50 | # Optional npm cache directory
51 | .npm
52 |
53 | # Optional eslint cache
54 | .eslintcache
55 |
56 | # Microbundle cache
57 | .rpt2_cache/
58 | .rts2_cache_cjs/
59 | .rts2_cache_es/
60 | .rts2_cache_umd/
61 |
62 | # Optional REPL history
63 | .node_repl_history
64 |
65 | # Output of 'npm pack'
66 | *.tgz
67 |
68 | # Yarn Integrity file
69 | .yarn-integrity
70 |
71 | # dotenv environment variables file
72 | .env
73 | .env.test
74 |
75 | # parcel-bundler cache (https://parceljs.org/)
76 | .cache
77 | .parcel-cache
78 |
79 | # Next.js build output
80 | .next
81 | out
82 |
83 | # Nuxt.js build / generate output
84 | .nuxt
85 | dist
86 |
87 | # Gatsby files
88 | .cache/
89 | # Comment in the public line in if your project uses Gatsby and not Next.js
90 | # https://nextjs.org/blog/next-9-1#public-directory-support
91 | # public
92 |
93 | # vuepress build output
94 | .vuepress/dist
95 |
96 | # Serverless directories
97 | .serverless/
98 |
99 | # FuseBox cache
100 | .fusebox/
101 |
102 | # DynamoDB Local files
103 | .dynamodb/
104 |
105 | # TernJS port file
106 | .tern-port
107 |
108 | # Stores VSCode versions used for testing VSCode extensions
109 | .vscode-test
110 |
111 | # yarn v2
112 | .yarn/cache
113 | .yarn/unplugged
114 | .yarn/build-state.yml
115 | .yarn/install-state.gz
116 | .pnp.*
117 |
--------------------------------------------------------------------------------