Skip to content

Latest commit

 

History

History
143 lines (87 loc) · 8.01 KB

README.md

File metadata and controls

143 lines (87 loc) · 8.01 KB
Raw

Fullstack React Application

A complete web application integrating the MERN stack: MongoDB, Express.js, React.js, Node.js.

This project contains the code for both front-end client files and back-end server files. The main reason was easier tracking of site-wide changes that affected the client and server simultaneously. The back-end utilises Express.js to act as a server API which queries the database from MongoDB. The front-end incorporates React.js to display the user interface which renders content that has been fetched using the server API.

An Ongoing Project

Currently, this is a simple blog website. However, this is an ongoing project with the aim to add further features down the line, as well as convert it a full website with the blog section only one part of it.

Server

Back-end server API used to interact with the database

Navigate to the directory using command cd server/.

Libraries Used (Server)

Popular libraries used include:

  • Express.js to provide the back-end web application framework.
  • nodemon to reload the server automatically after any saved changes.
  • body-parser middleware to parse request bodies.
  • helmet to help secure the Express app by setting various HTTP headers.
  • MongoDB Client to interact with MongoDB using native Node.js driver.
  • Luxon.js to quickly and efficiently format dates.
  • dotenv to load confidential information as environment variables into process.env, to keep it hidden from Git.

Client

Front-end application using React. This is where the user interface is built. It communicates with the server API to display content from the database.

Navigate to the directory using command cd client/.

Libraries Used (Client)

Popular libraries used include:

  • React Hooks to use React features without having to write classes.
  • React Router for navigating between the various pages.
  • Redux for global state management.
  • Redux Thunk to act as middleware to write async logic to interact with the Redux store.
  • styled-components for a modern approach to styling, using reusable components, and implementing dynamic styling.
  • Webpack for bundling our React App together, to run either the development environment or for our production build.
  • Dotenv Webpack to add dotenv plugin to webpack, so we can keep our confidential information hidden from Git.
  • { _.debounce } from lodash: function to limit calls during window resizing.
  • Luxon.js to quickly and efficiently format dates.

Getting Started

Setting up Environment Variables

The URI, database name and collection names have not been provided in Git due to confidentiality of data. These would be stored in secrets.env located in config/. You can find an example file containing mock keys-value pairs in secrets.env.example. You have two options to populate the data:

  1. Replace MONGO_URI, DB_NAME, ARTICLES and AUTHORS, COMMENTS with the URI, database name and collection names, respectively.
  2. Create a file called secrets.env inside config/ and populate it with the appropriate data:
MONGO_URI=mongodb+srv://<user>:<password>@<database>?retryWrites=true&w=majority
DB_NAME=database-name
ARTICLES=article-collection
AUTHORS=author-collection
COMMENTS=comments-collection
PORT=9000

Integrating with MongoDB

The data is hosted on MongoDB Atlas cloud using MongoDB Client Node.js Driver.

Inside the server/ directory, files have been provided to set-up the database with initial data. Initial data can be found in articles.js and comments.js; the files to import the content into the database are addArticlesToDB.js and addCommentsToDB.js.

Simply run npm run db-setup to upload all data as documents to MongoDB.

Alternatively, you can upload just the articles, or just the comments using npm run db-setup:articles or npm run db-setup:comments, respectively.

Running the React App

To run the app, there are two choices:

  1. Run the Express.js server alongside the client React development server. You will access the app through the client UI on port 3000, which will send fetch requests to the server API to load the content. This option is great for debugging and development as it contains Hot Module Replacement, so the page does not need to be refreshed when the code is updated.
  2. Bundle the production build into the dist/ directory of the server. This directory acts as static files which can be served by the server. Therefore, we can access the whole app on port 9000.

Running the Express.js Server

In server/, simply run npm run server. The server will run on http://localhost:9000.

Alternatively, from the project root folder, simply run npm run server;

Running Express.js Server Without Client react-dev-server

If running the server alongside React development server, skip this section.

We can serve the static files by bundling the files to the server dist/ directory using webpack to generate a production build.

To do this, we can run the following command from the either the server/ or client directory: npm run build

Either directory it is ran it, it runs the command from the client directory which is where the webpack configurations files and the files we need to bundle are located. This command copies index.html and favicon.ico to dist/ as well as bundles the client React app into bundle.js.

Running the React Application Development Server

In client/, simply run npm run dev. The dev-server will run on http://localhost:3000.

Alternatively, from the project root folder, simply run npm run client;

The development server supports Hot Module Replacement, which allows the app to update without needing a full refresh.

Note: You will need to run the Express server API, otherwise the resources from the database cannot be loaded.

Other

Styling

Base styling to reset and normalize the elements executed with SASS/SCSS.

Styling of React Components fulfilled using styled-components. styled-components provides the application the power to display content based on the Component props as well as re-use styling quickly and efficiently.

Linting

Both server and client use their own linting configuration, achieved through ESLint. This keeps the code clean, written correctly and ensures it uses industry best practices.

The client uses rules extended from:

  • eslint:recommended
  • prettier
  • google
  • prettier/react
  • plugin:react/recommended

The server uses rules extended from:

  • eslint:recommended
  • prettier
  • google

Transpiling

Both server and client use their own transpiling configuration, achieved through Babel, to use next generation JavaScript language features.

Original Content from LinkedIn Learning Course