npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

genesys_userstorage_api

v0.1.0

Published

Awesome and super-simple app with React front-end and Express back-end.

Downloads

2

Readme

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

If you selected Azure App Service when creating your project, follow these steps:

  1. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Web Template Studio: Deploy App to start deploying your app.
  2. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.

If you did not select Azure App Service and want to create a new Azure App Service web app, follow these steps:

  1. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Azure App Service: Create New Web App... to create a new web app.
    • Select your subscription
    • Enter your web app name
    • Select Linux as your OS
    • Select Node.js 10.14 for a Node/Express application, Python 3.7 for a Flask application
  2. Press Ctrl + Shift + P in Windows/Linux or Shift ⇧ + Command ⌘ + P in Mac and type/select Web Template Studio: Deploy App to start deploying your app.
    • You will have to select the same subscription again
    • Find the web app that you've just created
    • Click "Yes" in the notification window on the lower right corner (build prompt)
    • Click "Deploy" on the window pop-up (deploy window)
    • Click "Yes" on the notification window on the lower right corner (default prompt)
  3. Once the deployment is done, click "Browse website" in the notification window on the lower right corner to check out your newly deployed app.

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

  • React - https://reactjs.org/

  • React Router - https://reacttraining.com/react-router/

  • Bootstrap CSS - https://getbootstrap.com/

  • Express - https://expressjs.com/