如何使用Laravel将React部署到我的开发服务器

Question

I'm so confuse how to setting up my project to deploy my project to my development server. I got a problem after I upload my files to the server.

this is what my browser shows if i open my website url. I read some post in stackoverflow How to deploy a React App on Apache web server and tells that I need to npm run build. Yes I tried it but my terminal says

missing build script

I have question do i need to configure the htaccess? I don't know where to configure in laravel or in react?

Here's my package.json file

    {
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "build": "webpack --mode production"
    },
    "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.1.0",
        "axios": "^0.18.0",
        "babel-eslint": "^8.2.6",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-preset-react": "^6.23.0",
        "babel-preset-stage-0": "^6.24.1",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "eslint": "^4.19.1",
        "file-loader": "^2.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "url-loader": "^1.1.1"
    },
    "dependencies": {
        "@types/recompose": "^0.27.0",
        "antd": "^3.8.2",
        "concurrently": "^4.0.1",
        "cors": "^2.8.4",
        "datatables.net": "^1.10.19",
        "es6-promise": "^4.2.5",
        "font-awesome": "^4.7.0",
        "google-map-react": "^1.1.0",
        "google-maps-react": "^2.0.2",
        "isomorphic-fetch": "^2.2.1",
        "jwt-auth": "^2.0.1",
        "jwt-decode": "^2.2.0",
        "react-bootstrap": "^0.32.4",
        "react-bootstrap-sweetalert": "^4.4.1",
        "react-bootstrap-table": "^4.3.1",
        "react-bootstrap-table-next": "^1.2.1",
        "react-bootstrap-table2-paginator": "^1.0.3",
        "react-bootstrap-table2-toolkit": "^1.1.1",
        "react-bs-notifier": "^5.0.0",
        "react-filter-search": "^1.0.8",
        "react-geolocated": "^2.4.0",
        "react-geolocation": "^1.0.4",
        "react-google-maps": "^9.4.5",
        "react-js-pagination": "^3.0.2",
        "react-quill": "^1.3.1",
        "react-recaptcha": "^2.3.10",
        "react-redux": "^5.0.7",
        "react-responsive-data-table": "^1.0.4",
        "react-router": "^4.3.1",
        "react-router-dom": "^4.3.1",
        "react-s-alert": "^1.4.1",
        "react-search-input": "^0.11.3",
        "routes": "^2.1.0",
        "sweetalert": "^2.1.0",
        "sweetalert-react": "^0.4.11",
        "sweetalert2": "^7.28.4"
    }
}

Here's my webpack.config.js

const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const package = require('./package.json')

const LIBRARY_NAME = 'fuse'
const VERSION = package.version
const AUTHOR = package.author
const HOMEPAGE = package.homepage

const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
const env = process.env.WEBPACK_ENV

let copyright = fs.readFileSync('COPYRIGHT.txt', 'UTF8')
let outputFile
let plugins = [
  new webpack.BannerPlugin({
    banner: copyright
      .replace('{VERSION}', `v${VERSION}`)
      .replace('{AUTHOR_URL}', `${AUTHOR.url}`)
      .replace('{HOMEPAGE}', `${HOMEPAGE}`),
    entryOnly: true
  })
]

if (env === 'build') {
  plugins.push(new UglifyJsPlugin({ minimize: true }))
  outputFile = `${LIBRARY_NAME}.min.js`
} else {
  outputFile = `${LIBRARY_NAME}.js`
}

const config = {
  entry: __dirname + './src/index.js',
  devtool: 'source-map',
  entry: './src',
  output: {
    path: __dirname + '/dist',
    filename: outputFile,
    library: 'Fuse',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  module: {
    loaders: [{
      test: /(\.js)$/,
      loader: 'babel-loader',
      exclude: /(node_modules)/
    }]
  },
  plugins: plugins
}

module.exports = config

When I browse the page look this

after i npm run build it look like this..

Answer 1

npm run build is missed in the script in package.json . If you want you deploy npm run prod . Or you can run npm run watch to see for code changes in real time, but it's good to use on local developement. If you are working on laravel mix project, you need to set your apache config.

open file /etc/apache2/sites-available/000-default.conf and then write your own root directory path

DocumentRoot /var/www/<your directory>/public

Next, change you .htacces file : open up /var/www/mmc1/public/.htaccess write the following at the top

DirectoryIndex index.php

Now, we need to make your server recognize the .htaccess configuration Go to /etc/apache2/apache2.conf and change AllowOverride None into AllowOverride All

<Directory /var/www/<your dir>/public>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

On your terminal,

sudo a2enmod rewrite //rewrite module enable

sudo service restart apache2 //restart your server

And it would be work well...