Giter VIP home page Giter VIP logo

react-security-basics's Introduction

ReactSecurity - Orbit

Twitter: ryanchenkie

๐Ÿ‘‹ Welcome to Orbit! This is a demo app for learning security for React applications. You can find out more at ReactSecurity.io.

A Look at the App

Here's the dashboard for the app orbit dashboard

For a more in-depth tour, check out this video:

orbit tour

There are two parts to the app in this project: orbit-app and orbit-api. These are the front end React application and the backend Node API respectively.

Install the Dependencies

We need to install dependencies for both orbit-app and orbit-api. Change directories into each and install with npm.

cd orbit-app
npm install
cd ../orbit-api
npm install

Set Up the Environment Files

The React app contains a file called .env.local. This file has a single variable called REACT_APP_API_URL which is used to connect to the backend. You can leave this as is.

The backend contains a file called .env.example. This file needs to be renamed to .env and provided with values.

For ATLAS_URL, provide the connection string to your MongoDB Atlas cluster. You can use other MongoDB providers, or even use a local MongoDB connection. Learn how to create a MongoDB instance with Atlas here.

For JWT_SECRET, provide a long, strong, unguessable secret, much like you would in production.

Run the Applications

The React app is built with create-react-app. Run it with the script provided in its package.json file.

cd orbit-app
npm start

The Node API comes with a script in its package.json which allows you to run it in development mode with nodemon.

Open a new terminal window, change directories into the API, and start it up.

cd orbit-api
npm run dev

The Node API will be running at http://localhost:3001.

Navigate to http://localhost:3000 to see the app running!

License

MIT

react-security-basics's People

Contributors

alin-radu avatar alin-radu-reea avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.