Skip to content

Commit 07e42d5

Browse files
neonexusneonexus
authored
Merge pull request #44 from neonexus/master
Updated to React v18. Minor other fixes.
2 parents b3fde5e + 01b63db commit 07e42d5

Some content is hidden

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

54 files changed

+150
-164
lines changed

‎CHANGELOG.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
# Changelog
22

3-
## [v3.0.0-beta](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v2.0.0...v3.0.0-beta.2) (2022-03-19)
3+
## [v3.0.0-beta](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v2.0.0...v3.0.0-beta.3) (2022-04-02)
44

55
### Features
66

77
* Fixed this CHANGELOG (incorrect date).
88
* Updated Dockerfile and package.json to new Node LTS v16.13 requirement.
9-
* Fixed Dockerfile to build PROD assets, not DEV assets.
109
* Fixed a bug in the `forceUppercaseOnFirst` function in the [`User model`](api/models/User.js).
1110
* Changed default connections to datastores to have SSL enabled (must now explicitly disable SSL connections for remote servers).
1211
* Removed use of global model names, in-favor of `sails.models` usage (for consistency, and to more easily allow disabling of global models).
1312

1413
### Breaking Changes
1514

15+
* Updated to React v18. See: [the upgrade guid to React 18](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html).
1616
* Updated to React Router DOM v6. See: [the v5 -> v6 migration guide](https://reactrouter.com/docs/en/v6/upgrading/v5). This requires a **MAJOR** overhaul of how routes are handled.
1717
* Moved some controllers into a "common" folder, instead of the "admin" folder (as they could be used outside of admin controls).
1818

1919
### Known Issues
2020

21-
* There is an issue with the Webpack dev server, and the way React routes are handled. Currently, if you aren't loading from an entry point, nothing renders. While this is not an issue for built assets, it is an issue if you are working with the auto-reload dev server. I'm still working on a fix for this, and suspect it's an issue from moving to new React Router.
21+
* There is an issue with the Webpack dev server, and the way React routes are handled. Currently, if you aren't loading from an entry point (like /admin), and you refresh the page (on like /admin/dashboard), nothing renders. While this is not an issue for built assets, it is an issue if you are working with the auto-reload dev server. I'm still working on a fix for this, and suspect it's an issue from moving to the new React Router.
2222

2323
## [v2.0.0](https://github.com/neonexus/sails-react-bootstrap-webpack/compare/v1.9.0...v2.0.0) (2021-10-24)
2424

‎README.md

Lines changed: 25 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -49,52 +49,37 @@ Sails, by default, has middleware (akin to [Express.js Middleware](https://expre
4949

5050
### Scripts built into [`package.json`](package.json):
5151

52-
| Command | Description
53-
|-------------------------------|-------------------
54-
| npm run start | Will run both `npm run lift` and `npm run open:client` in parallel.
55-
| npm run open:client | Will run the [Webpack Dev Server](https://webpack.js.org/configuration/dev-server/) and open a browser tab / window.
56-
| npm run lift | The same thing as `sails lift` or `node app.js`; will "[lift our Sails](https://sailsjs.com/documentation/reference/command-line-interface/sails-lift)" instance (aka starting the API).
57-
| npm run lift:prod | The same thing as `sails lift --prod` or `NODE_ENV=production node app.js`.
58-
| npm run debug | Alias for `node --inspect app.js`.
59-
| npm run build | Will run `npm run clean`, then will build production-ready files with Webpack in the `.tmp/public` folder.
60-
| npm run build:dev | Same thing as `npm run build`, except that it will not optimize the files, retaining newlines and empty spaces.
61-
| npm run clean | Will basically delete everything in the `.tmp` folder.
62-
| npm run lines | Will count the lines of code in the project, minus `.gitignore`'d files, for funzies. There are currently about 7k custom lines in this repo (views, controllers, helpers, hooks, etc).
63-
| npm run test | Run [Mocha](https://mochajs.org/) tests. Everything starts in the [`test/hooks.js`](test/hooks.js) file.
64-
| npm run coverage | Runs [NYC](https://www.npmjs.com/package/nyc) coverage reporting of the Mocha tests, which generates HTML in `test/coverage`.
52+
| Command | Description |
53+
|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
54+
| npm run start | Will run both `npm run lift` and `npm run open:client` in parallel. |
55+
| npm run open:client | Will run the [Webpack Dev Server](https://webpack.js.org/configuration/dev-server/) and open a browser tab / window. |
56+
| npm run lift | The same thing as `sails lift` or `node app.js`; will "[lift our Sails](https://sailsjs.com/documentation/reference/command-line-interface/sails-lift)" instance (aka starting the API). |
57+
| npm run lift:prod | The same thing as `sails lift --prod` or `NODE_ENV=production node app.js`. |
58+
| npm run debug | Alias for `node --inspect app.js`. |
59+
| npm run build | Will run `npm run clean`, then will build production-ready files with Webpack in the `.tmp/public` folder. |
60+
| npm run build:dev | Same thing as `npm run build`, except that it will not optimize the files, retaining newlines and empty spaces. |
61+
| npm run clean | Will basically delete everything in the `.tmp` folder. |
62+
| npm run lines | Will count the lines of code in the project, minus `.gitignore`'d files, for funzies. There are currently about 7k custom lines in this repo (views, controllers, helpers, hooks, etc). |
63+
| npm run test | Run [Mocha](https://mochajs.org/) tests. Everything starts in the [`test/hooks.js`](test/hooks.js) file. |
64+
| npm run coverage | Runs [NYC](https://www.npmjs.com/package/nyc) coverage reporting of the Mocha tests, which generates HTML in `test/coverage`. |
6565

6666
### Environment Variables
6767
There are a few environment variables that the remote configuration files are set up for. There are currently 3 variables that change names between DEV and PROD; this is intentional, and has proven very useful in my experience. DEV has shorter names like `DB_HOST`, where PROD has fuller names like `DB_HOSTNAME`. This helps with ensuring you are configuring the correct remote server, and has prevented accidental DEV deployments to PROD.
6868

6969
If you DO NOT like this behavior, and would prefer the variables stay the same across your environments, feel free to change them in [`config/env/development.js`](config/env/development.js) and [`config/env/production.js`](config/env/production.js)
7070

71-
#### DEVELOPMENT Environment Variables:
72-
| DEV Variable | DEV default | Description
73-
|---------------------|-------------------|----------------------
74-
| ASSETS_URL | "" (empty string) | Webpack is configured to modify static asset URLs to point to a CDN, like CloudFront. MUST end with a slash " / ", or be empty.
75-
| BASE_URL | https://myapi.app | The address of the Sails instance.
76-
| DB_HOST | localhost | The hostname of the datastore. (Notice this is `DB_HOSTNAME` on PROD.)
77-
| DB_USER | root | Username for the datastore. (Notice this is `DB_USERNAME` on PROD.)
78-
| DB_PASS | mypass | Password for the datastore. (Notice this is `DB_PASSWORD` on PROD.)
79-
| DB_NAME | myapp | The name of the database inside the datastore.
80-
| DB_PORT | 3306 | The port number for datastore.
81-
| DB_SSL | false | If the datastore requires SSL, set this to "true".
82-
| SESSION_SECRET | "" (empty string) | This is used to sign cookies, and SHOULD be set, especially on PRODUCTION environments.
83-
| DATA_ENCRYPTION_KEY | "" (empty string) | **Currently unused; intended for future use.**
84-
85-
#### PRODUCTION Environment Variables:
86-
| PROD Variable | PROD default | Description
87-
|---------------------|-------------------|----------------------
88-
| ASSETS_URL | "" (empty string) | Webpack is configured to modify static asset URLs to point to a CDN, like CloudFront. MUST end with a slash " / ", or be empty.
89-
| BASE_URL | https://myapi.app | The address of the Sails instance.
90-
| DB_HOSTNAME | localhost | The hostname of the datastore. (Notice this is `DB_HOST` on DEV.)
91-
| DB_USERNAME | produser | Username for the datastore. (Notice this is `DB_USER` on DEV.)
92-
| DB_PASSWORD | myprodpassword | Password for the datastore. (Notice this is `DB_PASS` on DEV.)
93-
| DB_NAME | proddatabase | The name of the database inside the datastore.
94-
| DB_PORT | 3306 | The port number for datastore.
95-
| DB_SSL | false | If the datastore requires SSL, set this to "true".
96-
| SESSION_SECRET | "" (empty string) | This is used to sign cookies, and SHOULD be set, especially on PRODUCTION environments.
97-
| DATA_ENCRYPTION_KEY | "" (empty string) | **Currently unused; intended for future use.**
71+
| DEV Variable | DEV default | PROD Variable | PROD default | Description |
72+
|---------------------|-------------------|---------------------|--------------------|---------------------------------------------------------------------------------------------------------------------------------|
73+
| ASSETS_URL | "" (empty string) | ASSETS_URL | "" (empty string) | Webpack is configured to modify static asset URLs to point to a CDN, like CloudFront. MUST end with a slash " / ", or be empty. |
74+
| BASE_URL | https://myapi.app | BASE_URL | https://myapi.app | The address of the Sails instance. |
75+
| DB_HOST | localhost | DB_HOSTNAME | localhost | The hostname of the datastore. |
76+
| DB_USER | root | DB_USERNAME | produser | Username for the datastore. |
77+
| DB_PASS | mypass | DB_PASSWORD | myprodpassword | Password for the datastore. |
78+
| DB_NAME | myapp | DB_NAME | proddatabase | The name of the database inside the datastore. |
79+
| DB_PORT | 3306 | DB_PORT | 3306 | The port number for datastore. |
80+
| DB_SSL | true | DB_SSL | true | If the datastore requires SSL, set this to "true". |
81+
| SESSION_SECRET | "" (empty string) | SESSION_SECRET | "" (emptry string) | This is used to sign cookies, and SHOULD be set, especially on PRODUCTION environments. |
82+
| DATA_ENCRYPTION_KEY | "" (empty string) | DATA_ENCRYPTION_KEY | "" (empty string) | **Currently unused; intended for future use.** |
9883

9984
## Request Logging
10085
Automatic incoming request logging, is a 2 part process. First, the [`request-logger` hook](api/hooks/request-logger.js) gathers info from the request, and creates a new [`RequestLog` record](api/models/RequestLog.js), making sure to mask anything that may be sensitive, such as passwords. Then, a custom response gathers information from the response, again, scrubbing sensitive data (using the [customToJSON](https://sailsjs.com/documentation/concepts/models-and-orm/model-settings?identity=#customtojson) feature of Sails models) to prevent leaking of password hashes, or anything else that should never be publicly accessible. The [`keepModelsSafe` helper](api/helpers/keep-models-safe.js) and the custom responses (such as [ok](api/responses/ok.js) or [serverError](api/responses/serverError.js)) are responsible for the final leg of request logs.

‎assets/src/admin.jsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
2+
import {createRoot} from 'react-dom/client';
43
import {
54
BrowserRouter,
65
Routes,
@@ -18,4 +17,5 @@ function AdminApp() {
1817
);
1918
}
2019

21-
ReactDOM.render(<AdminApp />, document.getElementById('root'));
20+
const root = createRoot(document.getElementById('root'));
21+
root.render(<AdminApp />);

‎assets/src/data/userContext.jsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,7 @@ export class UserProvider extends React.Component {
5050

5151
render() {
5252
return (
53-
<userContext.Provider
54-
value={this.state}
55-
>
53+
<userContext.Provider value={this.state}>
5654
{/* eslint-disable-next-line react/prop-types */}
5755
{this.props.children}
5856
</userContext.Provider>

‎assets/src/index.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import {createRoot} from 'react-dom/client';
33
import {
44
BrowserRouter as Router,
55
Routes,
@@ -24,4 +24,5 @@ function IndexApp() {
2424
);
2525
}
2626

27-
ReactDOM.render(<IndexApp />, document.getElementById('root'));
27+
const root = createRoot(document.getElementById('root'));
28+
root.render(<IndexApp />, );

‎assets/src/main.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import ReactDOM from 'react-dom';
2+
import {createRoot} from 'react-dom/client';
33

44
import Main from './Main/Main';
55

@@ -9,4 +9,5 @@ function MainApp() {
99
);
1010
}
1111

12-
ReactDOM.render(<MainApp />, document.getElementById('root'));
12+
const root = createRoot(document.getElementById('root'));
13+
root.render(<MainApp />);

‎config/env/development.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ module.exports = {
3434

3535
models: {
3636
// This is set as safe, so remote development machines are behaving like remote production machines.
37-
// It's also good practice, and so one can document any need updates to the schema for PROD prior to deployment.
38-
// Use local.js to override locally. It is NOT recommended to change this for any remote machines.
37+
// It's also good practice, so one can document any need updates to the schema for PROD prior to deployment.
38+
// Use local.js to override locally. It is NOT recommended this change for any remote machines.
3939
migrate: 'safe'
4040
},
4141

0 commit comments

Comments
 (0)