I have a PHP + React JS application that I'm trying to get deployed via Google App Engine Standard. I've set the app.yaml to use php73 though I'm using Webpack to package the JS via yarn (actually, using Symfony Encore, but that shouldn't matter).
For the time being, I am using webpack locally and pushing those files up to GAE as a workaround, but I'd rather they be packed on GAE itself. Am I able to somehow execute shell commands for a gcloud app deploy so that yarn executes the scripts I want? Is creating a separate service with nodejs running just so it executes package.json scripts necessary, then deploying both PHP and nodejs services?
You can run custom build steps in Google App Engine by adding a "gcp-build" script in your package.json.
Example:
"scripts": {
"prepare": "npm run gcp-build",
"pretest": "npm run gcp-build",
"test": "repo-tools test app -- index.js",
"posttest": "npm run lint",
"lint": "tslint -p .",
"start": "node ./index.js",
"gcp-build": "tsc -p .",
"deploy": "gcloud app deploy" }
Also you can also set the runtime to install specific dependencies using yarn, by using yarn add PACKAGE so a "yarn.lock" file is auto-generated. If App Engine finds a "yarn.lock" in the application directory, Yarn will be used to perform the npm installation
I'd also recommend that you check the following community tutorials:
Run Symfony on Google App Engine standard environment
Using Yarn on Google App Engine
In addition to checking the Symfony Demo Application code that might be a good example.
Related
I am wondering what would the difference be between npm run dev and npm run start.
To my surprise, I could not find much information online about this topic.
Specifically, I'd like to know in the context of React and Next JS.
I noticed that with React, you can start your app by running npm run start, without the need of running a build first. On the other hand, Next JS doesn't seem to behave in the same way (but I could have done something wrong with the setup).
I tried running a new Next app using npm run start, as it's a default script in package.json, but it didn't work. It shows this error: *Error: Could not find a production build*
Instead, running npm run dev created a .next folder, and started the server on port 3000 with no issues.
Can anyone help me understand how this works?
TL;DR: In Next.js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.
Development
When running the Next.js app in development, you'll want to use next dev:
next dev starts the application in development mode with hot-code
reloading, error reporting, and more.
Production
When building the Next.js app for production, you'll want to use next build:
next build creates an optimized production build of your
application. The output displays information about each route.
Size – The number of assets downloaded when navigating to the page
client-side. The size for each route only includes its dependencies.
First Load JS – The number of assets downloaded when visiting the page
from the server. The amount of JS shared by all is shown as a separate
metric.
Followed by either next start, when you want to start the production server:
next start starts the application in production mode. The
application should be compiled with next build first.
Or next export, when exporting the app as static HTML:
next export allows you to export your app to static HTML, which can be
run standalone without the need of a Node.js server.
For more information refer to Next.js CLI docs.
Normally this depend on what is written in your package.json file. For example, in my case, within this file I got:
"scripts": {
"watch": "webpack --watch --watch-poll --progress --color",
"prod": "webpack -p",
"watch2": "webpack --watch --watch-poll --progress --color",
"build": "webpack --config=webpack.prod.config.js --progress --watch-poll -p"
},
so, if I run
npm run watch
I'll be compiling for development and it will be executed:
webpack --watch --watch-poll --progress --color
However, if I run
npm run build
it will be executed:
webpack --config=webpack.prod.config.js --progress --watch-poll -p
and it will compile for production.
I appreciate all of your help. I like how create-react-app allows you to run NPM RUN BUILD and then upload the "Build" folder to your FTP directory.
How is this possible with NextJS? I built my app and ran NPM RUN BUILD, but do not see a Build folder. I am using server-side rendering with getServerSideProps, so is there a web page that explains this? I read the Deployment web page on NextJS.org, but I do not want to use their servers.
Thank you again for your help.
Bruce
You need to setup a custom Node.js server if you don't want to use Vercel. Your package.json should contain these scripts:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}
From the docs:
next build builds the production application in the .next folder. After building, next start starts a Node.js server that supports hybrid pages, serving both statically generated and server-side rendered pages.
As you can see, you get .next instead of a build folder.
I've been trying to get up a react and django application. First, I had followed this set of videos here: https://www.youtube.com/watch?v=6c2NqDyxppU&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j&index=3. There was a bunch of commands that you can see in the description that needed to be run in as well as a lot of copy pasting configuration files.
Later, my friend told me that create-react-app existed and would set up everything needed with just one command. I tried it, and it worked really well. However, there were issues with connecting it to django. The files that came out of create-react-app were different to the ones shown in the video and when I tried searching it up, a few solutions said to use npm run build and pass the build folder into django.
Running a build takes quite a long time and it is not automatic as it was when I had the webpack and babel system. What am I supposed to do to configure create-react-app so that I can get it to update automatically and get it into django.
Some places said that I could edit the config files when I do npm run eject. There is a problem that the package.json files in the tutorial project and the create-react-app project are not the same. The thing that lets the webpack and babel project update is this snippet of code in the package.json file:
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
I ejected my create-react-app project but create-react-app doesn't use webpack so I won't be able to use this. What do I do?
To build an ExtJS application using sencha cmd I used the command below
sencha app build
But how I can build using open tooling? The docs is not clean about build application with open tooling.
npm run build should do the job
Check your package.json, you normally have a script section
You could build the app using the commands
npm run build:desktop
npm run build:phone
The above commands used based on the package.json file script section.Below is the snippet of code of script section of package.json file.
"scripts": {
"start": "npm run dev:desktop",
"clean": "rimraf build",
"dev:desktop": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no",
"dev:phone": "webpack-dev-server --env.profile=phone --env.browser=yes --env.verbose=no",
"build:desktop": "npm run clean && cross-env webpack --env.profile=desktop --env.environment=production --env.treeshake=yes",
"build:phone": "npm run clean && cross-env webpack --env.profile=phone --env.environment=production --env.treeshake=yes"
}
We were suffering a lot and spent significant effort to find the tooling what suits our needs the best. Finally we ended up using webpack because there is a large ecosystem around that so it opened up endless possibilities.
Although sencha did some webpack plugins but they are mostly just watching changes. Therefore we have created a webpack loader what is resolving ext's dependencies. This webpack loader will allow to use webpack to build your ext project. There is a small sample to help to configure it.
I looked around the internet for this and found this medium article using serve. The article directed modifying the packange.json file to this:
"scripts": {
"dev": "react-scripts
"start", "start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
},
Now this works in development. I get console logs saying Content is cached for offline use. And google Lighthouse gives me >90% on progessive web apps. The problem is, when I deploy to Heroku, during build it runs the npm run build specified in the package.json scripts. But on opening the app, I get 21% on performance, and 50% on progressive web apps in firehouse. Also, it says service worker not registered. Which means it is not serving from the build folder. As an extra, I ran npm build myself in development machine and deployed the project TOGETHER with the build folder, but still same result. Now I also came around this other articlesuggesting to use node.js server and change scripts in package.json to this:
start: "node server.js"
I no nothing about node.js, so I decided to consult here for better choices.
EDIT: If a server command is needed, like in the node.js in the second medium article, and in Garesh's php code below - if anyone could help with a similar code in python(django), it'd be nice
Found the answer to this in this comment online:
Before deploying the app go to:
Heroku dashboard > settings > buildpacks > add buildpacks and then add github.com/mars/create-react-app-b...
Or, in command line you can do
heroku buildpacks:set github.com/mars/create-react-app-b...
If you don't do this step, heroku will deploy the development build (which is slow) of your react app instead of the optimized production build.
Build you code with:
npm run build
Now Put this code in the index.php file:
<?php header( 'Location: /index.html' ) ; ?>
Now put this index.php file into your build folder.
Copy this build folder somewhere else.
Now configure your new folder with your heroku app.
then
git push heroku master