Skip to content

A sample application for tracking a list of favorite Heroes that uses React for the UI, Node.JS and Express for the API and Azure Cosmos DB for the database.

License

Notifications You must be signed in to change notification settings

peaMS/react-cosmosdb

 
 

Repository files navigation

React CosmosDB

This is a demo project for the React CosmosDB video series that shows how to...

  • Setup a React / Node application
  • Create, Read, Update and Delete data from CosmosDB with the Mongo API
  • Debug React and Node apps
  • Scale and replicate CosmosDB

Follow along with the video series. React is a blast and CosmosDB is crazy fast. Building this app is way too much fun.

Get Started

  1. Clone this repository
git clone https://github.com/burkeholland/react-cosmosdb.git
  1. Change into the directory that was cloned and run npm install
cd react-cosmosdb && npm install
  1. Configure the CosmosDB Server Setting

Rename server/env/environment-change-me.js to environment.js and change the cosmosPort, dbName and key to match your CosmosDB environment.

// server/env/environment.js
const cosmosPort = 1234; // replace with your port
const dbName = 'your-cosmos-db-name-goes-here';
const key = 'your-key-goes-here';

module.exports = {
  cosmosPort,
  dbName,
  key
};

Running The App

In development, the app runs via two separate processes...

Start the Express Server

node server/server.js

Start Create React App

In a different terminal tab...

npm start

Building For Production

In production, you want Express to serve up your app.

Build React App

npm build

Now start the Express server from the server folder

cd server
npm start

Your entire application is now running on port 3001.

Everything in the server folder is what is needed in production. Those are all of the build assets.

About

A sample application for tracking a list of favorite Heroes that uses React for the UI, Node.JS and Express for the API and Azure Cosmos DB for the database.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.5%
  • CSS 12.4%
  • HTML 8.1%