Define base path and public URL by Sagar Prajapati

Define base path and public URL by Sagar Prajapati

When you deploy React.js app apart from root path, there are two things needs to configured. As by default React.js will try to load from root of domain.
Considering you are deploying on : https://jenkins.openxcell.info/my-app/website/
Sub path : /my-app/website/

so when you are deploying your code will be in : /my-app/website/ folder

1. Telling React to where to Look for the Files (Static assets like css, js, images or fonts)

This can be done in two ways.
      i. Setting homepage in package.json
      ii. Set PUBLIC_URL in .env file

Way (i). is not preferred as package.json will be common for all env (dev, staging, prod).
So another way to do this by setting PUBLIC_URL in .env file

in our case it will be :
PUBLIC_URL=https://jenkins.openxcell.info/my-app/website/


.env will be common for all env, So to define PUBLIC_URL for different env we can put .env in .gitignore and create different env for each environment.
as an example .env.developement, .env.staging, .env.master etc. And you can notify devops to which env they should use.

There is another way, using which we can have different env files without having to ignore the .env . Checkout CRA docs to know how you can add different env and which env will have priority (https://create-react-app.dev/docs/adding-custom-environment-variables/#what-other-env-files-can-be-used)

2. Telling React Router for the sub path

Configuring Step 1 will successfully load all your assets. But you might see blank page when you open website.
that's because react router is not aware of this subpath deployment.

So we need to add another configuration in env
REACT_APP_BASE_PATH=/my-app/website/

and add this to root of your router.

ex : Assuming you are using BrowserRouter
So
<BrowserRouter basename={process.env.REACT_APP_BASE_PATH}>

You can use any name instead of REACT_APP_BASE_PATH. As React requires REACT_APP_ prefix for any custom env variable, make sure to add REACT_APP_ prefix.

Any query contact : sagar.prajapati@workhiveapp.com

    • Related Articles

    • FTP Server on Wndows

      Server Side - Install Filezilla Server : https://filezilla-project.org/download.php?type=server - Edit -> Settings -> Passive Settings -> Port range 50000-51000 / Add Public IP Address - Open ports 21,990,50000-51000 Client Side - Install Winscp ...

    • PostgreSQL basic commnad

      How to connect AWS-RDS of PostgreSQL using terminal or CMD & basic of PostgreSQL - syntax format psql -h HOSTNAME --port=5432 -U USERNAME DATABASENAME -W -h = host or RDS Endpoint -p 5432 pre define port for postgresql -u user name for database ...

    • Server Setup Ticket Format

      Hello @all   [ ALL TL / PM ]   I'm giving a template for server setup. I'd like to propose that all team-leaders and project-managers create all set-up tickets themselves.  NOTE - Please double-check all project-related details in the README.md file ...

    • OpenProject Docker

      sudo mkdir -p /var/lib/openproject/{pgdata,logs,static} docker run -d -p 80:80 --restart always --name qam -e SECRET_KEY_BASE=very_secret_pass_as_secret_as_it_gets -e EMAIL_DELIVERY_METHOD=smtp -e SMTP_ADDRESS=smtp.sendgrid.net -e SMTP_PORT=587 -e ...

    • Registering to OpenXcell SSO

      Overview: Openxcell SSO, is an enterprise grade Identity Provider supporting Single-Sign-On Using various authentication protocols such as OIDC and SAML. To ensure single point of authentication and security across all the organization owned and ...