Deploying react app in google cloud - javascript

I have a react project code. I want to deploy it on google cloud. I have a build directory in my project which has builds. Here is my project structure.
How can I deploy it on google cloud. Can someone please guide me. What all files from my project will I have to put there. I am very new to deploying apps online.
Will I need to just put the build folder or will I need to upload complete project there?

React apps are single page applications. Single page applications (SPA) can be hosted as a static website on google cloud storage. Here is the link for hosting a static website on GCP. Similarly, If you want to host reactJS app on AWS S3, here are the steps.
Host the index.html in the root folder of your bucket. Store your bundled react app.js file to sub folders and specify the path in index.html. You can also store other public assets in sub-folder hierarchy.

Related

Where to put builded nodejs application on my apache2 server

I am building project which I want to deploy on my own static ip server (apache2). I am using postgresql database and python api (want to use it just as API not frontend), currently I am making frontend where I need to use node packages because I need to download and install OpenLayers for usage with OSM maps, when I build nodejs project I get dist/ directory which I need to put to production. I would like to know if it means that I can just put it to /var/www/html directory and if no please where should put it? Or please some explanation how it works :) Thank you very much.
Putting the /dist directory in the /var/www/html directory is fine if it's a static build of the project, but it's recommended that you setup a virtual host so you can configure different sites served by a single Apache instance (e.g. you can run different projects on different sub-domains).
See this guide on setting up a virtual host on Ubuntu.

Deploy React/Webpack static directory on different server from index.html

I'd like to deploy a React app built with create-react-app within my company's CMS. I can't host assets on the CMS, just the script tag, css tag and root DIV. I've deployed the static assets to S3 and pointed my publicPath to AWS, but in my CSS the components are not rendered. I'm new to webpack configuration and unsure where to turn.
There are only two ways where to build assets for deploy:
build assets on local machine and deploy static files
deploy sources to server and perform assets building there
There are some differences. For example first way may require more data to transfer, and second way requires more complicated configuration on server. Server must have possibility to execute different tools including webpack and have enough place for node modules.

Context root for hyperlinks on a deployed bluemix app

I have multiple screens (i.e. pages) in a python buildpack - watson service app. I am trying to create a simple hyperlink to another screen. Bluemix deployment starts the app at designer-index.html.
appfile structure
I am using this source for a hyperlink in the app:
xxxxx-xxxxx.mybluemix.net/templates/vehicle-selector.html
Currently I get a 404 - The requested URL was not found on the server.
Am I missing the mark with context root?
Files in the templates directory are usually rendered
#app.route('/vehicle')
def showVehicle():
return render_template('vehicle-selector.html')
Static files go in the static directory

Build SAPUI5 App with Grunt/Gulp and deploy form Eclipse with ABAP Team Provider

I am trying to optimize an existing UI5 application which resides in SAP BW as BSP Application and runs from SAP Portal (You press on the link and the UI5 application opens in a new Tab).
My main concern is with the amount of calls between Client and Back-end system. Especially calling all the library.css/library-preload.js/etc files AND custem controller.js and view.js files.
I found possible solutions involving grunt/gulp or deploying from SAP WebIDE. I trying building and deploying the App with SAP WebIDE, but after opening the App, Network still shows a lot of traffic + there is no Component-preload.js call. I'm guessing it has something to do with where the app is launched or I still have some configuring to do on the back-end?
I would like to build my App with either grunt/gulp since I can involve other plugins like lints, compression (for js, html, css), test, and many more. The problem is that the App resides not in OS, but somewhere in DB.
So I want to build my App with all those Grunt/Gulp tasks and deploy to ABAP AS (in BW as BSP application) using ABAP Team Provider and ensure that when I call the app from Portal, the files will be compressed/minified and, what is more important, that all the relevant .js files will be loaded as a single request.
Is what I imagine even possible? And if yes, then what are the steps required to accomplish this?
NOTE: I checked SCN and unfortunately I can't use your typical npm grunt or grunt-openui5 etc since the App resides somewhere in the DB :/
If you have a build configuration inside your WebIDE project, WebIDE will reate a DIST folder containing the distribution package.
Inside DIST there is an autogenerated Component-preload.js

Problems with public directory when deploying Node.js app with Heroku

I've been working on an app which will feature a Timelinejs (open source js library) element on the client side. I copied the Timelinejs library into my public/javascripts/ directory of my app. Then I linked it in my html header. When I serve my app up locally everything works fine with the timeline. However, I noticed that when I deployed my app to Heroku it wasn't loading my timeline. Using chrome js console I discovered that it didn't find my files in the public/Javascripts/Timelinejs folder. Using the Heroku run bash command I discovered that none of my Timelinejs files were present in the file structure, although an empty Timelinejs directory was present. Is there any command or configuration I need to specify to get these files to my Heroku deployment?
Heroku has a readonly file system. The directory where you can write are ./tmp or ./log. You can't write inside the public folder.
That's because of how they manage their dynos and the way to scale them. If you want to store something, use the ./tmp or, recommended, a s3 bucket. (as I presume 'tmp' stands for 'temporary' :D)
More info here: https://devcenter.heroku.com/articles/read-only-filesystem

Categories

Resources