Hello, Today we are going to discuss How to serve a local React app via HTTPS. In this article, we will be setting up HTTPS in development for our create-react-app with our SSL certificate.

Create-react-app (CRA) is a convenient and easy way to set up initial boilerplate when developing React App. To start building React App using CRA, we generally use the following steps to start the setup and run the default CRA app.

npx create-react-app dummy-app
cd dummy-app
npm start

After running these steps our react app runs locally at http://localhost:3000. But we want to runs it at https://localhost:3000. So, the question is how do we run or test the app locally on https.

This is a very simple process for setup own SSL certificate and HTTPS in development. For this guide, brew pre-installed required.

Step 1: Adding HTTPS

In your package.json, update the start script.

"scripts": {
    "start": "HTTPS=true react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

Now run npm start or yarn start and your browser screen show this-

Step 2: Creating an SSL Certificate

At the previous stage, you're already set to go with https. But you don't have a valid certificate, so your connection is assumed to be insecure. So now we create our SSL certificate that works with the localhost. The easiest way to obtain a certificate is via mkcert.

Run these commands in the terminal-

# Install mkcert tool
brew install mkcert

# Setup mkcert on your machine (creates a CA)
mkcert -install

After running the above commands, you'll have created a certificate authority on your machine which enables you to generate certificates for all of your future projects.

From the root of your create-react-app project, you should now run:

# Create .cert directory if it doesn't exist
mkdir -p .cert

# Generate the certificate (run from the root of this project)
mkcert -key-file ./.cert/key.pem -cert-file ./.cert/cert.pem "localhost"

We'll be storing our generated certificates in the .cert directory. These should not be committed to version control, so you should update your .gitignore to include the .cert directory.

Step 3: Include SSL certificate in start script

Next, we need to update the start script again to include our newly created certificate:

"scripts": {
    "start": "HTTPS=true SSL_CRT_FILE=./.cert/cert.pem SSL_KEY_FILE=./.cert/key.pem react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
}

When you run npm start or yarn start again, you should now see that your connection is secure.

Note: start script may have some changes for Windows, Linux, and Mac users.

Don't be a non-interactive person! Feel free to comment down your suggestions and questions, I am always open for your queries.

Follow me on Instagram or Linkedin. Subscribe my weekly Newsletter , I assure its not going to spam your mailbox.

Environment variables are helpful in software development. Many programs and applications set or get environment variables.

Environment variables allow us to manage the configuration of our applications separate from our codebase. Separating configurations make it easier for our application to be deployed in different environments.

What are environment variables?

Environment variables are variables external to our application that reside in the OS or the container of the app is running in. An environment variable is simply a name mapped to a value.

By convention, the name is capitalized e.g. JWT_REFRESH_SALT=a3889318b21d7b92. The values are strings.

If you open the terminal or command line application in Linux, Mac OS, or Windows and enter set, you will see a list of all environment variables for your user.

Did you know?

When we install any software (like Java SDK, Language compiler, or databases, ...). In the case of many software, we have to set a PATH variable for that. That PATH variable also a part of the environment variable of your operating system.

Why do we need environment variables?

Environment variables are excellent for decoupling application configurations. Typically, our applications require many variables to be set in order for them to work. By relying on external configurations, your app can easily be deployed in different environments. These changes are independent of code changes, so they do not require your application to be rebuilt to change.

• Security: Some things like API keys should not put in plain text in the code and thereby directly visible.
• Flexibility: you can reduce conditional statements e.g. “If production server then do X else if test server then do Y else if localhost then do Z …”.
• Adoption: Popular services like GitLab or Heroku support the usage of environment variables.

Data that changes depending on the environment your app is running on should be set as environment variables. Some common examples are:

• HTTP Port and Address
• Database, cache, and other storage connection information
• Location of static files/folders
• Endpoints of external services
  • For example, in a development environment, your app will point to a test API URL, whereas in a production environment your app will point to the live API URL.

Sensitive data like API keys should not be in the source code or known to persons who do not need access to those external services.

How does a .env file look like?

A .env file is more or less a plain text document. It should be placed in the root of your project. You specify key-value pairs and you can write single-line comments using #.

Example of .env file:

# JWT
AUTH_TOKEN_SALT=a7f1681c86cee718
REFRESH_TOKEN_SALT=df4f2ffea4ddf7ef

# SERVER CONFIG
PORT=8080

# DATABASE
DB_HOSTNAME=mysql.example.com
DB_HOSTPORT=3606
DB_USERNAME=user
DB_PASSWORD=demo123
DB_DBNAME=testDb

How to use custom environment variables in Node.js

1. Create a .env file. The file should be placed in the root of your project.
2. Install the dotenv npm module using:

   npm install dotenv --save
   # OR
   yarn add dotenv
   

3. Require dotenv as early as possible (e.g. in app.js):

   require('dotenv').config({path: __dirname + '/.env'})
   

4. Wherever you need to use environment variables (e.g. in GitLab, in Jenkins, in Heroku, …) you need to add your environment variables. The way depends on the platform but it is usually easy to do.

How to access environment variables in Node.js

Consider a hello world Node.js application with environment variables for the host and port the app runs on.

Create a new file called app.js in a workspace of your choice and add the following:

const http = require('http');

// Load custom environment variables
require('dotenv').config();

// Read the host address and the port from the environment
const hostname = process.env.HOST;
const port = process.env.PORT;

// Return JSON regardless of HTTP method or route our web app is reached by
const server = http.createServer((req, res) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.end(`{"message": "Hello World"}`);
});

