Webpack-dev-server how to remove default routing for react app?









up vote
2
down vote

favorite












I'm using webpack-dev-server for running my reactJS application. I want to implement own router (for learning purposes), but webpack-dev-server intercepts pathname of url and return 404 error. How to remove or fix this ? I just want to processing urls' pathname by own route component and remove processing of router with webpack-dev-server.



My webpack.config.js



module.exports = 
entry: "./src/app.js",
module:
rules: [

test: /.js$/,
exclude: /node_modules/,
use:
loader: "babel-loader"


]

;









share|improve this question



















  • 1




    I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
    – Tholle
    Nov 11 at 15:02






  • 1




    @Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
    – Sergio Ivanuzzo
    Nov 11 at 15:08














up vote
2
down vote

favorite












I'm using webpack-dev-server for running my reactJS application. I want to implement own router (for learning purposes), but webpack-dev-server intercepts pathname of url and return 404 error. How to remove or fix this ? I just want to processing urls' pathname by own route component and remove processing of router with webpack-dev-server.



My webpack.config.js



module.exports = 
entry: "./src/app.js",
module:
rules: [

test: /.js$/,
exclude: /node_modules/,
use:
loader: "babel-loader"


]

;









share|improve this question



















  • 1




    I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
    – Tholle
    Nov 11 at 15:02






  • 1




    @Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
    – Sergio Ivanuzzo
    Nov 11 at 15:08












up vote
2
down vote

favorite









up vote
2
down vote

favorite











I'm using webpack-dev-server for running my reactJS application. I want to implement own router (for learning purposes), but webpack-dev-server intercepts pathname of url and return 404 error. How to remove or fix this ? I just want to processing urls' pathname by own route component and remove processing of router with webpack-dev-server.



My webpack.config.js



module.exports = 
entry: "./src/app.js",
module:
rules: [

test: /.js$/,
exclude: /node_modules/,
use:
loader: "babel-loader"


]

;









share|improve this question















I'm using webpack-dev-server for running my reactJS application. I want to implement own router (for learning purposes), but webpack-dev-server intercepts pathname of url and return 404 error. How to remove or fix this ? I just want to processing urls' pathname by own route component and remove processing of router with webpack-dev-server.



My webpack.config.js



module.exports = 
entry: "./src/app.js",
module:
rules: [

test: /.js$/,
exclude: /node_modules/,
use:
loader: "babel-loader"


]

;






reactjs webpack webpack-dev-server






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 11 at 14:59

























asked Nov 11 at 14:53









Sergio Ivanuzzo

1,03931137




1,03931137







  • 1




    I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
    – Tholle
    Nov 11 at 15:02






  • 1




    @Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
    – Sergio Ivanuzzo
    Nov 11 at 15:08












  • 1




    I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
    – Tholle
    Nov 11 at 15:02






  • 1




    @Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
    – Sergio Ivanuzzo
    Nov 11 at 15:08







1




1




I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
– Tholle
Nov 11 at 15:02




I'm not quite sure I understand your question, but maybe you want to set historyApiFallback to true?
– Tholle
Nov 11 at 15:02




1




1




@Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
– Sergio Ivanuzzo
Nov 11 at 15:08




@Tholle yes, that's it! Thanks a lot, if you add your comment as answer - I will accept it.
– Sergio Ivanuzzo
Nov 11 at 15:08












1 Answer
1






active

oldest

votes

















up vote
2
down vote



accepted











You can set historyApiFallback to true and the server will respond with the index.html page instead of 404.



webpack.config.js



module.exports = 
//...
devServer:
historyApiFallback: true

;





share|improve this answer






















    Your Answer






    StackExchange.ifUsing("editor", function ()
    StackExchange.using("externalEditor", function ()
    StackExchange.using("snippets", function ()
    StackExchange.snippets.init();
    );
    );
    , "code-snippets");

    StackExchange.ready(function()
    var channelOptions =
    tags: "".split(" "),
    id: "1"
    ;
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function()
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled)
    StackExchange.using("snippets", function()
    createEditor();
    );

    else
    createEditor();

    );

    function createEditor()
    StackExchange.prepareEditor(
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader:
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    ,
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    );



    );













    draft saved

    draft discarded


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249905%2fwebpack-dev-server-how-to-remove-default-routing-for-react-app%23new-answer', 'question_page');

    );

    Post as a guest















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    2
    down vote



    accepted











    You can set historyApiFallback to true and the server will respond with the index.html page instead of 404.



    webpack.config.js



    module.exports = 
    //...
    devServer:
    historyApiFallback: true

    ;





    share|improve this answer


























      up vote
      2
      down vote



      accepted











      You can set historyApiFallback to true and the server will respond with the index.html page instead of 404.



      webpack.config.js



      module.exports = 
      //...
      devServer:
      historyApiFallback: true

      ;





      share|improve this answer
























        up vote
        2
        down vote



        accepted







        up vote
        2
        down vote



        accepted







        You can set historyApiFallback to true and the server will respond with the index.html page instead of 404.



        webpack.config.js



        module.exports = 
        //...
        devServer:
        historyApiFallback: true

        ;





        share|improve this answer















        You can set historyApiFallback to true and the server will respond with the index.html page instead of 404.



        webpack.config.js



        module.exports = 
        //...
        devServer:
        historyApiFallback: true

        ;






        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited Nov 11 at 15:19

























        answered Nov 11 at 15:10









        Tholle

        33.3k53558




        33.3k53558



























            draft saved

            draft discarded
















































            Thanks for contributing an answer to Stack Overflow!


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.





            Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


            Please pay close attention to the following guidance:


            • Please be sure to answer the question. Provide details and share your research!

            But avoid


            • Asking for help, clarification, or responding to other answers.

            • Making statements based on opinion; back them up with references or personal experience.

            To learn more, see our tips on writing great answers.




            draft saved


            draft discarded














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53249905%2fwebpack-dev-server-how-to-remove-default-routing-for-react-app%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            這個網誌中的熱門文章

            How to read a connectionString WITH PROVIDER in .NET Core?

            Node.js Script on GitHub Pages or Amazon S3

            Museum of Modern and Contemporary Art of Trento and Rovereto