I'm struggling with deploying a web app to Heroku. Everything seems fine, there are not errors shown, but I only get a blank page.
I've been searching around the internet and tried everything I saw but can't seem to find the answer.
server.js:
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) =>
res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
);
folders:
I don't know what else to attach, just tell me and I'll provide it. Thank you very very much in advance, this is really really important to me
Generally,
If you want to deploy your entire MERN app to Heroku, first you add a heroku-postbuild script to package.json
In your case, since you have directories frontend, backend containing the client and server respectively.
Add these scripts to your package.json, these scripts will build your react frontend after the push to heroku.
...
"scripts": {
"install-client":"cd frontend && npm install"
"heroku-postbuild": "npm run install-client && npm run build"
}
...
Now in your server.js file,
...
const path = require('path');
app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});
...
Now, if you need to use Client-Side Routing (React Router) update / to /* as shown below,
app.get('/*', function (req, res) {
res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});
I think this should resolve the issue.
Refer: https://create-react-app.dev/docs/deployment/
Are you trying to deploy both the backend and frontend together from heroku?
In the past I've used heroku for my backend and used netlify for deploying my frontend
Related
I've tried other solutions found here but none of them work for me, right now my start script is like this
"build": "tsc && vite build",
"start": "vite preview --host 0.0.0.0 --port $PORT",
when I run this I get this error
2022-12-01T02:51:01.843831+00:00 app[web.1]: sh: 1: vite: not found
I set NPM_CONFIG_PRODUCTIONto falsein order to avoid prune my devDependencies because vite is listed there, but I'm still receiving the same error
Additionally, I tried run a static server
"start": "node server.cjs",
and my server file is this
const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')
const app = express()
//here we are configuring dist to serve app files
app.use('/', serveStatic(path.join(__dirname, '/dist')))
// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) {
res.sendFile(path.join(__dirname, '/dist/index.html'))
})
const port = process.env.PORT || 8000
app.listen(port)
console.log(`app is listening on port: ${port}`)
this worked for some minutes (a really few minutes, like 2,3 minutes) but then I get this
2022-12-01T02:38:39.725919+00:00 heroku[web.1]: Stopping all processes with SIGTERM
2022-12-01T02:38:39.894915+00:00 heroku[web.1]: Process exited with status 143
do you know what could be the problem here or are there any better configuration to deploy a vite app in Heroku? any suggestion? thank you so much
Let me start of with the fact that im new to laravel and english is not my main language so dont mind my grammer. I have a project that has a laravel api with a vue front-end. The Laravel web routing redirects everything to a single blade file that contains the vue app. this way i can use the vue routing. This is has all been working fine for a while now but now im trying to build for production and ive run into the following issue.
after using npm run build to build for production laravel puts /build/ to every route im using through vue. This is very logical given that it uses the build folder in the public directory like it should. But its ofcourse verry ugly for the users. Is there a way to remove the /build/ from the url? (appart from redirecting /build/ to / in the .htacces file on the server)
You can set the environment variables in .env file for javascript using VITE_ prefix as below:
Please add the new environment variable in .env file as below:
VITE_BASE_URL="/"
Made the router related changes in your Vue file as below:
const router = createRouter({
history: createWebHistory(import.meta.env.VITE_BASE_URL || '/'),
routes: [
.....
],
})
Problem from import.meta.env.BASE_URL in vitejs, in build mode this import.meta.env.BASE_URL result "/build/" and development mode result, is "/"
I don't know where to change this, but I fix this problem with
const router = createRouter({
history: createWebHistory("/"),
routes: [
{
......
}
]
})
and fix it
When I enter my URL for my Vue.js application (https://harrishealthtest.herokuapp.com/), the browser takes me to the homepage. Good. However, when I click on the 'Start' button, that's supposed to take me to '/test', I get this message 'Cannot GET /test'.
What am I doing wrong? I have history mode enabled in my routing. I'm not sure if that is causing issues. Or if it's something to do with the connectivity between my Vue.js app and my Laravel REST API. Both are on separate domains. When I click on 'Start', the app is supposed to take me to '/test', and that's where the data from the API is received.
This is what I currently have in my App.vue file:
mounted() {
fetch('https://pure-mountain-87762.herokuapp.com/', {
method: 'get'
})
.then((response) => {
return response.json()
})
// 'jsonData' refers to the json parsed response
.then((jsonData) => {
this.testData = jsonData.data
})
What kind of issue am I having here? Routing? API connectivity? Or something else?
It seems heroku is pointing to the server instead of the client. I had the same error a few weeks back. Two things:
If you are running two npm commands, resume them in the json file that heroku is pointing at. This is an example:
"scripts": {
"client-install": "npm install --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
Add that heroku-postbuild line.
You have to play with the commands in your dev environment, in your computer. Make sure it works in your computer, then push up.
Secondly and this is kinda hacky, however it works for me.
Got to Settings of your app in Heroku, click on Reveal Config Vars button and add this env variable:
DANGEROUSLY_DISABLE_HOST_CHECK=true
This helped me. Hope it helps you.
I am new in vuejs and I am using vuejs in laravel
this is working and showing component but after making refresh
the page what can I do to see changes with out refreshing page?
these are what I have done
in Webpack:
mix.js('resources/assets/js/app.js', 'public/js')
.extract(['vue'])
in my html file:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
commands:
npm run dev
npm run watch
You want to learn how to make single page application (SPA) which does not refresh the page but update the content according to the route.
https://laravel-news.com/using-vue-router-laravel
You will have to learn vue, vue-router to make SPA. when you get some experience then learn Vuex also.
I just had the same issue and struggled for a couple of days, the problem is the webpack mix configuration: this is what worked for me, but take care to remove the host in case you're not working with Laravel Homestead, if you are just leave it as it is and change the proxy value to your site local url.
mix.js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')
.browserSync({
host: '192.168.10.10',
proxy: 'mysite.test',
open: false,
files: [
'app/**/*.php',
'resources/views/**/*.php',
'resources/js/**/*.vue',
'packages/mixdinternet/frontend/src/**/*.php',
'public/js/**/*.js',
'public/css/**/*.css'
],
watchOptions: {
usePolling: true,
interval: 500
}
});
Note: I think it was a sort of a bug in NMP, but the first time I tested this config, it it didn't work. What I did was to remove the polling part, ran
npm watch-poll, stop the watching and then added again the polling settings and ran simply npm run watch and workied like a charm!
EDIT
Btw, there is small issue with this config, you have to save twice for the browser to see the changes
Hope It helps!
-Hugo
You just need to run command into your terminal:
npm install
npm run dev
npm run watch
and will see changes continuously :)
I am trying to deploy my application, which works fine locally. When I use gulp build it says I have all of the files I need. When I do firebase deploy it says that everything uploaded. However, when I use firebase open it makes
it gives me the following 404 errors.
Here is what comes up when I do gulp build and firebase deploy
I can send the gulp-babel.js file upon request. Thanks in advance for looking.
If I am understanding you correctly, you are having a problem with your gulp-babel.js file. The gulp imagemin plugin is probably what you need.
https://www.npmjs.com/package/gulp-imagemin
Then somewhere in that file make sure you are creating something like this.
gulp.task('images', () => {
return gulp.src('app/images/*')
.pipe($.imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}]
}))
.pipe(gulp.dest('dist/images'));
})
See this if you have gulp-load-plugins: gulp-load-plugins not loading plugins