How to convert create-react-app script into a static bundle

Question

Apologies if this is a strange/stupid question but I have been trying to transition from PHP to more JavaScript orientated development.

I have built a small single-page app with no routing using create-react-app, it is working exactly how I want but I now want to deploy it inside my existing PHP app.

The app does make some API calls so it cannot simply be converted to a static page.

Is there any way I can take what I currently have and convert it into a .js file that can simply be loaded without needing a server?

Thanks

Answer 1

You can do it with webpack devServer

Here an example:

package.json

{
   "name": "sampleApp",
   "version": "1.0.0",
   "description": "",
   "devDependencies": {
      "webpack": "4.15.0",
      "webpack-cli": "3.0.8",
      "webpack-dev-server": "3.1.4"
   },

   "scripts": {
        "dev": "webpack --mode development && webpack-dev-server --mode development",
        "build": "webpack --mode production && webpack-dev-server --mode production"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/sample/sample.git"
   }
}

webpack.config.js

module.exports = {
   entry: './src/index.js',
   output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'bundle.js',
   },
  devServer: {
    contentBase: path.resolve(__dirname, './'),
    publicPath: '/build/',
    host: '127.0.0.1',
    port: 9998,
    open: true
  },
  resolve: {
    extensions: ['.ts', '.js'],

  }
};