Sign inSign up

streisandjumpcut/streisand-react

By streisandjumpcut

•Updated about 8 years ago

Streisand Frontend Project Build with React and TypeScript

Image
0

488

streisandjumpcut/streisand-react repository overview

⁠The Frontend

The web front-end code for JumpCut code named Phoenix for development purposes.

The site is built with webpack⁠. We are using Typescript⁠ to make collaboration and maintenance easier. The UI is built on top of the React⁠ framework using Redux⁠ as our state container.

⁠Getting Started

This project uses yarn as its package/dependency manager. So after cloning the project, you will want to install the current version of node⁠. Depending on your OS, please see here on installing Yarn: Yarn⁠. Once you have it installed you can run yarn in the project's root directory to install the project's dependencies.

⁠Building

We have npm scripts set up for dev loop builds and prod builds. Before you start, make sure and copy the env.template in the root of the frontend folder as .env. For the development build run the command: yarn run dev. Babel is needed for the webpack development build because the hmr requires it for some reason (react-hot-loader⁠).

  • Note: Yarn is used in production and in docker, if you have any package changes you must commit any updates to your yarn.lock file.
⁠Development

By default, the code is setup for developing. The project adds several helpful debugging tools including a development server that supports module hot loading. If you run yarn run start it will do an initial development build and startup up the web server opening app in your browser (http://localhost:3000). You will then be able to make changes to the code and the server will run incremental builds and update the site (usually) without you having to refresh the page.

The following are links to various internal documentation pages that should be useful references while working on this project. - [API Core Schema <https://api.pinigseu.xyz/api/v1/schema/>]{.title-ref}__⁠ - [API Swagger Schema documentation <https://api.pinigseu.xyz/api/v1/swagger/>]{.title-ref}__⁠ - [API Redoc Schema documentation <https://api.pinigseu.xyz/api/v1/redoc/>]{.title-ref}__⁠

⁠Production

In order to get the production ready files, all you need to do is run the default npm script command: yarn run build. This will remove any remnants of a previous build and then build the project without any of the development tools. It will then compress and uglify everything into a handful of files. All built files will be dumped in the '/dist' directory.

⁠Proxies

None of the APIs that this site is using are setup to work with localhost requests. Until they support CORS you will need to route all API traffic through a proxy. There is a proxy.js file in the root of the project for doing this. - Run node .\proxy.js "https://api.url.com" to start the proxy server for the site api.

Tag summary

Content type

Image

Digest

Size

34.8 MB

Last updated

about 8 years ago

docker pull streisandjumpcut/streisand-react