Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tacyarg/flipaskin-frontend
Virtual asset trading website built with react
https://github.com/tacyarg/flipaskin-frontend
opskins react steam trade vgo wax webpack
Last synced: 25 days ago
JSON representation
Virtual asset trading website built with react
- Host: GitHub
- URL: https://github.com/tacyarg/flipaskin-frontend
- Owner: tacyarg
- License: mit
- Created: 2018-09-15T20:45:43.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T12:49:48.000Z (over 1 year ago)
- Last Synced: 2024-03-01T03:34:39.772Z (4 months ago)
- Topics: opskins, react, steam, trade, vgo, wax, webpack
- Language: JavaScript
- Homepage: https://flipaskin.com
- Size: 4.88 MB
- Stars: 8
- Watchers: 2
- Forks: 5
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-stars - flipaskin-frontend
README
# Flipaskin.com
Virtual asset trading app built to facilitate steam to vgo key exchanges.
## Features
* Customizable Profile
* User Statistics
* Exchange Statistics
* Inventory Search
* Confirmation Dialog
* Steam & VGO Asset Support
* Detailed History Modal
* Settings Modal
* Helpdesk Modal
## Deployment
This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).
Below you will find some information on how to deploy with github pages.
You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md).
### [GitHub Pages](https://pages.github.com/)
>Note: this feature is available with `[email protected]` and higher.
#### Step 1: Add `homepage` to `package.json`
**The step below is important!**
**If you skip it, your app will not deploy correctly.**
Open your `package.json` and add a `homepage` field for your project:
```json
"homepage": "https://myusername.github.io/my-app",
```
or for a GitHub user page:
```json
"homepage": "https://myusername.github.io",
```
Create React App uses the `homepage` field to determine the root URL in the built HTML file.
#### Step 2: Install `gh-pages` and add `deploy` to `scripts` in `package.json`
Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub Pages.
To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run:
```sh
npm install --save gh-pages
```
Alternatively you may use `yarn`:
```sh
yarn add gh-pages
```
Add the following scripts in your `package.json`:
```diff
"scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
```
The `predeploy` script will run automatically before `deploy` is run.
If you are deploying to a GitHub user page instead of a project page you'll need to make two
additional modifications:
1. First, change your repository's source branch to be any branch other than **master**.
1. Additionally, tweak your `package.json` scripts to push deployments to **master**:
```diff
"scripts": {
"predeploy": "npm run build",
- "deploy": "gh-pages -d build",
+ "deploy": "gh-pages -b master -d build",
```
#### Step 3: Deploy the site by running `npm run deploy`
Then run:
```sh
npm run deploy
```
#### Step 4: Ensure your project’s settings use `gh-pages`
Finally, make sure **GitHub Pages** option in your GitHub project settings is set to use the `gh-pages` branch:
#### Step 5: Optionally, configure the domain
You can configure a custom domain with GitHub Pages by adding a `CNAME` file to the `public/` folder.
#### Notes on client-side routing
GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions:
* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router.
* Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages).