React Project — Run Production on Windows Local Machine

Photo by Avinash Murugappan on Unsplash

I was working on an app project using a Create-React-App.

By default React will allow us to run the app from the Development on localhost:3000. But since I need to manipulate the data & I need to use JSON Server on my local machine, so it would be ideal to test how the app work in the Production on localhost:8000.

This article is to show you how to run the Production Build on localhost:8000 on Windows OS

First, open the terminal, I used the one that build in on VS Code.

1. Open the terminal (Ctrl + `)
2. Stop the terminal (Ctrl + C)
3. Type npm run build
4. Type npm install -g serve
5. Type Get-ExecutionPolicy -List

Then you will see this list

----- ---------------
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser       Undefined
 LocalMachine       Undefined

6. to be continued …

Now, what does it means with Undefined?

Here we are talking about PowerShell execution policies on Windows.

PowerShell’s execution policy is a safety feature that controls the conditions under which PowerShell loads configuration files and runs scripts. This feature helps prevent the execution of malicious scripts.

On a Windows computer you can set an execution policy for the local computer, for the current user, or for a particular session. You can also use a Group Policy setting to set execution policies for computers and users.

Execution policies for the local computer and current user are stored in the registry. You don’t need to set execution policies in your PowerShell profile. The execution policy for a particular session is stored only in memory and is lost when the session is closed.

The execution policy isn’t a security system that restricts user actions. For example, users can easily bypass a policy by typing the script contents at the command line when they cannot run a script. Instead, the execution policy helps users to set basic rules and prevents them from violating them unintentionally.

Undefined

• There is no execution policy set in the current scope.
• If the execution policy in all scopes is Undefined, the effective execution policy is Restricted for Windows clients and RemoteSigned for Windows Server.

Restricted

• The default execution policy for Windows client computers.
• Permits individual commands, but does not allow scripts.
• Prevents running of all script files, including formatting and configuration files (.ps1xml), module script files (.psm1), and PowerShell profiles (.ps1).

Since our execution policies is undefined, it means that it is restricted, that’s why by default you can not continue with the next step serve -s build -p 8000

Instead, what you need to do is (continuing step #6)

6. Type
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrenctUser

7. Type Get-ExecutionPolicy -List

----- ---------------
MachinePolicy       Undefined
   UserPolicy       Undefined
      Process       Undefined
  CurrentUser    RemoteSigned
 LocalMachine       Undefined

Now you will see the CurrentUser with new Status “RemoteSigned”, this allow local scripts and remote signed scripts to run on your local computer.

RemoteSigned

• The default execution policy for Windows server computers.
• Scripts can run.
• Requires a digital signature from a trusted publisher on scripts and configuration files that are downloaded from the internet which includes email and instant messaging programs.
• Doesn’t require digital signatures on scripts that are written on the local computer and not downloaded from the internet.
• Runs scripts that are downloaded from the internet and not signed, if the scripts are unblocked, such as by using the Unblock-File cmdlet.
• Risks running unsigned scripts from sources other than the internet and signed scripts that could be malicious.

8. Last, type serve -s build -p 8000

Now you will see something like this in the terminal

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   Serving!                                      │
   │                                                 │
   │   - Local:            http://localhost:8000     │
   │   - On Your Network:  http://192.168.2.2:8000   │
   │                                                 │
   │   Copied local address to clipboard!            │
   │                                                 │
   └─────────────────────────────────────────────────┘

Well done!

Now, open up your browser and type http://localhost:8000in the address bar. And that is your Production app.

I hope this article is helping you to solve the problem. Please applaud or leave a comment if you find it useful. All the best, thank you!