Blog App with React and Node
The objective of this app project is to give a simple example on how to create a React App that uses Contex and Hooks on the front end and receive data via a simple REST API built with NodeJS on the back-end.
Requirements
- Node.js >= 12
- React.js >=16
Check the ./package.json
file and the ./client/package.json
file for more details.
Development Environment Configuration
This project is configured in a way that you can use either the React App and the NodeJS app running in independent servers, or both apps running at the same time in the same server.
To get started:
- Clone the repository.
- install all the NodeJS dependencies
Executenpm install
from the root folder. - Install all the React App dependencies
Executenpm install
from./client
folder. - Create the production bundle
Runnpm run build
from./client
to build the production webpack bundle if you want to try it locally. - Execute the project
Executenodemoon server
from the root.
Running the React App Only
Execute npm start
from ./client
to get up an running the React App only.
This is useful if you want to play with the front-end and do not need to interact with the back-end API for development purposes. API calls will fail when running the React APP server only.
Running the NodeJS App Only
Execute steps 1, 2 and 5 from above, and the server API in NodeJS will be up and running. You can test it using curl, Postman, or any other tool to test the end point /api/articles
.
Running the React App and NodeJS App from the same server
Execute the project nodemoon server
from the root. This is how the current project is configure to run in production enviroment. You will have the React and NodeJS apps up and running.
Access from a browser http://localhost:8080
.
To execute the React App suite tests run the following command from ./client
$ npm test
Contribution
To contribute create a pull request with the changes you think might be included.
- Commits should be in english and capitalized. They should start with a verb, and the first line should not be greater than 50 characters. The message in the commit body should not be greater than 70 characters. Eg:
Add api test
api.test.js include the mocking of the API call from React using axios, to test the state being passed to Context. Closes #77.
- Use lowercase and (
-
) to separate words when naming your branches. Dont use more than 3 words.
You can check a live version of this project at www.nayibabdala.com . Happy coding!
License
Special thanks
To @alexrqs and @germanescobar for their recomendations