Trouble with setting up custom static route

Question

Trouble with setting up custom static route

Greetings! I am currently working on setting up my project in React and here is my current project structure:

-public
--w
---dist
----bundle.js
---index.html
-server
--server.js
-src
--app.js
-webpack.config.js
-package.json
-.babelrc

For my server, I am using Node.js. I want my static files to be called on localhost:port//w/ and API calls on localhost:port//api/.

I have made attempts at tweaking server.js, routes, project structure, and webpack.config but haven't achieved success yet.

Here's a snippet from my server.js:

(...)

And this is how my webpack.config looks like:

(...)

As for my routes:

(...)

If anyone has any suggestions on what steps I should take or if there's something crucial missing, please feel free to advise me.

javascript node.js reactjs express react-router

Answer 1

Answer №1

If you want to improve efficiency, a restructuring is necessary.

-public
--dist
---bundle.js
--index.html
-server
--server.js
-src
--app.js
-webpack.config.js
-package.json
-.babelrc

Server.js

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;
const publicPath = path.join(__dirname, '../public');

app.use(express.static(publicPath));

// make sure all APIs are set before using fallbacks
app.get('/api/test', (req, res) => {
    res.send("Hello");
});

app.get('/w/*', (req, res) => {
    console.log('Calling..');
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.listen(port, () => {
    console.log(`The server is now running on port ${port}`);
});

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public', 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.js$/, 
                use: 'babel-loader', 
                exclude: /node_modules/
            }
        ]
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        publicPath: '/dist/',
        historyApiFallback: true
    }
}

It's important to maintain your routes as they are.

Answer 2

If you want to improve efficiency, a restructuring is necessary.

-public
--dist
---bundle.js
--index.html
-server
--server.js
-src
--app.js
-webpack.config.js
-package.json
-.babelrc

Server.js

const express = require('express');
const path = require('path');

const app = express();
const port = 3000;
const publicPath = path.join(__dirname, '../public');

app.use(express.static(publicPath));

// make sure all APIs are set before using fallbacks
app.get('/api/test', (req, res) => {
    res.send("Hello");
});

app.get('/w/*', (req, res) => {
    console.log('Calling..');
    res.sendFile(path.join(publicPath, 'index.html'));
});

app.listen(port, () => {
    console.log(`The server is now running on port ${port}`);
});

webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/app.js',
    output: {
        path: path.join(__dirname, 'public', 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.js$/, 
                use: 'babel-loader', 
                exclude: /node_modules/
            }
        ]
    },
    devtool: 'inline-source-map',
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        publicPath: '/dist/',
        historyApiFallback: true
    }
}

It's important to maintain your routes as they are.

Trouble with setting up custom static route

Answer №1

Similar questions

npm fails to function properly following the execution of the 'npm install' command

unable to implement multiple layouts while utilizing react-router

Change PHP code to a JSON file format

The Angular scope remains stagnant even after applying changes

Having difficulty incorporating custom JavaScript files into a testing framework

Attempting to fetch package from an unconventional repository via npm install

Using Rails AJAX to dynamically load partials without the need to submit

How can PHP effectively interpret JSON strings when sent to it?

Successive vows

Checking for the existence of a row in Node.js using Sqlite3

Search for records in MongoDB where the time is below a specified threshold

Error encountered with TypeScript compiler when using a React Stateless Function component

When utilizing the package, an error occurs stating that Chart__default.default is not a constructor in chart.js

The definition of "regeneratorRuntime" is missing in the rete.js library

What is the best way to distribute shared client-side javascript code among NodeJS projects?

Some places may not have detailed information available when using the Google Places API

Sharing application state between different routes in React Router v4 can be achieved by using methods such

Utilize the version designated in the package.json file for your NPM script

The provided argument, which is of type 'RefObject<HTMLDivElement>', cannot be assigned to the parameter of type 'IDivPosition'

The UNHANDLEDREJECTION callback was triggered prematurely during asynchronous parallel execution