How to deploy React with Laravel to my development server - reactjs

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...