redhatinsights / frontend-starter-app Goto Github PK

Starter template for a Red Hat Insights Application in React.js

License: Apache License 2.0

JavaScript 18.98% HTML 1.93% SCSS 2.91% TypeScript 62.35% Shell 13.83%

frontend-starter-app's Introduction

frontend-starter-app

React.js starter app for Red Hat Insights products that includes Patternfly 4 and shared Red Hat cloud service frontend components.

Alternative

Before using this template, please check the create-crc-app. It has some extra setup you may like.

Initial etc/hosts setup

In order to access the https://[env].foo.redhat.com in your browser, you have to add entries to your /etc/hosts file. This is a one-time setup that has to be done only once (unless you modify hosts) on each devel machine.

Best way is to edit manually /etc/hosts on your localhost line:

127.0.0.1 <your-fqdn> localhost prod.foo.redhat.com stage.foo.redhat.com

Alternatively you can do this by running following command:

npm run patch:hosts

If this command throws an error run it as a sudo:

sudo npm run patch:hosts

Getting started

npm install
npm run start
Open browser in URL listed in the terminal output

Update appUrl string inside fec.config.js according to your application URL. Read more.

Testing

npm run verify will run npm run lint (eslint) and npm test (Jest)

Deploying

The starter repo uses Travis to deploy the webpack build to another Github repo defined in .travis.yml
- That Github repo has the following branches:
  - ci-beta (deployed by pushing to master or main on this repo)
  - ci-stable (deployed by pushing to ci-stable on this repo)
  - qa-beta (deployed by pushing to qa-beta on this repo)
  - qa-stable (deployed by pushing to qa-stable on this repo)
  - prod-beta (deployed by pushing to prod-beta on this repo)
  - prod-stable (deployed by pushing to prod-stable on this repo)
Travis uploads results to RedHatInsight's codecov account. To change the account, modify CODECOV_TOKEN on https://travis-ci.com/.

frontend-starter-app's People

Contributors

Stargazers

Watchers

Forkers

karelhala lgalis jharting thomasmckay allenbw ryelo chambridge shaded-enmity ehelms benthomasson kialam pilhuhn josejulio carlosthe19916 panspagetka epwinchell redallen hyperkid123 drcoolsanjeev uidoyen indraraj rvsia aferd skarekrow jason-rh spadgett florkbr fewwy fhlavac aneelac22 victoria-dos julieprazakova cooperredhat ruedoberts dlabrecq pinkdiamond1 ezr-ondrej radekkaluzik ryandeussing mjholder aptmac adamrdrew astonlele

frontend-starter-app's Issues

Implement a disabled tab

on hold until #3 is merged

Make fonts render correctly

Dev cleanup

Remove yarn.lock cuz we're using package-lock (and both of em is super not friendly to anyone not in the know)
Rename stylelint.json to stylelintrc.json (cuz thats what its supposed to be called)

Styles don't fully load when refreshing the page https://prod.foo.redhat.com:1337/insights/advisor/rules

ESI in production

Could you explain how ESI provides in production?
Development environment uses insights-proxy that uses spandx which provides ESI and some nifty routing tools.
How to provide ESI for production setup?

Update ReadMe to include getting started with chrome + proxy

Missing package

import PropTypes from 'prop-types';

This is sprinkled throughout the project but the prop-types library is not included in the package.json

App.scss styles don't work in production mode

When I start the application in production mode (npm run prod) there are no App.scss styles are applied.

Linting.

I know I know, its already taken care of, the way we like things already exists, the .yaml tells a very colorful story. What if, we did something with a little less configuration? Guilty as charged, Imma big fan of what pfr does for the following reasons:

little configuration
seriously, VERY little configuration
comprehensive embodiment of convention
familiarity

If the only ask is that style violations fail travis or whomever is running the test suite, the bridge from warning to error is a very short one.

PS: If this gets a nod totally signing myself up for the work

blank page at localhost:8002

Blank page at localhost:8002 with no js errors. On localhost:8081 just text "Upgrade Required".

$ npm --version
5.6.0
$ node --version
v8.11.3
$ npm run start

> [email protected] start /home/thomasmckay/code/polpette/frontend
> WEBPACK_SERVE=development webpack-serve --config config/dev.webpack.config.js

clean-webpack-plugin: /home/thomasmckay/code/polpette/frontend/config/dist has been removed.
ℹ ｢hot｣: webpack: Compiling...
ℹ ｢hot｣: WebSocket Server Listening at localhost:8081
ℹ ｢serve｣: Project is running at http://localhost:8002
ℹ ｢serve｣: Server URI copied to clipboard
ℹ ｢hot｣: webpack: Compiling Done
ℹ ｢wdm｣: Hash: e1aa538c8492721ff4cc
Version: webpack 4.12.2
Time: 13940ms
Built at: 2018-07-23 16:43:16
... output ...

ℹ ｢wdm｣: Compiled successfully.
ℹ ｢hot｣: WebSocket Client Connected
ℹ ｢hot｣: WebSocket Client Connected
ℹ ｢hot｣: WebSocket Client Connected

Cannot read properties of undefined (reading 'entry')

Hi! I'm trying to get started with this repo, and I can get other RedHatInsights/*-frontend repos to work properly. However, I'm running into issues with this repo, any help would be appreciated.

After npm install and npm run start I open the provided link in my browser and I see:

With the error logs in my Chrome developer console looking like:

Uncaught TypeError: Cannot read properties of undefined (reading 'entry')

    at vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:294:105
    at step (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:75:23)
    at Object.next (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:56:53)
    at fulfilled (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:47:58)

The above error occurred in the component:

at LoadModule (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_scalprum_react-core_dist_esm_index_js.5c307a00208dfb6c.js:294:17)
    at BaseScalprumComponent (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_scalprum_react-core_dist_esm_index_js.5c307a00208dfb6c.js:374:28)
    at div
    at https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:5969:23
    at RenderedRoute (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:5820:5)
    at Routes (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:6451:5)
    at ChromeRoutes (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:14745:29)
    at div
    at main
    at div
    at Page (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Page_index_js.beeb52476c5c02fa.js:47:9)
    at DefaultLayout (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:19075:27)
    at https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:19138:32
    at div
    at DefaultLayoutRoot (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:19188:25)
    at RenderedRoute (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:5820:5)
    at Routes (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:6451:5)
    at PluginStoreProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_openshift_dynamic-plugin-sdk_dist_index_js.81e77255611659ea.js:1028:32)
    at ScalprumProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_scalprum_react-core_dist_esm_index_js.5c307a00208dfb6c.js:480:21)
    at https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:14335:25
    at div
    at DrawerContentBody (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:110:5)
    at div
    at div
    at DrawerMain (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:140:5)
    at DrawerContent (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:77:5)
    at div
    at Drawer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:40:11)
    at HelpTopicDrawer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_quickstarts_dist_index_es_js.08e66923bb588452.js:2588:11)
    at HelpTopicContainer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_quickstarts_dist_index_es_js.08e66923bb588452.js:2569:11)
    at div
    at DrawerContentBody (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:110:5)
    at div
    at div
    at DrawerMain (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:140:5)
    at DrawerContent (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:77:5)
    at div
    at Drawer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_react-core_dist_esm_components_Drawer_DrawerContent_js-node_m-6def4b.5b2ae9ebac202e6f.js:40:11)
    at QuickStartDrawer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_quickstarts_dist_index_es_js.08e66923bb588452.js:2429:11)
    at QuickStartContainer (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_patternfly_quickstarts_dist_index_es_js.08e66923bb588452.js:2399:11)
    at ChromeProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_redhat-cloud-services_chrome_esm_index_js.66de4cc3f7aca30a.js:95:23)
    at a (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_unleash_proxy-client-react_dist_index_browser_js.023bb3d7755ad782.js:9:1111)
    at FeatureFlagsProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/src_components_FavoriteServices_EmptyState_tsx-src_hooks_useFavoritedServices_ts-webpack_shar-709479.b7a1e95f3afde88d.js:1230:26)
    at SegmentProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:639:30)
    at Router (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:6389:15)
    at HistoryRouter (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-router-dom_dist_index_js.9707420bdaac8e39.js:4572:5)
    at https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:13903:110
    at App (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:2226:75)
    at ErrorBoundary (https://stage.foo.redhat.com:1337/apps/chrome/js/src_bootstrap_tsx-src_moduleOverrides_unfetch_ts-webpack_sharing_consume_default_patternfly_r-b00be9.6e4e092c655790ff.js:6704:9)
    at Provider (https://stage.foo.redhat.com:1337/apps/chrome/js/vendors-node_modules_react-redux_es_index_js.1d0414d586973def.js:69:3)
    at IntlProvider (https://stage.foo.redhat.com:1337/apps/chrome/js/chrome-root.e595b6f51da0dd99.js:51356:47)

Scalprum encountered an error! Cannot read properties of undefined (reading 'entry') TypeError: Cannot read properties of undefined (reading 'entry')

    at vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:294:105
    at step (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:75:23)
    at Object.next (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:56:53)
    at fulfilled (vendors-node_modules_scalprum_core_dist_esm_index_js.eea6c27f24a971d1.js:47:58)

Update readme

Recommend Projects

React

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

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

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

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
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.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

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

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.