> For the complete documentation index, see [llms.txt](https://bloomtechlabs.gitbook.io/labs-spa-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bloomtechlabs.gitbook.io/labs-spa-starter/master.md). # Basic SPA Welcome to your `Basic Single Page Application Starter`. Use this to start your own Greenfield Project using ReactJS and common industry standards. This repository assumes a handful of industry practices and standards. We strive to keep you on the bleeding edge of the industry and as a result, we have made some opinions for you so that you don't have to; you're welcome. The following was built using [Create React App](https://reactjs.org/docs/create-a-new-react-app.html) for base boiler-plating. We will maintain the dependencies according to their specifications as an Engineering Organization. ### Requirements [Labs Engineering Standard requirements found here](https://docs.labs.lambdaschool.com/standards/) ### Getting Started #### Environment variables * `REACT_APP_CLIENT_ID` Okta client id * `REACT_APP_OKTA_ISSUER_URI` Okta API authorization server issuer URI (eg. `https://name-438r8hr.okta.com/oauth2/default`) * `REACT_APP_API_URI` The URL (localhost or live) for the Backend that you're building * Fork and clone the repo to install it as your own remote. * **note** please [be sure to set your remote](https://help.github.jp/enterprise/2.11/user/articles/changing-a-remote-s-url/) for this repo to point to your Labs Team Front End Repository. * run: `npm install` to download all dependencies. * run: `npm start` to start your local development server. > When using Okta for authentication, the app will need to run locally on port 3000. ### Errors on Deploy Are you seeing an error on`npm start` which looks something like this? ![npm start fail](https://tk-assets.lambdaschool.com/e1b1f8c9-612d-4744-b413-36ebf29f0337_image4.png) * Head over to the `package.json` file and please modify your scripts in order to allocate more memory for the 'craco' package. More information on 'craco' and why we use it [can be found here](https://github.com/gsoft-inc/craco). ```javascript "start": "craco --max_old_space_size=4096 start", "build": "craco --max_old_space_size=4096 build", ``` We feel that you shouldn't have to spend time as a developer worrying about where your files should go and your architectural decisions that you'd have to make if you strted from scratch. ### Data Visualization - Working with Hybrid Teams * We have provided an example of a simple Plot Charting component that can be built, configured, and delivered for your use by the Data Science Team. * We strongly urge you to work in constant collaboration with the data scientists in order to pull in their work into your application, ensure that their work matches the theme and style of your team's application and that the data you pull in represents what problem that team was trying to solve. **This will be a process that requires work and dedication and give-and-take.** * **Example Components**: [Please see here for an example](https://app.gitbook.com/s/-MFkeNssbubZBeQUa9mI/src/components/pages/ExampleDataViz/README.md) of how to work w/ `Plotly.js` and `React-Plotly.js`. ### Testing your App. In accordance with our [Labs Engineering Standards](https://bloomtechlabs.gitbook.io/standards/) this app uses common practices for Unit/Integration Testing using: [React Testing Library](https://github.com/testing-library/react-testing-library) [Jest](https://jestjs.io/) For examples on how to test your application and more information please see [the following documentation](https://app.gitbook.com/s/-MFkeNssbubZBeQUa9mI/src/__tests__/README.md). ### Contributing As this repository is a Work In Progress (WIP) we'd love to hear more about what is working for you and what could be improved.[ Please use the `Issues` tab in Github ](https://github.com/BloomTech-Labs/labs-spa-starter/issues)to submit and file any issues that come up during your development cycle. Issues should be related to things like, documentation, bugs that come up with the existing flow, architectural discussion, suggestions for improvements, and anything that you find cumbersome about getting started and working through a product cycle using these tools. **Please use `Labels` when filing issues** try and include screenshots of bugs and steps to reproduce.