Skip to main content

How to read window variables as .json or value key pais outside of /SRC folder on ReactJS during development and production mode

When our application is getting bigger and its settings were hardcoded like the endpoints for instance among other settings, and after making an npm run build you must make an update to any endpoint then you've got not any other choice but to recompile everything again with npm run build and take it to production again, so for this special scenario it is easier to have an external config.js file with all the endpoints inside of it or extra settings your app needs which can be changed through time.
to be able to see this working let's create a project running on your terminal npx create-react-app "give a name to your app, in my case this one was called withproperties"

open your application with your favorite code editor and  go to the public folder and let's create over there a file called config.js or any other name you wish to give it, and inside of it paste this:
window.endpointone = {
"enpointOne":   "service.com/api/one",
"endpoinTwo":   "service.com/api/two"
};

window.othersettings = {
"exampleSettingOne": "settingsOne",
"exampleSettingTwo": "settingsTwo",
};


we are just going to be taking advantage of the variable window all over the application as global variables

now let's open inside the public folder the index.html file and under root tag let's do this
<div id="root"></div>
<script type="text/javascript" src="config.js"></script>



now you can use those variables all over the application just by using the window variable like this 
window.endpointone.enpointOne or window.endpointone.endpoinTwo
or window.othersettings.exampleSettingOne


if you want to see it in action just replace you App.js by this code
import React from 'react';
import logo from './logo.svg';
import './App.css';

class App extends React.Component {

 constructor() {
   super();

   this.state={

     endpointOne:'',
     endpointTwo:'',
     endpointThree:'',

   }

 }

 componentDidMount() {

     this.setState({

       endpointOne:window.endpointone.enpointOne,
       endpointTwo:window.endpointone.endpoinTwo,

     })
     console.log('data '+window.endpointone.endpoinTwo);

 }

 render() {

   return(

       <div>

           <h1>Data loaded from file called config.js</h1>
            <hr/>
           <p>Endpoint 1 :  <strong>{this.state.endpointOne}</strong></p>
           <p>Endpoint 2 :  <strong>{this.state.endpointTwo}</strong></p>
           <p>//***********************************//</p>
           <p>Other Settings 1 : <strong>{window.othersettings.exampleSettingOne}</strong></p>
           <p>Other Settings 2 : <strong>{window.othersettings.exampleSettingTwo}</strong></p>

       </div>
    );

}

}

export default App;

 run the application and test it, so now let's make an npm run build and after it has been build there is a file outside called config.js which we can edit at any time
Labels:

Comments

Post a Comment

Popular posts from this blog

How to secure SpringBoot with SSL and Tomcat or Undertow

when we are going to take our applications to production mode, we must have an SSL certificate for the FrontEnd and   BackEnd too, in this case, our backend is a  SpringBoot which is using a tomcat embedded server. Terminology TLS vs SSL TLS is the successor to SSL. It is a protocol that ensures privacy between communicating applications. Unless otherwise stated, in this document consider TLS and SSL as interchangable. Certificate (cert) The public half of a public/private key pair with some additional metadata about who issued it etc. It may be freely given to anyone. Private Key A private key can verify that its corresponding certificate/public key was used to encrypt data. It is never given out publicly. Certificate Authority (CA) A company that issues digital certificates. For SSL/TLS certificates, there are a small number of providers (e.g. Symantec/Versign/Thawte, Comodo, GoDaddy, LetsEncrypt) whose certificates are included by most browsers and Op...
2 comments
Read more

How to deploy a VueJS App using Nginx on Ubuntu

There are thousands of blogs and websites out there explaining how to do a hello world and how to start with VueJS, but in this little post, I’m just going to be explaining how to do deploy a VueJs app after you have run the command through the CLI npm run build . So when you run the command npm run build a dist folder is created and that folder’s got the essential .js files to run our app, when we want to run our app on an Nginx server by default the vue-router is not going to work well so that Nginx does not come ready to work by default with a VueJs app This is basically for a Linux Ubuntu distribution if you’ve got any other Linux distribution just pay attention where is going to be set the www/html folder and the Nginx settings so that this is useful for any Linux distribution  Install and configure nginx sudo apt install nginx Double check to make sure the nginx service is running with command service nginx status, then open your browser and enter ...
1 comment
Read more

Printing using SpringBoot - cups4j

One of the easiest ways to print something from Java , in this case, using a SpringBoot Java Api Rest is with CUPS . Let's assume you've set up your CUPS server up and running, add to your pom.xml file this dependency      < dependency >      < groupId > org.cups4j </ groupId >      < artifactId > cups4j </ artifactId >      < version > 0.7.6 </ version > </ dependency > now at this imports to import  java.io.FileInputStream; import  java.io.FileNotFoundException; import  java.net.URL; import  java.util.HashMap; import  java.util.List; import  org.cups4j.CupsClient; import  org.cups4j.CupsPrinter; import  org.cups4j.PrintJob; import  org.cups4j.PrintJobAttributes; import  org.cups4j.PrintRequestResult; import  org.cups4j.WhichJobsEnum; add this method to prin...
Post a Comment
Read more