The personal-web-frontend-react-portfolio from khoivudev

personal-web-frontend-react-portfolio's Introduction

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

DEVELOPMENT

Set proxy, must to be a string in package.json file
For example "proxy": "https://backend.example.com"
Run project npm install && npm start || yarn install && yarn start

DEPLOYMENT

Set Proxy to deloy Heroku:

When deploy on heroku, just push only package-lock.json or yarn.lock. Dont push both those files! npm install || yarn install
Create static.json file { "root": "build/", "clean_urls": false, "routes": { "/": "index.html" }, "https_only": true, "headers": { "/": { "Strict-Transport-Security": "max-age=7776000" } }, "proxies": { "/api/": { "origin": "${API_URL}" } } }
Push file to heroku git push heroku master
Config proxy heroku All request from react contain "/api/abc" -> "/abc" For example: From react: axios.get("/api/search-items") → ${API_URL}/search-items
From react: axios.get("/api/users/me") → ${API_URL}/users/me (!)Therefore, run this cmd to set proxy var in heroku: heroku config:set API_URL="https://backend.example.com/api"

personal-web-frontend-react-portfolio's People

Contributors

Watchers

personal-web-frontend-react-portfolio's Issues

Load image

Image not load
=>fix

 class Foo extends React.Component {
  constructor(){
    super();
    this.state = {loaded: false};
  }

  render(){
    return (
      <div>
        {this.state.loaded ? null :
          <div
            style={{
              background: 'red',
              height: '400px',
              width: '400px',
            }}
          />
        }
        <img
          style={this.state.loaded ? {} : {display: 'none'}}
          src={this.props.src}
          onLoad={() => this.setState({loaded: true})}
        />
      </div>
    );
  }
}

Recommend Projects