Skip to content
This repository was archived by the owner on Jun 8, 2022. It is now read-only.

Commit aa69c24

Browse files
rnnyrkrnnyrk
authored
Merge pull request #12 from react-prime/v10
v9 -> v10
2 parents 1bf2d95 + f60efde commit aa69c24

Some content is hidden

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

44 files changed

+17011
-14046
lines changed

‎.eslintrc

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"space-in-parens": ["error", "never"],
6464
"space-infix-ops": "error",
6565
"eol-last": ["error", "always"],
66+
"import/no-anonymous-default-export": [1],
6667
"import/no-unresolved": [0],
6768
"import/named": [0],
6869
"import/order": ["error", {
@@ -87,24 +88,13 @@
8788
"component": true,
8889
"html": true
8990
}],
90-
9191
"react-hooks/exhaustive-deps": 0,
92-
93-
"@typescript-eslint/indent": [2, 2],
94-
"@typescript-eslint/explicit-function-return-type": [0],
95-
"@typescript-eslint/no-empty-interface": [0],
96-
"@typescript-eslint/prefer-interface": [0],
97-
"@typescript-eslint/explicit-member-accessibility": [0],
98-
"@typescript-eslint/no-use-before-define": [0],
99-
"@typescript-eslint/no-object-literal-type-assertion": [0],
100-
"@typescript-eslint/no-parameter-properties": [0],
101-
"@typescript-eslint/no-non-null-assertion": [0],
102-
"@typescript-eslint/camelcase": [0],
103-
"@typescript-eslint/ban-ts-ignore": [0],
10492
"@typescript-eslint/explicit-module-boundary-types": [1, {
10593
"allowedNames": [
10694
"render",
10795
"getInitialProps",
96+
"getStaticProps",
97+
"getServerSideProps",
10898
"componentDidMount",
10999
"componentWillUnmount",
110100
"shouldComponentUpdate",
@@ -119,6 +109,19 @@
119109
],
120110
"allowDirectConstAssertionInArrowFunctions": true
121111
}],
122-
"@typescript-eslint/ban-ts-comment": [0]
112+
"@typescript-eslint/semi": 1,
113+
"@typescript-eslint/indent": [2, 2],
114+
"@typescript-eslint/ban-ts-ignore": 0,
115+
"@typescript-eslint/ban-ts-comment": 0,
116+
"@typescript-eslint/explicit-function-return-type": [0],
117+
"@typescript-eslint/explicit-member-accessibility": [0],
118+
"@typescript-eslint/no-empty-interface": [0],
119+
"@typescript-eslint/prefer-interface": [0],
120+
"@typescript-eslint/no-use-before-define": [0],
121+
"@typescript-eslint/no-object-literal-type-assertion": [0],
122+
"@typescript-eslint/no-parameter-properties": [0],
123+
"@typescript-eslint/no-non-null-assertion": [0],
124+
"@typescript-eslint/camelcase": [0],
125+
"@typescript-eslint/no-redeclare": 0
123126
}
124127
}

‎.gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
dist/
22
node_modules/
3-
src/.next/
3+
**/.next/
44
bundle_analytics/
55

66
.idea

