When trying to deploy my app on Heroku, I'm getting the following errors:
Cannot GET /
NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).
Server is being run outside of live development mode, meaning it will only serve the compiled application bundle in ~/dist. Generally you do not need an application server for this and can instead use a web server such as nginx to serve your static files. See the "deployment" section in the README for more information on deployment strategies.
I understand that I should be running it "live", rather than from the localhost, so I set the following settings via the CLI:
heroku config:set NODE_ENV=production
heroku config:set NODE_PATH=./src
heroku config:set NPM_CONFIG_PRODUCTION=false
What else should I check for. The app is a clone of this boiler: https://github.com/davezuko/react-redux-starter-kit
My Heroku link is: https://hidden-temple-43853.herokuapp.com/
Assuming you don't use a Procfile to tell Heroku how to launch your app, the npm start script of package.json will be used instead.
Are you running the npm run deploy with NODE_ENV=production before deploying to Heroku?
Have a look at this issue where a fix was suggessted on deploying to Heroku (copied below).
// ...
// ------------------------------------
// Apply Webpack HMR Middleware
// ------------------------------------
if (config.env === 'development') {
const webpackDevMiddleware = require('./middleware/webpack-dev').default
const webpackHMRMiddleware = require('./middleware/webpack-hmr').default
const compiler = webpack(webpackConfig)
// Enable webpack-dev and webpack-hot middleware
const { publicPath } = webpackConfig.output
app.use(webpackDevMiddleware(compiler, publicPath))
app.use(webpackHMRMiddleware(compiler))
// ...
Related
I am stuck in the deployment phase of the next.js app in NameCheap server the file is working properly in localhost but it shows an error when I deploy it on NameCheap hosting service.
returncode: 0
stdout:
> yourguide-next-frontend#0.1.0 dev /home/yourhikf/dev.yourguide.pk
> node server.js
stderr:
npm WARN lifecycle The node binary used for scripts is /home/yourhikf/nodevenv/dev.yourguide.pk/14/bin/node but npm is using /opt/alt/alt-nodejs14/root/usr/bin/node itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
The next.config file is
/** #type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
swcMinify: true,
}
module.exports = nextConfig
I am unable to find the mistake because I install all the package from run npm install. kindly tell me the solution of my problem.
I'm doing a Vue project that runs on Electron. Since Vue uses webpack dev server to run the Vue app in development mode, I need to launch Electron with the dev server URL right after compilation completes and dev server has been started. Right after this.
I know I can manually run Electron after this but I need this task to be automated. My only purpose for this is to get Vue devtools running on Electron. Vue devtools won't work even if I set writeToDisk: true and open up the index.html on Electron. It only seems to work over the dev server (Issue seems to be file:// protocol). I found out that It's possible to open a browser after the server has started. But can't run any custom scripts.
So what I want is to automatically run cross-env NODE_ENV=development electron dist/main.js after I run serve Vue task and the dev server has been started. (I also know that this feature is already implemented in vue-cli-plugin-electron-builder but I'm avoiding all these plugins for multiple reasons)
You can prepend pre and post to npm scripts, and npm will figure out what you want. Because serve probably runs in the foreground, a postserve would normally not work, but you can get around that by using &. This won't wait for any build steps to complete, but if it's a requirement to have it wait, you could throw a short sleep in as well.
"serve": "my serve command &",
"postserve": "cross-env NODE_ENV=development electron dist/main.js"
// or with a sleep
"postserve": "sleep 5 && cross-env NODE_ENV=development electron dist/main.js"
This is how I ended up doing it and managed to create a build tool called Vuelectro.
I had to do it programmatically using the #vue/cli-service module and manually start the serve process where I could run electron once the webpack dev server was started.
const vueService = require('#vue/cli-service');
const service = new vueService(process.cwd());
function serveDev() {
service.init("development");
service.run('serve').then(({server, url}) => {
let electron = spawn(path.join(process.cwd(), 'node_modules', '.bin', process.platform === 'win32' ? 'electron.cmd' : 'electron'), ['app/electron-main.js'], {stdio: 'inherit'});
electron.on('exit', function (code) {
process.exit(0);
});
}).catch((err) => {
console.error(err.stack);
});
}
Complete source code can be found here.
I am using GitLab ci as my CI/CD tool. I am deploying the dockerized react app to cloud run but I am not able to access the environment variables declared on cloud run. Thank you!
Dockerfile
# build environment
FROM node:8-alpine as react-build
WORKDIR /app
COPY . ./
RUN npm install
RUN npm run build
# server environment
FROM nginx: alpine
COPY nginx.conf /etc/nginx/conf.d/configfile.template
COPY --from=react-build /app/build /usr/share/nginx/html
ENV PORT 8080
ENV HOST 0.0.0.0
EXPOSE 8080
CMD sh -c "envsubst '\$PORT' < /etc/nginx/conf.d/configfile.template > /etc/nginx/conf.d/default.conf && nginx -g 'daemon off;'"
gitlab-ci.yml
default:
image: google/cloud-sdk:alpine
before_script:
- gcloud config set project PROJECTID
- gcloud auth activate-service-account --key-file $GCP_SERVICE_CREDS
stages:
- staging
- production
staging:
stage: staging
environment:
name: staging
only:
variables:
- $DEPLOY_ENV == "staging"
script:
- gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
- gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated
production:
stage: production
environment:
name: production
only:
variables:
- $DEPLOY_ENV == "production"
script:
- gcloud builds submit --tag gcr.io/PROJECTID/REPOSITORY
- gcloud run deploy REPOSITORY --image gcr.io/PROJECTID/REPOSITORY --platform managed --region us-central1 --allow-unauthenticated --set-env-vars NODE_ENV=production
Credits to Guillaume Blaquiere because this answer is based on his post from this thread.
According to React documentation:
The environment variables are embedded during the build time. Since Create React App produces a static HTML/CSS/JS bundle, it can’t possibly read them at runtime. To read them at runtime, you would need to load HTML into memory on the server and replace placeholders in runtime.
Most likely what happens is that you expose static files to your users and the users get the files and load them in their browser like this:
console.log("REDIRECT", process.env.REACT_APP_API_END_POINT)
This returns null because the users' browser execute the Javascript and read the env variable on the current environment: the users' browser. You should have an execution that run on Cloud Run to use the env vars. If the code is ran on user side (in their browser), the env vars will not appear.
As I understand it, you want to access environment variables declared on GCP such as $GCP_SERVICE_CREDS, $PROJECTID, $REPOSITORY and others on your Gitlab pipeline.
To do this, go to Gitlab settings then click on CI/CD. Once there, click on the Expand button in front of Variables and you add your various GCP variables with their Values.
serve has been installed globally using npm install -g serve command and It works locally, but deploying to a Windows server gives the following error:
"serve" is not recognized as an internal or external command
How to fix this error? Also, what is the use of the server.js file in a react project, and how does it help with deployment?
npm serve is installed globally please click here to see the image
I know that running npx serve -s build should work. I had the same problem as you. The npx command works for me. If you have npx problems, check your version of nodejs. I'm running 10.16.2 (so that we're on the same page). https://www.npmjs.com/package/serve
The rest of your question is relative to the rest of your set up. I don't have a server.js file of my own (there are some node_module server.js files, is that what you mean)?
As I understand a create-react-app, npm run start will allow you to run your application locally. I don't need serve -s build for that.
I used an amplify create react app. For an amplify application, I just run amplify publish and my application's build directory is sent to an S3 bucket for me. If you don't have that configuration, and you want the quick and dirty answer... just take the contents of your build directory in your react application and drop those files on your web server. That should get you 90% of the way there (mind the default page that renders).
Serving React Files
Basic Exapmle:-
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);
For your base path in the domain serve the index.html you fetched from your build process.
If you need more info :- https://create-react-app.dev/docs/deployment
Why is Heroku saying compression is undefined?? If I manually set process.env.NODE_ENV = 'production' and run the app with node server everything works fine....
error log: https://gist.github.com/anonymous/0669f4c9f937a0e47034
project code: https://github.com/leptone/user-info
The error you're getting means you need to install the compression library in your package.json -- since it isn't currently listed in there, Heroku hasn't installed the library, and that's why your code is failing =)
You should be able to run
npm install --save compression
Then commit the changes to your package.json, and you should be good to go!
The issue was that I had hard coded my port number to 3000. I needed to use
app.listen(process.env.PORT)
I don't know why it was tripping up at
app.use(compression())
but correcting the port fixed the problem.