{ "componentChunkName": "component---src-templates-blog-post-js", "path": "/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-2/", "result": {"data":{"markdownRemark":{"html":"
This blog post is part of a series. You must finish part-1 before continuing here.
\n

Full-stack application structure

\n

There are many ways you can structure a full-stack application. The structure that we are going to create below is the one that I use in all my projects.

\n
\n

I created this application on windows. However, you should have no problem following the instructions on macOS.

\n
\n

Create a folder named mern-auth and open it in Visual Studio Code or any other code editor of your choice. By the way, if you have not tried VS code yet, I highly encourage you to give it a try.

\n

You can open an integrated terminal inside VS code using the keyboard shortcut Ctrl+` (with the backtick character). This is convenient as you don’t have to switch between windows.

\n

Inside mern-auth, create a React project called client.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> npx create-react-app client
\n
\n

If you have previously installed create-react-app globally via npm install -g create-react-app, it is recommended that you uninstall the package using npm uninstall -g create-react-app to ensure that npx always uses the latest version. npx comes with npm 5.2+ and higher.

\n
\n

Next, inside mern-auth, create a folder named server.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> mkdir server
\n

At this stage, inside mern-auth, we have two folders - client & server. What’s more, create-react-app has already initialized the client folder as a Git repository by default. If you cd into the client folder, you can see the .git sub-folder (hidden) using the following command:

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth\\client> ls -Fo
\n

\n \n \n \n \n

\n

We will also see a .gitignore file inside the client folder.

\n

\n \n \n \n \n

\n

Let’s also initialize the mern-auth folder as a Git repository.

\n
PS C:\\Users\\Delhivery\\Desktop\\mern-auth> git init
\n

I highly recommend that you push the local repository to a remote repository such as GitHub and do commits at regular intervals.

\n

Our application structure is now ready.

\n

Go to part-3

\n","frontmatter":{"title":"Implement JWT Based User Authentication in a MERN Stack App - Part 2","date":"2021-05-22"}}},"pageContext":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-2/","prev":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-1/"},"frontmatter":{"modules":null}},"next":{"fields":{"slug":"/implement-jwt-based-user-authentication-in-a-mern-stack-app-part-3/"},"frontmatter":{"modules":null}}}}, "staticQueryHashes": ["3159585216"]}