Upon checking the console, I encountered this
https://i.sstatic.net/PWoT5.jpg
The app has been developed using Ubuntu and Nginx so far with no firewall configuration yet in place. This is my first time deploying a MERN stack and utilizing DigitalOcean.
Here are the steps I am following to get the app up and running:
Starting by running npm run build on the server to compile tsx to js.
Then proceeding to run npm run build on the client side.
Moving the client's build folder to the server's build folder while renaming it as 'static'.
In the server folder, executing pm2 start build/index.js to point to build/static/index.html.
Upon visiting the droplet IP address, the following image shows the result.
https://i.sstatic.net/1IQ0Y.jpg
The js/main.js file remains unchanged.
Below is the content of my index.ts file.
import express from 'express'
import userRoutes from './routes/user-routes'
import membershipRoutes from './routes/membership-routes'
import memberPlanRoutes from './routes/plan-routes'
import passwordRoutes from './routes/password-routes'
import memberExtendRoutes from './routes/extend-routes'
import bodyParser from 'body-parser'
import mongoose from 'mongoose'
import dotenv from 'dotenv'
import cors from 'cors'
import path from 'path'
const app = express()
dotenv.config()
app.use(express.urlencoded({ limit: '50mb', extended: true }))
app.use(express.static('static'))
app.use(cors())
app.enable('trust proxy')
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*')
res.setHeader(
'Access-Control-Allow-Headers',
'Origin, X-Requested-With, Content-Type, Accept, Authorization'
)
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE')
next()
})
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'static/index.html'))
})
app.use('/api/membership/webhook', bodyParser.raw({ type: '*/*' }))
app.use(express.json({ limit: '50mb' }))
app.use('/api/user', userRoutes)
app.use('/api/membership', membershipRoutes)
app.use('/api/plan', memberPlanRoutes)
app.use('/api/password', passwordRoutes)
app.use('/api/extend', memberExtendRoutes)
mongoose.connect(process.env.MONGODB_URL as string).then(() => {
console.log('connected to mongodb')
})
app.listen(8080, () => {
console.log(`Your server is ready on port 8080!`)
})
I have attempted changing app.get('*') to ('/') along with other variations, but it resulted in the same outcome or no static folder at all.
I also came across the following comment, but I am unsure how to implement it.
https://i.sstatic.net/4bN9Y.jpg
Your assistance would be highly appreciated, thank you!