Reactjs – How to specify a port to run a create-react-app based project

create-react-appnpmreactjs

My project is based on create-react-app. npm start or yarn start by default will run the application on port 3000 and there is no option of specifying a port in the package.json.

How can I specify a port of my choice in this case? I want to run two of this project simultaneously (for testing), one in port 3005 and other is 3006

Best Answer

If you don't want to set the environment variable, another option is to modify the scripts part of package.json from:

"start": "react-scripts start"

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4):

"start": "PORT=3006 react-scripts start"

or (may be) more general solution by @IsaacPak

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor solution

"start": "set PORT=3006 && react-scripts start"

cross-env lib works everywhere. See Aguinaldo Possatto answer for details

Update due to the popularity of my answer: Currently I prefer to use environment variables saved in .env file(useful to store sets of variables for different deploy configurations in a convenient and readable form). Don't forget to add *.env into .gitignore if you're still storing your secrets in .env files. Here is the explanation of why using environment variables is better in the most cases. Here is the explanation of why storing secrets in environment is bad idea.

Related Solutions

Javascript – Gridview manipulation using JQuery and JavaScript

var queryString = "";

// This could be based on a number of different events
$('#finishButton').click(function(){

    // Iterate through each input (you could add other form elements)
    $('#myForm input').each(function(){

        // Build your query string to post to your aspx page
        queryString += $(this).attr("name") + "&" + $(this).val() + ",";

    });
});

// Make sure special chars are escaped
queryString = escape(queryString);

// POST the form to your aspx page
$.ajax({ 
    type: 'POST', 
    url: 'myFormProcessor.aspx', 
    data: queryString,
    // Upon a successful POST, successHandler will be called 
    success: successHandler 
});

// Add the new data to the grid
function successHandler(){

    // Clone the last row
    $('#myTable tr:last').clone(true).insertAfter('#myTable tr:last');

    // Here you could just break apart the query 
    // string you build in the above code
    // and use those values to change the values 
    // in the row you added to the grid

}

Make sure to unescape the query string in your aspx page, and then break it up by the delimiters you're using. I used '&' to separate key/value and commas between variables (inputs).

Reactjs – Create-React-App Proxy in Production Build

The proxy feature isn't meant for production.

This might help further explain: https://github.com/facebookincubator/create-react-app/issues/1087#issuecomment-262611096

Best Answer

Related Solutions

Javascript – Gridview manipulation using JQuery and JavaScript

Reactjs – Create-React-App Proxy in Production Build

Related Topic