// Start a TCP server listening for connections on the given port and host
server.listen(port, hostname, () => {
    console.log(`Server running at http://${hostname}:${port}/`);
});

Also, create a new file called .env in the root of your app.js file and add the following:

# Server Port & Host
PORT=4000
HOST=localhost

Node.js provides a global variable process.env, an object that contains all environment variables available to the user running the application. It is expecting the hostname and the port that the app will run on to be defined by the environment.

You can run this application by entering this command in the terminal, node app.js, granted you have Node.js installed. You will notice the following message on your console:

Server running at http://localhost:4000/

Note: Even if dotenv is used in the application, it is completely optional. If no .env file is found, the library fails silently. You can continue to use environment variables defined outside the file.

Production Usage

Storing your environment variables in a file comes with one golden rule: never commit it to the source code repository. You do not want outsiders to gain access to secrets, like API keys. If you are using dotenv to help manage your environment variables, be sure to include the .env file in your .gitignore or the appropriate blacklist for your version control tool.

If you cannot commit the .env file, then there needs to be some way for a developer to know what environment variables are required to run the software. It is common for developers to list the environment variables necessary to run the program in a README or similar internal documentation.

Some developers create and maintain a .sample-env file in the source code repository. This sample file would list all the environment variables used by the app, for example:

# Server Port & Host
PORT=
HOST=

A developer would then clone the repository, copy the .sample-env file into a new .env file and fill in the values.

If your app is running on a docker container or a Platform-as-a-Service provider like Heroku or Openshift, then you will be able to configure environment variables without having to use the .env file.

Remember, it fails silently so it would not affect the running of the app if the file is missing.

Conclusion

Thanks for reading this article. As you can see, it is easy to use and work with environment variables in Node.js. Like Node.js other languages also supports environment variable and have their respective modules for handling them. How are you using environment variables? Let me know in the comments.

I remember when I started writing codes about a couple of years ago, the very first thing I learned was the famous hello world statement which is sure its the same across all languages.

Despite the myth that “Hello World!” is the first thing to be output by all computers, its prevalence in nearly all facets of technology is undeniable.

Getting started in programming is quite fun and the best part is you can write codes at any age! wonderful right? Maybe you can get a little confused at the initial stage regarding what language is the best for you to learn. But believe me, after some time you are going to enjoy typing every single line of code and their outcomes.

Whether you want to uncover the secrets of the universe, or you just want to pursue a career in the 21st century, basic computer programming is an essential skill to learn.” - Stephen Hawking

As they say, the best time to start is now, don't procrastinate, as long you have the passion and determination their nothing difficult to learn.

// "Hello World!" in C

int main(){
    printf("Hello World!");
    return 0;
}

Language maybe is different but "Hello world!" always be there for showing you the richness of that language.

// Simple NodeJS Server Application with "Hello World!"

const express = require('express')
const app = express()
const port = process.env.PORT || 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Express app listening on port ${port}!`))

There is no better way to start programming than to start. The most recommended thing is to learn the basics, and for this, the best thing is to rack your brains trying to make a concrete project or an application that you want to create or develop. Having a specific goal helps a lot.

TL;DR - It has been a long one and remember to keep reading code, keep writing code, do not forget to try what it does. Once comfortable in a language, moving on to the next will be easier and will bring you new skills.

Ufff! In this "Hello World!" myth I forgot that this is actually my first post here, so I have to introduce myself to you or maybe it's my own "Hello World!".

About Me

Hello! my name is Ganesh Agrawal. If you want to know more about me you can see here, you must be new here, so I decided to write my first post talking a little about my motivations to have a blog.

I intend to share the knowledge that I have been acquiring as a way to validate, memorize, and help other beginners who are going through the same problems and doubts.

Also, I am thinking about post web development tips mainly, a little bit of theory about what I've been studied in my academic life, reviews of technology books, events, courses, and whatever else comes to mind.

So that's it, feel free, pour yourself a coffee, and wait for new posts to exchange ideas about the world dev.