When I was an instructional assistant at a coding bootcamp in San Francisco I had several students that wanted to do their final projects in React but struggled with getting Auth to work with their apps. It inspired me to make some starter code that would work for small projects like the ones my students were making.
Built using the MERN stack and features:
- Create React App
- react-router v4
- Passportjs
- express-session
- express-validator
- Bulma CSS Framework
- Concurrently
- Axios
Once you've cloned the repo, cd into the main directory and yarn install.
cd backend/
yarn install
cd frontend/
yarn install
In a new terminal window run mongod to start the MongoDb system
In the main directory run npm start. Concurrently will start both the client and backend servers simultaneously.
Note that while concurrently works well in development to help with CORS errors it is not recommended to use in a production environment.
Create React App should launch http://localhost:3000/ automatically and you'll see the app does not look very pretty at this point. Find the bulma/ directory in frontend/node_modules/ and copy and paste the bulma.css file into the frontend/public/.
The backend server should be running on http://localhost:8080/
In addition to the user endpoints, the following endpoints are included for demonstration:
/api/posts
/api/posts/:id
/api/posts/post_id
If everything is working the app should look like this:
You're all set, Happy coding! 💻