Saturday, April 22, 2017

MERN Series Step 5 - Auth0 React Client Template


Reviewing the link from last time, https://auth0.com/docs/quickstart/spa/react, let's see what the create-react-app scripts get us.

This also led me to the link for the facebook create-react-app scripts: https://github.com/facebookincubator/create-react-app, I'll review and compare that as well in this article.

It looks like the create-react-app script is focused on the client side portion of the app, which makes sense, and the folder structure is somewhat different than that provided by tech-dojo's start repo (https://github.com/tech-dojo/mern, so they're all in one place).

For review, here's the structure tech-dojo gave us:

| .gitignore 
| CONTRIBUTING.md 
| favicon.ico 
| gulpfile.js 
| LICENSE 
| package.json 
| README.md 
| yarn.lock 
+---app 
| | .DS_Store 
| | index.ejs 
| | main.jsx 
| | style.css 
| | 
| +---components 
| | | App.jsx 
| | | 
| | +---articles 
| | | CreateArticle.jsx 
| | | EditArticle.jsx 
| | | Form.jsx 
| | | ListArticles.jsx 
| | | ListArticlesChild.jsx 
| | | ViewArticle.jsx 
| | | ViewArticleChild.jsx 
| | | 
| | +---core 
| | | Footer.jsx 
| | | Header.jsx 
| | | Home.jsx 
| | | Template.jsx 
| | | 
| | \---users 
| | EditUserProfile.jsx 
| | EditUserProfileChild.jsx 
| | Signin.jsx 
| | SigninChild.jsx 
| | SignOut.jsx 
| | Signup.jsx 
| | SignupChild.jsx 
| | 
| +---images 
| | | … 
| | | 
| | \---fav 
| | … 
| | 
| +---services 
| | Authentication.js 
| | 
| \---stores 
| ArticleStore.jsx 
| RestAPI_Helper.js 
| UserStore.jsx 
+---server 
| | express.js 
| | passport.js 
| | seeds.js 
| | server.js 
| | 
| +---config 
| | | config.js 
| | | 
| | \---env 
| | all.js 
| | development.js 
| | local.example.js 
| | production.js 
| | test.js 
| | 
| +---controllers 
| | | .DS_Store 
| | | articles.server.controller.js 
| | | errors.server.controller.js 
| | | users.server.controller.js 
| | | 
| | \---users 
| | users.authentication.server.controller.js 
| | users.authorization.server.controller.js 
| | users.password.server.controller.js 
| | users.profile.server.controller.js 
| | 
| +---models 
| | .DS_Store 
| | Article.js 
| | User.js 
| | 
| +---routes 
| | .DS_Store 
| | article.server.routes.js 
| | routeHelper.js 
| | users.server.routes.js 
| | 
| \---strategies 
| facebook.js 
| github.js 
| google.js 
| linkedin.js 
| local.js 
| twitter.js 
\---tests 
| article.server.model.test.js 
| article.server.routes.test.js 
| user.server.model.test.js 
\---componentTest 
article.test.jsx 
articleStore.test.jsx 
user.test.jsx 
userStore.test.jsx 

This does contain some potentially extraneous items that someone not initially learning React may not need (i.e. articles, users), and yes, I know lots of "may" in there. I am learning React, so I can't tell you that yet.

Facebook's vanilla create-react-app script gives you this structure:

| .gitignore
| package.json
| README.md
|
+---public
| favicon.ico
| index.html
|
\---src
App.css
App.js
App.test.js
index.css
index.js
logo.svg

They have a great section on why to use this for creating your app, and how to customize it in the future if you need to: https://github.com/facebookincubator/create-react-app#why-use-this. This structure seems a bit more simplistic than I'd like, having everything in the src folder, but may be good for getting something up and going quickly.

Installing the auth extensions to the facebook app using create-react-app my-app1 --scripts-version auth0-react-scripts gives the same basic structure, but at least has a components folder under src, and the addition of auth0 stuff.

| .env.example 
| .gitignore 
| package.json 
| README.md 
+---public 
| favicon.ico 
| index.html 
\---src 
| auth.js 
| index.css 
| index.js 
| logo.svg 
\---components 
App.js 
App.test.js 
EditProfile.css 
EditProfile.js 
Home.css 
Home.js 
Login.css 
Login.js 
Site.css 
Site.js 

So, I'll be sticking with my initial layout, and just copy the auth0 stuff from the components folder generated by the auth0 extensions to create-react-app into an auth folder under my components folder, so it will end up looking like this:

| +---components 
| | | App.jsx 
| | | 
| | +---articles 
| | | CreateArticle.jsx 
| | | EditArticle.jsx 
| | | Form.jsx 
| | | ListArticles.jsx 
| | | ListArticlesChild.jsx 
| | | ViewArticle.jsx 
| | | ViewArticleChild.jsx 
| | | 
| | +---core 
| | | Footer.jsx 
| | | Header.jsx 
| | | Home.jsx 
| | | Template.jsx 
| | | 
| | +---users 
| | | EditUserProfile.jsx 
| | | EditUserProfileChild.jsx 
| | | Signin.jsx 
| | | SigninChild.jsx 
| | | SignOut.jsx 
| | | Signup.jsx 
| | | SignupChild.jsx 
| | \---auth 
| | EditProfile.css 
| | EditProfile.js 
| | Login.css 
| | Login.js 

There's also an auth.js in the src folder one layer up from components that I'm copying over also. So that's going to be my basic layout with auth0, next article I'll cover anything needed to integrate and get everything running with the MERN starter project from tech-dojo.

x
x

No comments:

Post a Comment