I was trying to use google reCAPTCHA on my gatsby project.
I would like to use it on my local server without inserting my localhost domain on it.
So i added site domain name on my /etc/hosts and changed local server name using
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop -H mydomain.com -p 8000",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"test": "jest",
"deploy": "gatsby build --prefix-paths && gh-pages -d public"
},
I started the dev server using npm start and the local server was on.
You can now view xxx-xxx in the browser.
⠀
http://your-domain.com:8000/
⠀
View GraphiQL, an in-browser IDE, to explore your site's data and schema
⠀
http://your-domain.com:8000/___graphql
but when i go to http://your-domain.com:8000, it gives me error:
This site can’t be reached.
This is my hosts file
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 your-domain.com
...
When i visit localhost:8000, it works.
I am not sure why this is still on localhost other than your-domain.com.
Thanks in advance.
Related
I have 2 GCP projects "dev", and "prod" for a simple NextJS app. I am deploying to App Engine with the following configurations:
app.dev.yaml
runtime: nodejs16
instance_class: F1
handlers:
- url: /.*
secure: always
script: auto
- url: /icons
static_dir: /public/icons
app.prod.yaml
runtime: nodejs16
instance_class: F2
handlers:
- url: /.*
secure: always
script: auto
- url: /icons
static_dir: /public/icons
next.config.js
const nextConfig = {
experimental: {
externalDir: true
},
reactStrictMode: true,
images: {
domains: ["ik.imagekit.io"]
},
distDir: "build"
};
module.exports = nextConfig;
package.json (scripts)
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 8080",
"deploy:dev": "npm run build && gcloud app deploy --quiet --project=<dev-project> --appyaml=app.dev.yaml",
"deploy:prod": "npm run build && gcloud app deploy --quiet --project=<prod-project> --appyaml=app.prod.yaml",
"lint": "next lint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
},
My dev environment (F1 instance) performs substantially better than my prod environment (F2). Way faster cold boots and image loading. The dev instance was able to quickly render a 2MB hero jpg that consistently caused a memory fault on the prod instance. I've played around with different instance classes for prod (and eventually tinified the jpg), but nothing seems to perform as well as my dev standard environments F1. I have double and triple checked the instance classes in the GCP console for each project. At this point, I do not want to go to flex. I need to understand what is driving the inconsistency between the projects to be able to accurately gauge the appropriate GAE deployment for production.
I'll lay this out below in detail:
Goal
A React front-end game that uses socket.io to transfer game state data between players on the Express server.
Setup
After finding that it would be impossible/a real work-around to have both React/Express on an Amplify instance, I decided to move to CodePipeline + CodeDeploy to Beanstalk.
I have the Source coming from GitHub, a CodeBuild step, and then CodeDeploy. The CodeBuild should basically just compile based on my buildspec.yml below:
version: 0.2
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build
artifacts:
baseDirectory: build
files:
- '**/*'
cache:
paths:
Although this is calling npm run build, which I'm not sure A) The CodeBuild/CodeDeploy will try to do with node start or B) If this will kick off my react-scripts build in package.json:
"scripts": {
"webpack": "webpack --production",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
I'm assuming I want it to build the webpack bundle in CodeBuild, then CodeDeploy will call the proper run command, but it seems black boxed? Is there another config file?
Runtime Errors
I get Connection Refused, although my server.js file defaults to localhost and 8080:
var hostname = process.env.IP || 'localhost';
var port = process.env.PORT || 8080;
Web.std.out.log:
Sep 20 18:10:10 ip-172-31-41-5 web: > MyApp#0.1.0 start /var/app/current
Sep 20 18:10:10 ip-172-31-41-5 web: > react-scripts start
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: Project is running at http://172.31.41.5/
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: webpack output is served from
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: Content not from webpack is served from /var/app/current/public
Sep 20 18:10:12 ip-172-31-41-5 web: #033[34mℹ#033[39m #033[90m｢wds｣#033[39m: 404s will fallback to /
Sep 20 18:10:12 ip-172-31-41-5 web: Starting the development server...
Ngnix error.log: 2020/09/18 03:07:30 [error] 4436#0: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.31.40.133, server: , request: "GET / HTTP/1.1", upstream: "http://127.0.0.1:8080/", host: "172.31.41.5"
Lot of moving parts so I'm sure there are several missteps here, not sure which is which.
Based on the comments.
By default EB will look for package.json to run your application. If it is missing, and will use use script option in your package.json to start your application. For example, if you start sample node.js application that EB provides, the file is:
package.json
{
"name": "Elastic-Beanstalk-Sample-App",
"version": "0.0.1",
"private": true,
"dependencies": {},
"scripts": {
"start": "node app.js"
}
}
If you don't provide package.json nor Procfile (other option, see below) EB will expect app.js or server.js to be present to start your application.
If you don't want to use package.json, you can also use Procfile to tell EB how to start your application.
When you don't provide a Procfile, Elastic Beanstalk runs npm start if you provide a package.json file. If you don't provide that either, Elastic Beanstalk looks for the file app.js or server.js, in this order, and runs it.
Example in your case could be
web: serve -s build
I use letsencrypt certificate on my server. When running my app with HTTPS=true npm start command, I have an error when browsing my app.
SecurityError: Failed to construct 'WebSocket': An insecure WebSocket
connection may not be initiated from a page loaded over HTTPS.
Here is my config:
in package.json
"start": "react-scripts start",
"prestart": "(cat /etc/letsencrypt/live/domainxxx/cert.pem /etc/letsencrypt/live/domainxxx/privkey.pem > ./node_modules/webpack-dev-server/ssl/server.pem) || :",
(running on debian 9 server)
I'm using react-scripts build to make production ready build and to deploy it on AWS server I'm using GENERATE_SOURCEMAP=false yarn build && aws s3 sync build/ s3://*********
Is there any way to apply gzip compression to build files and include gzipped files into index.html and deploy it on aws so that in browser gzipped files would be served.
Install gzipper package (https://www.npmjs.com/package/gzipper).
Modify build command like this
"build": "react-scripts build && gzipper --verbose ./build"
and build your project you will get both gzip and regular file. It is upto you to make server to serve gzip instead of regular file. If you are using nginx you have to setup your server in nginx.conf file as below
server {
# Gzip Settings
gzip on;
gzip_static on; # allows pre-serving of .gz file if it exists
gzip_disable "msie6"; # Disable for user-agent Internet explorer 6. Not supported.
gzip_proxied any; # enable gzip for all proxied requests
gzip_buffers 16 8k; # number and size of buffers to compress a response
gzip_http_version 1.1;
gzip_min_length 256; # Only gzip files of size in bytes
gzip_types text/plain text/css text/html application/javascript application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype image/svg+xml image/x-icon;
gunzip on; # Uncompress on the fly
listen 4000;
server_name localhost;
location / {
root html/react-app;
index index.html index.htm;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
You can add post build compression to your create-react-app build with minimal configuration using compress-create-react-app. It compresses all html, css and javascript files in the build folder using brotli and gzip algorithms.
First install it as dev dependency:
npm install compress-create-react-app --save-dev
Then edit the build command in your package.json:
"scripts": {
"start": "react-scripts start",
- "build": "react-scripts build",
+ "build": "react-scripts build && compress-cra",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
That's it. Your app will be compressed when you build it.
Disclaimer: I'm the author of compress-create-react-app
I used this command to gzip files keep them the same name
- yarn global add gzipper
- gzipper compress ./build ./gzip_build --output-file-format [filename].[ext] --verbose
FYI: gzipper --verbose got me an error. Missed "compress".
You could also just add a postbuild script in your package.json with:
"postbuild": "find ./build -type f -name '*.css' -o -name '*.js' -exec gzip -k '{}' \\;"
It's not really easy to change cra build process, you can eject it but you'll have to create your own after. But, in your package.json you can define a task to be launched after the build :
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"postbuild": "node yourNodeGzipScript.js" }
Hope it can help.
Per the docs here and here, I have the following in my package.json
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --open",
...
With just --open it opens localhost:8080 when I run npm start. When I add in --host 0.0.0.0 it still opens, but opens 0.0.0.0:8080 and gives me ERR_EMPTY_RESPONSE in the browser. I can manually change it to localhost:8080 and it loads the page just fine.
I tried --host 0.0.0.0 --open --open-page localhost:8080 and it dutifully opens http://0.0.0.0:8080/localhost:8080 for me in the browser.
Has anyone gotten these two options to play nicely together?
Below works fine for me
webpack-dev-server -p --public 127.0.0.1:9000 --host 0.0.0.0 --port 9000
--host is the listening interface. --public is for what would be opened in the browser. And --open-page is for appending the page url after the main domain