/StrangerThings

Primary LanguageJavaScript

Getting Started

In the root directory of the project...

  1. Install node modules yarn install or npm install.
  2. Start development server yarn start or npm start.

Next Steps

Sample Data

Replace the sample data stored in /server/sampleData.js. Replace the default images stored in /src/images.

Adding a New Page

  1. Create a folder in /src/components with your react components.
  2. Add a route for your page to /src/App.js.
  3. Add a button to the navigation bar in /src/components/NavBar/index.js.

Deployment

The generated templates can be deployed to Azure App Service using the following steps:

  1. In the root directory of the project yarn build or npm build to create a build folder.
  2. Move the build folder inside the server folder.
  3. Deploy the server folder to Azure App Service using the Azure App Service Extension.
  4. If a database is used, add the environment variables defined in .env to your Application Settings.
  5. Consider adding authentication and securing back-end API's by following Azure App Service Security. Full documentation for deployment to Azure App Service can be found here: Deployment Docs.

File Structure

The front-end is based on create-react-app.

The back-end is based on Express Generator.

The front-end is served on http://localhost:3000/ and the back-end on http://localhost:3001/.

.
├── server/ - Express server that provides API routes and serves front-end
│ ├── routes/ - Handles API calls for routes
│ ├── app.js - Adds middleware to the express server
│ ├── sampleData.js - Contains all sample text data for generate pages
│ ├── constants.js - Defines the constants for the endpoints and port
│ └── server.js - Configures Port and HTTP Server
├── src - React front-end
│ ├── components - React components for each page
│ ├── App.jsx - React routing
│ └── index.jsx - React root component
└── README.md

Additional Documentation