Serve create-react-app from a subdirectory

If you've tried to deploy create-react-app to a non-root subdirectory (i.e. example.com/app/), then you'll need the following to make it work:
  1. Set the homepage in project.json
    • "homepage": "https://example.com/app/"
  2. If you are using Router:
    • Set the basename attribute: 
      • <Router basename={'/app'}>
    • Set Route path prefixes
      • <Route path={`${process.env.PUBLIC_URL}/dashboard`} component={Dashboard} />
    • Update Link tags
      • <Link to={`${process.env.PUBLIC_URL}/dashboard`}>


 Sources:

Popular posts from this blog

Google sign-in with pwa_auth

Do you need one of those universal sign in buttons Google / Facebook / Microsoft ? Take a took a look at pwa-auth , a JavaScript tool to handle the login process for Microsoft, Google and Facebook accounts. We started with npx create-react-app  and changed App.js as follows: This only implements the Google sign-in and nothing for the back-end verification, but it's a start. Also, see this article on Medium.com
Read more

Components in React: "class" and "functional"

If you're creating a non-trivial webpage it might feel like it's getting out of hand.  Changes coming in from different places. CSS files. JavaScript files. HTML files. One "thing" on your page might have code coming from seven different files. This can be confusing, not to mention it and makes reusability and testing difficult. React addresses this complexity. It lets you make up your own tags for your specific use case. Not only that, but you can include everything the tag needs to make it work in one place. It's like a layer on top of JavaScript / HTML / CSS that lets you build your own reusable, modular, domain-specific components. And that's a central React idea: components . These components are like your own reusable HTML tags that also encapsulate whatever JavaScript (and HTML, and CSS, and other components, etc) they need to run. There are two main ways to create components in React: class and functional . Class Components The component method ...
Read more