Lee Brandt
Yes. The newest version of create-react-app bundles up the service worker. instead of:
import registerServiceWorker from ‘./registerServiceWorker’;
…
registerServiceWorker();
You’ll use:
import * as serviceWorker from ‘./serviceWorker’;
…
serviceWorker.register();
Allan
hi guys,
could you perhaps update the sdk with the new Context Api. The above example here is great, but internally it uses legacy context.
https://github.com/okta/okt…
cheers Allan
Trevor
Hey, I’m not sure if i’m the only one but for some reason my modal wont appear. When i click the fab button it routes to ‘post/new’ but nothing appears. Does anyone know what i did wrong?
Matt Raible
Can you look in your browser’s developer console and see if there’s an error there?
Jim Cook
I had the same issue. I had to remove the “exact” option from the SecureRoute in App.js.
Matt Raible
Can you please compare your package.json with the one from the example app? It’s possible you’re using newer versions of dependencies than this tutorial expects.
Jim Cook
I installed all of the dependencies without versions. I know it’s a bad assumption that that would work, but I lucked out. Other than the change I mentioned above, everything worked.
Fabio
Good morning,
I’ve an issue with the deployment of my react app on Azure web app service.
I’ve followed your guide in local environment it works, but when I’ve tried to deploy on Azure app service the login with okta doesn’t work.
So let me explain. I’ve uploaded node express server on Azure node app service. The react frontend i’ve uploaded the “npm run build” result in an other Azure app service.
I’ve added the Login redirect URI and trusted origins (cors) on okta admin panel.
But during the login the online version of my app replay this issue: “Not Found The requested URL /implicit/callback was not found on this server.” and the URL is “https://supportexor.azurewe…” .
Many thanks in advance
Regards
Fabio
Matt Raible
This happens when you don’t have your webserver configured to serve up a SPA. You basically need to configure it to route all requests to your index.html. You can likely reproduce the problem locally if you use http-server to serve up your app. Using http-server-spa can help solve the problem.
Fabio
Many thanks Matt, it helps.
Anyway in local I can simulate the error that I see online with “npm install http-server -g” and then run my app with http-server [path] [options].
When I install “npm http-server-spa -g” and then retry locally with http-server-spa <directory> <fallback> <port> it works, but when I do “npm run build” and upload the build folder on Azure App Service it doesn’t work, there is the same error as I mention before: “Not Found The requested URL /implicit/callback was not found on this server.” and the URL stay “https://supportexor.azurewe……”.
Thanks in advance for you help.
Best regards.
Fabio.
Matt Raible
I tried searching for “azure app service spa” and found Best way to host a Single Page Application (SPA) in Microsoft Azure. I’m not sure it it’ll work, but it seems like a good start!
Philip Nguyen
Hey thanks for this tutorial. However, I ran into an error in PostsManager.js in the render function.
At the line this.state.posts.length > 0 ? ...
the error I run into is: TypeError: Cannot read property ‘length’ of undefined
I’m not sure how to fix this and I’m hoping you might know the solution to this error.
Thanks in advance!
Matt Raible
Are you definining a state variable in your class and calling this.getPosts() in your componentDidMount():
class PostsManager extends Component {
state = {
loading: true,
posts: ,
};
componentDidMount() {
this.getPosts();
}
async fetch(method, endpoint, body) {
try {
const response = await fetch(${API}${endpoint}, {
method,
body: body && JSON.stringify(body),
headers: {
‘content-type’: ‘application/json’,
accept: ‘application/json’,
authorization: Bearer ${await this.props.auth.getAccessToken()},
},
});
return await response.json();
} catch (error) {
console.error(error);
}
}
async getPosts() {
this.setState({ loading: false, posts: await this.fetch(‘get’, ‘/posts’) });
}
…
}
If so, you might try comparing your code to the example on GitHub. You also might check out this issue which seems to be similar.
Peter Southwell
I kinda do it like this… Using Dockerfile in the same directory as my node.
------------------ Dockerfile ------------
# Use Node v8 as the base image.
FROM node:latest
#COPY [–chown=root:root] . .
COPY . .
RUN npm install
RUN npm run build
CMD [“npm”, “start”]
-------------- End
This works really great to me… Super super simple… We use .env file for config bits.
Our app is an NPM app using react.
=========================
Package.json
{
“name”: “ilm-client”,
“version”: “0.1.0”,
“private”: true,
“dependencies”: {
“axios”: “^0.19.0”,
“flux”: “^3.1.3”,
“mdbreact”: “4.10.0”,
“moment”: “^2.23.0”,
“query-string”: “^6.8.1”,
“react”: “^16.8.6”,
“react-bootstrap”: “^0.32.4”,
“react-dom”: “^16.8.6”,
“react-google-login”: “^5.0.4”,
“react-loader-spinner”: “^2.3.0”,
“react-redux”: “^5.0.7”,
“react-router-dom”: “^4.3.1”,
“react-scripts”: “^2.1.8”,
“react-select”: “^2.4.4”,
“react-table”: “^6.10.0”,
“react-toastify”: “^5.3.1”,
“redux”: “^3.5.2”,
“redux-devtools-extension”: “^2.13.7”,
“redux-logger”: “^3.0.6”,
“redux-thunk”: “^2.1.0”
},
“scripts”: {
“start”: “react-scripts start”,
“compile”: “react-scripts build”,
“build”: “react-scripts build”,
“test”: “react-scripts test --env=jsdom”,
“eject”: “react-scripts eject”
},
“browserslist”: [
“>0.2%”,
“not ie <= 11”,
“not op_mini all”
]
}
Also in the same directory as the docker file.
So by hand… Ill just check out the project… Run the docker. but… it should at least show how easy it is to get going on a vanila linux.
Hope that helps and isn’t TOOOOO obvious.
For us… we use this for GCLOUD. It deploys to a template (the dockerfile) builds it… And runs it under load balance. Works really nice.
Peter Southwell
The reason for Docker… is it sand boxes my Node app.
NPM can get twisty if your running several version or many projects… So this keeps the server image or webapp really lean and clean. Lets me see and know exactly how it’s setup and runs. I can stop it… Roll it back… back it up. Cluster it… Super super fast and easy… all with the docker. Love that technology… Yes… It’s common!
Peter Southwell
Plus… It stops the work on my box syndrome… All devs are testing the same thing that’ll be running in production.
Matt Raible
Thanks for posting this, Peter!
Alexandre A. Barbosa
The project could not be created with the suggested version of yarn, nor with any other. Would anyone know another way to use yarn, I’m following the tutorial without it. log below:
yarnpkg add --exact react react-dom react-scripts --cwd my-react-app has failed.
error eslint@6.1.0: The engine “node” is incompatible with this module. Expected version “^8.10.0 || ^10.13.0 || >=11.10.1”.
error Found incompatible module info Visit https://yarnpkg.com/en/docs… for documentation about this command.
Alexandre A. Barbosa
The file registerServiceWorker.js does not exists more try with serviceWorker.js
Log below:
Failed to compile. ./src/index.js
Module not found: Can’t resolve ‘./registerServiceWorker’ in ‘my-react-app\src’
Alexandre A. Barbosa
I was wrong the file serviceWorker does not fit, log below:
Failed to compile
./src/index.js
Attempted import error: ‘./serviceWorker’ does not contain a default export (imported as ‘registerServiceWorker’).
I had all the good will, but it is impossible to follow this tutorial, I’m leaving.
This is pure waste of time. >(