I was trying to deploy the simplest project on Google Cloud platform. The quickstart project can be found here. Locally it works without issues.
However it gets more complicated to get it working on Google Cloud. I know there are a lot of other providers like Heroku with 1-click deployment, but I found it weird that it's not so easy to do it with Google service.
App.yaml
runtime: nodejs
env: flex
Package.json - as provided in quickstart project here
The first error I get while deploying (gclould app deploy):
angular-quickstart#1.0.0 start /app
tsc && concurrently "tsc -w" "lite-server"
sh: 1: tsc: not found
Then I add to package.json:
"preinstall": "npm install tsc",
The second error:
tsc && concurrently "tsc -w" "lite-server"
error TS5023: Unknown compiler option 'moduleResolution'.
error TS5023: Unknown compiler option 'lib'.
Here I am lost.
Of course I'm using location that supports flex.
Any ideas if I'm digging the problem in right way or I should just recreate my project using simple tutorial found at codelabs.developers.google.com/codelabs/cloud-cardboard-viewer/
You can use the flex environment if you have any server side code e.g you have written specific server logic to CURD objects. For client side code you will be better off deploying static files into google storage
Related
I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch
Backstory: I was originally going to switch to parcel v2, ran into a lot of issues, and really starting to dislike parcel. I managed to resolve some issues even though their error messages are very unintuitive. Got to a point that "parcel build" is working but "parcel serve" just doesn't, and can't find an answer online. At that point, I decided to switch to Create React App because it's more "industry" standard. (Thank you for listening to me rant.)
When I was using parcel v1, my setup for the dev environment is running "parcel index.html" (which has hot module replacement), and I'm serving the static files in my backend.
But I don't know how to do that with create-react-script. "react-scripts start" doesn't build to the "build" folder, "react-scripts build" only build once and no reload. I still want to serve the static file. What should I do?
If you're just doing this for development purposes, you could use a proxy from your backend server, pointing to the server run by the Create React App.
For example, with Fastify, you can serve your React app on 1234, and proxy to that from your server, with something like fastify-http-proxy:
const proxy = require('fastify-http-proxy');
// Normal routes here
fastify.register(proxy, { upstream: 'http://localhost:1234' });
fastify.listen(process.env.PORT, '0.0.0.0');
I'm using react-app-rewired & customize-cra to setup a multi-project monorepo with shared TypeScript code, without ejecting from create-react-app (the setup is described in this answer). The layout is like:
/my-project
|--- /frontend <-Contains the create-react-app
|--- /shared <-Contains some typescript source, used by the CRA
...
It works great locally. The only thing I'm unable to figure out is how to get it deployed to Heroku:
If I use Git to just push the 'frontend' subdirectory (git subtree push --prefix frontend heroku master), the Heroku build of course fails, because it cannot find the source files in /shared - those weren't even pushed to the server.
I tried using the monorepo buildpack as described here, but the result was the same. Build failed, couldn't find source files in /shared.
I've tried the "hacky" solution in the comment here: setting "postinstall": "npm install --prefix frontend in package.json. Although it seemed to build, accessing https://myap123.herokuapp.com and https://myap123.herokuapp.com/frontend yield 404.
I also tried the solution in the comment here: putting release: cd frontend && npm install && npm run build in the procfile. Same behavior: it seems to build, but is not accessible from the browser (404).
While there are many resources about deploying projects from a monorepo, and many others about sharing code between React & Node projects, I've been unable to find anything that actually works for both: share code, and deploy the projects that reference that code to Heroku. At this point, I'm just focused on trying to deploy the frontend.
Any help would be greatly appreciated.
The simple answer (from this thread) is that Heroku provides no proper way to run in a subdirectory. Any solution will be a hack, and those will vary depending on your project layout.
In my case, I got it working by putting a package.json in the root of the repo with:
{
"scripts": {
"postinstall": "npm install --prefix backend && npm run build --prefix backend",
"start": "node backend/dist/app.js"
}
}
This did not require a procfile. If it's a typescript project, make sure the backend's package.json's script tag has "build": "tsc".
For the frontend, I gave up on Heroku. Instead, I just deployed the frontend to Netlify, which lets you easily deploy from a (pre-built) subdir. So between using Netlify for frontend & the above hack for backend, I have a hacked-together working stack, until Heroku hopefully gets around to properly letting you specify a subdirectory from which to run (they claim they've been waiting for NPM Workspaces, which was completed as of NPM 7).
create-react-app and npm noob here, and I'm having some trouble with deploying to production. When I start my app, I want to start a specific js file, as well as run the normal react-scripts start. So in my package.json, I have the following.
"scripts": {
"start": "node -r esm src/server.js & react-scripts start",
...
}
When I run npm start, it works great, both scripts are executed locally and up and running.
My cursory reading seems to indicate that npm start is just for development though. In production, the build/ folder will be used and... I can't figure out how it's run. Testing locally, after running npm run build, the build/ folder is made. And then running serve -s build, something is executed, but it's not my npm start script. It looks like it's just react-scripts start. Attempting to deploy to several real-life production servers like Firebase and Netlify behaves the same way.
So how exactly is the production build started? And how can I configure it to behave like my development build.
I feel like I must be misunderstanding something fundamental as I can't find any explanation online, but any help would be appreciated.
If you're interested in why exactly I have this strange setup, I'm attempting to deploy boardgame.io with a multiplayer server.
The reason to use npm start is so that you can fire up a local web server on the fly and paired with nodemon and other goodies, changes to the source can easily be viewed as if it were in production.
npm build transpiles the source into a lightweight, lazy loading bundle suitable for production. Once the build is complete, you use a web server to host build/index.html and access the site from there. What you use to host it is up to you (most commonly nginx but you could use something like apache or node like you're alluding to with serve -s build).
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.