DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Chaeah Park
Chaeah Park

Posted on • Updated on

MERN stack project setup to push to Github

MERN project to push to Github

This is a step-by-step guideline about MERN project setup and first push of your full stack project to Github. If you need only the way regarding push to Github, please follow the steps from 3 to 11.

Prerequisite

  • You have installed Node.js in your work environment.
  • You have an account in Github.

1.Create directories for your project.

Create the project and server directories. The server(or backend) directory is a child of the project folder.

Do not create the client yet. The client directory will be created soon at the next step.

Create the project and server directories

2. Create a React app in the client folder.

In your command line, make sure you are inside of the project directory. Create a react application and name it as client (or frontend).

create-react-app in the client folder

$ cd project
$ npx create-react-app client
Enter fullscreen mode Exit fullscreen mode

3. Remove the git repository in the client directory.

We need to remove the git repository in the client folder. The git repo was created in the step 2 where the react application was set up.

Remove the .git in the client folder

In the command line, move to the client folder and type the following codes. If you are curious about what "rm -rf" does, check out the reference link on the bottom of this article.

$ cd client
$ rm -rf .git
Enter fullscreen mode Exit fullscreen mode

4. Move .gitignore file from the client to the project directory.

Move .gitignore

You see the .gitignore file in the client directory like the photo below.
.gitignore in the react

Move the .gitignore file for the client to your project directory.
.gitignore to the project file

5.Edit the .gitignore

Open the .gitignore file and find "/node_modules" and "/build". You should remove the slashes("/") in front of the node_modules and build. By doing this, node_modules and build in both client and server will be ignored.

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
build

# misc
.DS_Store
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*
Enter fullscreen mode Exit fullscreen mode

6. Initialize git in the project.

Go to the project directory in your command line and initialize the git.

$ git init
Enter fullscreen mode Exit fullscreen mode

Now you are almost there until your first push to Github. The diagram below simply summarizes all steps you've gone through so far.

Folder status

7. Commit the project setup.

$ git add . 
$ git commit -m 'Init the project'
Enter fullscreen mode Exit fullscreen mode

8. Create a main branch in the local repo.

$ git branch -M main
Enter fullscreen mode Exit fullscreen mode

If you wonder about the "-M" flag like me, I can simply put that it renames the master to main. If you want to dig into the -M flag, please refer to the link below.

9. Go to github.com and create repository.

Create a remote repository for the project in Github. If you don't have an account, you need to sign up first.

10. Connect the local repository to the remote one.

Copy the link in Github

After creating the repository, hit the code button and copy the link. In the command line, make sure you are in the project directory and type the following code.

$ git add origin <YOUR LINK HERE> 
Enter fullscreen mode Exit fullscreen mode

11. Push to Github

Push the project to the remote repo. Do you want to know more about -u flag? Please check out the reference below.

$ git push -u origin main 
Enter fullscreen mode Exit fullscreen mode

From the step 12, we are going to setup the server side.

12. Run npm init in the server directory.

In command line, make sure you are in the server directory and initialize npm.

npm init -y
Enter fullscreen mode Exit fullscreen mode

13. Modify the package.json

If you want to use import instead of require, add "type": "module" in the package.json like below.
Image description

14. Create server.js file and install Express.js

In the server directory, create a server.js file and install Express.js.

npm install express
Enter fullscreen mode Exit fullscreen mode

15. Let's set up the server.

import express from "express";

const app = express();

app.get("/", (req, res) => {
  res.send("connected");
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log("Server listening the port http://localhost/" + port);
});
Enter fullscreen mode Exit fullscreen mode

[More To Read]

Top comments (4)

Collapse
mrdanishsaleem profile image
Danish Saleem

Well explained. Thanks for sharing🀝

Collapse
birdy profile image
Chaeah Park Author

My pleasure : )

Collapse
imranweb profile image
Imran-web

Explained very well thanks a lot

Collapse
sizwemorrismnothoza profile image
Sizwe

Thank you for sharing. It is very helpful

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.