Build a Basic CRUD App with Node and React

Michael Adewunmi

This is a nice post. Thanks a lot for this tutorial. I am a newbie javascript developer and I also just started learning about Okta - A wonderful authentication service. You guys are doing an EXTREMELY WONDERFUL JOB. I will sure be using it once I start getting clients.

Meanwhile I have a little question. I really don’t know how the “UpdatedAt” property in the post object had its value (and probably got into the database). When I studied the point in the code where the post was created, I realised we didn’t do any newDate() while creating the post.

Also From the backend, the database table was created with the columns “title” and “body”. So Its really interesting and (confusing) how moments was able to get post.updatedAt. Although I’m guessing Sequelize could be the one doing the magic of automatically creating an “updatedAt” column in our table and probably setting a value for it and adding it to the database as soon every post is created.

I am thinking this way because I also saw a “createdAt” property in the post’s object when I checked my code with react Developer tools. I’ll be glad to know if I’m right. Please forgive me if i’m wrong and if the answer to my question should be obvious. Thanks in Advance and Keep up the good work guys.

Dan Dascalescu

Nice but theya whole lotta code for a login button. Meteor reduces all that boilerplate to simply {{> loginButtons}}

Katherine Hambley

This is nice and all, but I’m wondering why most of these tutorials for Node, React, Angular, etc do not include deployment guides. I’d like to be able to deploy the app I created to a custom domain, either on my Windows Server or on github pages or some other cloud service. Where do I find information for doing that? It would be nice to show off my work.

Matt Raible

Hello Katherine: we have a tutorial that shows how to deploy your secure Vue.js App to AWS. It uses Node and Express on the backend, so should be similar to this tutorial.

We also have a couple others too:

* Bootiful Development with Spring Boot and React: has scripts for deploying to Cloud Foundry and Heroku. I’ve also wrote quite a few Angular ones that deploy to the same providers.
* Build a Video Chat Service with JavaScript, WebRTC, and Okta: shows you how to deploy to Netlify.

Hope this helps!

Matt Raible

Thanks for the tip Dan! I looked at Meteor’s docs and it looks like a cool feature. Any chance there’s a generic OAuth/OIDC provider instead of ones for specific providers? If there’s no generic one, how hard would it be to add one for Okta?

Matt Raible

Hello Michael. You are correct! Sequelize adds createdAt and updatedAt automatically. It also manages them for you: http://docs.sequelizejs.com…

Dan Dascalescu

I don’t think there’s a generic provider, but I’m not an auth expert. Just wanted to say that from a developer’s perspective, copy/pasting and managing all the boilerplate auth code for Okta (or auth0 for that matter) is quite a bit more complicated than it is with Meteor, or with Firebase Auth for example (i.e. 1-2 lines). With Firebase Auth, logging in is done in one line (auth.signInWithRedirect(googleAuthProvider)}, and there’s no other boilerplate involved than importing the module (see this 3rd party tutorial). Logging out is also a one liner.

grd0_

Hi, I have the next error and I don’t know why. Find in internet and nothing. Thanks! https://uploads.disquscdn.c…

arjmandi

Dude, Thank you for your great tutorial
I got a problem with registerServiceWorker.js
it’s registerServiceWorker.js in your code but when I create the project it’s serviceWorker.js there, any idea?

Matt Raible

What version of Create React App are you using? Can you provide the steps you used? I think something might’ve broke between the version I used in this post and the latest version.

arjmandi

it turns out that the new ‘create-react-app’ has changed it. you can mention it in your tutorial. Also you can get more info here:
https://github.com/facebook…

arjmandi

I also had a this problem:
./node_modules/@material-ui/core/ButtonBase/ButtonBase.js
Module not found: Can’t resolve '@babel/runtime/helpers/builtin/assertThisInitialized’

They say it’s because this version of material-ui (1.3.1) does not properly support transitive dependency. I’m updating it and I’ll share the result. any comment here?

arjmandi

the fix was done by calebj0seph here : https://github.com/mui-org/…
"This seems to be caused by the v7.0.0-beta.56 release of @babel/runtime, which split part of the package up into @babel/runtime-corejs2. Material-UI lists ^7.0.0-beta.42 as the version range for @babel/runtime, which will select the latest release v7.0.0-beta.56, causing this issue.

For a quick workaround, you can try npm install --save-exact @babel/runtime@7.0.0-beta.55 if using npm or yarn add @babel/runtime@7.0.0-beta.55 --exact if using Yarn."

I used the yarn version and it works

Gabriel Silveira

I got the same issue here :frowning:

arjmandi

I couldn’t finish the tutorial, it didn’t work for me,
I suggest you get the code from github and run it from the source provided in the github page.

Amanda Richwalski

THANK YOU! i spent about 2 hours trying to fix this error before seeing your comment

Amanda Richwalski

Do we need to create the .env.local file?

If not where is it located, I can only see it reference in gitignore and README.md?

Lee Brandt

It looks like you may be copying a diff into your code. The “— a/src/App.js” and “+++ b/src/App.js” are just letting you know it is a diff between two versions of the /src/App.js file.

I hope that helps.

Lee Brandt

yes. You’ll create the .env.local file in the root of the project (at the same level as .gitignore).