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
Related
I am working on a Laravel and Vue project, at the moment of executing the server
php run serve the project works normally, I can log in normally but, when I run the vue compilation command npm run watch or npm run dev the page stops loading and throws me an error in the console enter image description here
the composition of the webpack.mix.js file is this:
mix.webpackConfig({
output: {
publicPath: '/mediamanager/public',
publicPath: '/',
chunkFilename: 'js/components/[name].js',
}
});
Trying to source data from API in order to querying that data from gatsby and display it, but 😶🌫️
gatsby develop
SyntaxError: Unexpected token 'export'
when:
./gatsby-node.js
sync function fetchWinesAndTurnIntoNodes() {
const res = await fetch('https://api.sampleapis.com/wines/reds');
const wines = await res.json();
console.log(wines)
}
export async function sourceNodes(params) {
await Promise.all([await fetchWinesAndTurnIntoNodes(params)]);
}
"The command we want to run is called gatsby build. But because we want to use es modules with gatsby, we use a package called esm. One way to require it is to set the NODE_OPTIONS environmental variable to -r esm. Finally to make this work for windows users, we use the cross-env package. Hopefully once Node es modules are stable, we can bring this back to simple gatsby build" Wes Bos.
So, install
npm i esm -D
npm i cross-env -D
then add to scripts at
./package.json
"start": "cross-env NODE_OPTIONS=\"-r esm\" gatsby develop",
"build": "cross-env NODE_OPTIONS=\"-r esm\" gatsby build",
solved! 🚀
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
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.
Is was wondering if its possible to deploy a React Native app to Heroku? The reason I ask is because then I can retrieve the url and place it in an iframe to mimic an iPhone where the user can then tryout the app without actually having to install it on to the iPhone via iTunes.
This is possible using react-native-web (sources).
There are few things that you have to do to set this up on heroku:
in the settings tab of your your heroku app dashboard
set the buildpack as heroku/nodejs,
in package.json set the build script to build your web version from RN sources, for example, if you are using expo: expo build:web,
create a Procfile in the root directory to serve the web
version: for example, if you used expo, the build directory is web-build and therfore the command should be npx serve web-build,
Additionally, if you use expo, make sure to add the expo-cli as a dev dependency: npm install -D expo-cli.
You will then simply need to push to heroku the usual way. By default, heroku will run yarn build (or npm run build depending on wether you used one or the other to generate your lock file).
In the end, here is what the package.json file might look like (using expo again):
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest --watchAll",
"build": "expo build:web"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"#expo/vector-icons": "^12.0.0",
"#react-native-community/masked-view": "0.1.10",
"#react-navigation/bottom-tabs": "^5.11.1",
"#react-navigation/native": "^5.8.9",
"#react-navigation/stack": "^5.12.6",
"expo": "~40.0.0",
"expo-asset": "~8.2.1",
"expo-constants": "~9.3.0",
"expo-font": "~8.4.0",
"expo-linking": "~2.0.0",
"expo-splash-screen": "~0.8.0",
"expo-status-bar": "~1.0.3",
"expo-web-browser": "~8.6.0",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
"react-native-gesture-handler": "~1.8.0",
"react-native-safe-area-context": "3.1.9",
"react-native-screens": "~2.15.0",
"react-native-web": "~0.13.12"
},
"devDependencies": {
"expo-cli": "^4.0.16",
"#babel/core": "~7.9.0",
"#types/react": "~16.9.35",
"#types/react-native": "~0.63.2",
"jest-expo": "~40.0.0",
"typescript": "~4.0.0"
},
"private": true
}
And the Procfile simply consists of a single line:
web: npx serve web-build
You could probably achieve similar results using reactxp instead of reac-native-web, but I never tried it myself.
Client side routing
Configuring Heroku for client side routing
If you use client side routing (react navigation for example), you will have to setup a few more things to make sure linking works. With the previous build alone, client side routing will fail (404 errors) because heroku will try to route requests on its own, but your app needs everything to end up at index.html so it can perform routing tasks on its own (client side routing).
We will thus prevent any Heroku routing by adding a second buildpack heroku-community/static next to heroku/nodejs. This second buildpack is configured via a /static.json file (default values):
{
"root": "web-build/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
Configuring webpack for client side routing
You probably already have this part setup because otherwise you would have 404 errors even locally. To allow client side routing it seems like we also need to configure webpack (output.publicPath and devServer.historyApiFallback), with expo this can be done by running expo customize:web and then editing /webpack.config.js with:
const createExpoWebpackConfigAsync = require('#expo/webpack-config');
module.exports = async function (env, argv) {
const config = await createExpoWebpackConfigAsync(env, argv);
config.output.publicPath = '/';
config.devServer = {
...config.devServer,
historyApiFallback: true,
};
return config;
};
There is a nice article about these routing issues you might have here: Fixing the 'cannot GET /URL'
Steps for deploying React native/expo app to heroku:
1:
set heroku buildpack as static: >heroku buildpacks:set heroku-community/static
2:
Add static.json for static buildtype:
{
"root": "web-build/",
"routes": {
"/**": "index.html"
}
}
More settings here: https://github.com/heroku/heroku-buildpack-static#configuration
3:
npm run build (package.json: "build": "expo build:web") --> Creates web-build folder
git add .
git commit
git push heroku master
heroku open