‎README.md

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
## Quick start
88
Use [create-react-prime](https://www.npmjs.com/package/create-react-prime) for easy install.
99
```
10-
npx create-react-prime -t ssr my-app
10+
npx create-react-prime -b react-ssr my-app
1111
cd my-app
1212
npm start
1313
```
@@ -18,7 +18,6 @@ npm start
1818
* [React](https://reactjs.org/)
1919
* [Redux](https://redux.js.org/)
2020
* [Redux Thunk](https://github.com/gaearon/redux-thunk) to handle async actions
21-
* [Next Routes](https://github.com/fridays/next-routes)
2221
* [Styled-Components](https://www.styled-components.com)
2322
* [Workbox](https://developers.google.com/web/tools/workbox/) for offline support and caching
2423
* [Code splitting](https://reactjs.org/docs/code-splitting.html)
@@ -30,7 +29,6 @@ npm start
3029
* Start develop server: `$ npm start`
3130
* Create production build: `$ npm run build`
3231
* Start server: `$ npm run server`
33-
* Remove build folder: `$ npm run clean`
3432
* Run ESLint: `$ npm run lint`
3533
* Run webpack-bundle-analyzer: `$ npm run analyzer`
3634

@@ -47,10 +45,6 @@ Run the server file to start server:
4745
For production I recommend to use [PM2](http://pm2.keymetrics.io/) to run the server with advanced process management.
4846

4947
## Development Workflow
50-
### Routes
51-
We use the [next-routes](https://github.com/fridays/next-routes) package to generate server and client routes.
52-
Your app routes can be created in the `server/routes.ts` file. Refer to the [next-routes](https://github.com/fridays/next-routes/blob/master/README.md) documentation for how to set up routes. Route files can be added to `src/components/pages`.
53-
5448
### Components
5549
The components are separated in `Modules` and `Common`. Modules are bundled components which depend on each other. Common components are components that are self-contained and can be used through the entire app.
5650

‎config/env.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
export const port = process.env.PORT || 3000;
2-
export const env = process.env.NODE_ENV || 'development';
3-
export const appEnv = process.env.APP_ENV || 'development';
1+
export const PORT = process.env.PORT || 3000;
2+
export const NODE_ENV = process.env.NODE_ENV || 'development';
3+
export const APP_ENV = process.env.APP_ENV || 'development';

‎config/next.ts

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎config/polyfills.ts

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎src/components/next-env.d.ts renamed to ‎next-env.d.ts

File renamed without changes.

‎next.config.ts

Lines changed: 73 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
/* eslint-disable @typescript-eslint/no-var-requires */
22
import path from 'path';
3-
import { Configuration, EntryFunc, Entry } from 'webpack';
3+
import type { NextConfig } from 'next/dist/next-server/server/config-shared';
4+
import type * as webpack from 'webpack';
45
import { PHASE_PRODUCTION_BUILD, PHASE_PRODUCTION_SERVER } from 'next/constants';
5-
import nextOptions from './config/next';
66

7-
const APP_ENV = process.env.APP_ENV || 'development';
7+
import { NODE_ENV, APP_ENV, PORT } from './config/env';
88

99
const GLOBALS = {
1010
'process.env': {
11-
NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'),
12-
APP_ENV: JSON.stringify(process.env.APP_ENV || 'development'),
13-
PORT: process.env.PORT || 3000,
11+
NODE_ENV: JSON.stringify(NODE_ENV),
12+
APP_ENV: JSON.stringify(APP_ENV),
13+
PORT: PORT,
1414
},
1515
__DEV__: APP_ENV === 'development',
1616
__TEST__: APP_ENV === 'test',
@@ -19,19 +19,17 @@ const GLOBALS = {
1919
};
2020

2121

22-
/**
23-
* NextJS does not seem to want Next Config to be typed
24-
* Thread: https://github.com/vercel/next.js/pull/10275
25-
*/
26-
27-
2822
// Set up our Next environment based on build phase
29-
const config = (phase: string, config) => {
30-
let cfg = {
23+
const config = (phase: string, config: NextConfig) => {
24+
let cfg: NextConfig = {
3125
...config,
32-
distDir: nextOptions.distDir,
26+
distDir: 'dist',
3327
// Remove x-powered-by header to remove information about the server
3428
poweredByHeader: false,
29+
future: {
30+
// Enable webpack 5
31+
webpack5: true,
32+
},
3533
};
3634

3735
/**
@@ -46,105 +44,105 @@ const config = (phase: string, config) => {
4644

4745
cfg = {
4846
...cfg,
49-
webpack: (config: Configuration, { isServer }) => {
47+
webpack: (config: webpack.Configuration, { isServer }) => {
5048
/**
5149
* WEBPACK CONFIG
5250
* Your regular Webpack configuration, except we have to work with an already existing
5351
* Webpack configuration from Next. When changing anything, keep in mind to preserve the
5452
* config of Next (unless you are trying to overwrite something) or things might break.
5553
*/
5654

57-
58-
// Push polyfills before all other code
59-
const originalEntry = config.entry as EntryFunc;
60-
61-
config.entry = async () => {
62-
const entries = await originalEntry() as Entry;
63-
const mainEntry = entries['main.js'] as string[];
64-
65-
if (mainEntry && !mainEntry.includes(nextOptions.polyfillsPath)) {
66-
mainEntry.unshift(nextOptions.polyfillsPath);
67-
}
68-
69-
return entries;
55+
const staticPathConfig = {
56+
publicPath: '/_next/static/',
57+
outputPath: `${isServer ? '../' : ''}static/`,
7058
};
7159

72-
7360
const rules = [
7461
{
7562
test: /\.svg$/,
7663
oneOf: [
7764
{
7865
resourceQuery: /external/,
79-
loader: 'url-loader',
80-
options: {
81-
limit: 10000,
82-
},
66+
use: [{
67+
loader: 'url-loader',
68+
options: {
69+
limit: 10000,
70+
},
71+
}],
8372
},
8473
{
85-
loader: '@svgr/webpack',
74+
use: ['@svgr/webpack'],
8675
},
8776
],
8877
},
8978
{
9079
test: /\.(jpe?g|png|gif|ico|webp)$/,
91-
use: [
80+
oneOf: [
81+
{
82+
resourceQuery: /external/,
83+
use: [{
84+
loader: 'file-loader',
85+
options: {
86+
...staticPathConfig,
87+
name: '[name].[ext]',
88+
},
89+
}],
90+
},
9291
{
93-
loader: 'url-loader',
94-
options: {
95-
limit: 10000,
96-
fallback: 'file-loader',
97-
publicPath: '/_next/static/',
98-
outputPath: `${isServer ? '../' : ''}static/`,
99-
name: '[name].[ext]',
100-
},
92+
use: [{
93+
loader: 'url-loader',
94+
options: {
95+
...staticPathConfig,
96+
limit: 10000,
97+
name: '[name].[ext]',
98+
},
99+
}],
101100
},
102101
],
103102
},
104103
];
105104

106-
// Include all relevant directories with .tsx files that need to be transpiled
107-
config.module!.rules.forEach((rule) => {
108-
const ruleContainsTs = rule.test?.toString().includes('tsx');
109-
110-
if (ruleContainsTs) {
111-
if (Array.isArray(rule.include)) {
112-
rule.include = rule.include.map((includePath) => {
113-
// Go down a directory to include everything from 'src'
114-
if (typeof includePath === 'string' && includePath.includes('src')) {
115-
return path.resolve('src');
116-
}
117-
118-
return includePath;
119-
});
105+
// Add our rules
106+
if (!config.module) {
107+
config.module = {
108+
rules: [],
109+
};
110+
}
120111

121-
rule.include?.push(path.resolve('server'));
122-
}
123-
}
124-
});
112+
config.module.rules = [
113+
...config.module.rules!,
114+
...rules,
115+
];
125116

126-
// Preserve Next rules while appending our rules
127-
config.module!.rules = [...config.module!.rules, ...rules];
128117

129118
// Add plugins
130-
config.plugins = config.plugins!.concat(
119+
if (!config.plugins) {
120+
config.plugins = [];
121+
}
122+
123+
config.plugins = [
124+
...config.plugins,
131125
new webpack.DefinePlugin(GLOBALS),
132126
new CopyWebpackPlugin({
133127
patterns: [
134128
{ from: path.resolve('public'), to: path.resolve('dist/static') },
135129
],
136130
}),
137-
);
131+
];
132+
138133

139134
// Add tsconfig paths to webpack
140-
if (config.resolve) {
141-
if (Array.isArray(config.resolve.plugins)) {
142-
config.resolve.plugins.push(new TSConfigPathsPlugin());
143-
} else {
144-
config.resolve.plugins = [new TSConfigPathsPlugin()];
145-
}
135+
if (!config.resolve) {
136+
config.resolve = {
137+
plugins: [],
138+
};
146139
}
147140

141+
config.resolve.plugins = [
142+
...config.resolve.plugins!,
143+
new TSConfigPathsPlugin(),
144+
];
145+
148146
return config;
149147
},
150148
};
@@ -190,7 +188,9 @@ const config = (phase: string, config) => {
190188

191189
// Add Bundle Analyzer if requested by script
192190
if (process.env.BUNDLE_ANALYZE) {
193-
const withBundleAnalyzer = require('@zeit/next-bundle-analyzer');
191+
const withBundleAnalyzer = require('@next/bundle-analyzer')({
192+
enabled: process.env.BUNDLE_ANALYZE,
193+
});
194194

195195
cfg = withBundleAnalyzer({
196196
...cfg,

‎nodemon.json

Lines changed: 0 additions & 6 deletions
This file was deleted.

0 commit comments

Comments
 (0)