so Ive finished my first app and I want to deploy it to Heroku, but I keep getting error No default language could be detected for this app. Ive read that you need to have package.json in your root directory. My directory looks like this
AppFolder
client -> package.json + /public + /build folder + /src -> all react components
server -> package.json + app.js(main file) + .env + db.js (database pool) + /routes folder
Is there a way how to keep this file structure and still deploy it succesfully?
Should I commit /build folder to github as well? (Its in .gitignore originally) and its created in /client folder, however in some guide I was trying to follow they moved it to /server folder. Id like to use continious deployment as I still need to test responsivnes + finish some details.
Also Im using MySQL, will I be able to host my database on Heroku as well?
All right Ive figured out how to overcome this issue with folder structure. On Heroku go to Resources -> Add Buildpack -> And you want to add a gitpack from github named subdir-heroku-buildpack, author is
timanovsky
HERE. Ive came around this information in this video: VIDEO.
Or there is a way using git subtree, but for beginners as I am I find the first method more easier.
Also for the front-end part and MySQL Database, both that I successfully deployed using Heroku (Database) and Netlify (React app) Ive used this video: VIDEO2. It shows how to upload your back-end to Heroku as well, but with the traditional heroku-way folder structure.
Related
I'm running a MEAN stack webapp on Heroku. I have two folders at root level, "frontend" and "backend". Each folder has their own package.json. I have built the Angular app and put it in the "backend/public" folder. I can serve the Angular app from Express and deploy it to Heroku, no problem.
And here is my doubt: the Angular code in the frontend folder has its own dependencies, but when I build the app, run it on Express, or deploy it to Heroku, is it still using those dependencies from the node_modules folder in the frontend folder? Or are these dependencies somehow injected into the built Angular app's minimized code sent to the backend/public folder, for example?
I'm having trouble finding any info on this specific doubt.
I would like to deploy my angular application with nodejs, mongo, express js on my own server.
My way is:
-> ng build --prod (output is dist folder)
-> ng serve on dist folder
Start backend:
-> node server js file
But I think, it is not correct way od production stage. Added http server on express, there I create another index html view file with hbs, and there I use:
<body>
<my-app>Loading ...</my-app>
<script src="/dist/bundle.js"></script>
</body>
But on dist server, there is multiple js files.
How can I create using ng option (no webpack or must be f.e. webpack?) my angular/mongo/node/express application (in 1, my own server, no aws, heroku, github etc). There is any correct way to do it?
I've been able to deploy an angular app using Caddy Server as the webserver.
Create a build of your Angular code by doing ng build --prod-true.
This creates a set of bundled Js and Html files in the dist
directory.
Copy these files to where you want to run the app.
Next go to the Caddy website and download the version of Caddy for
your os. You can choose all kinds of features but for my deployment
inside a firewall a plain build worked fine.
Drop the caddy file in the directory that you put your compiled
angular code.
Create a caddyfile (just a file named caddyfile), add localhost:(your
favorite port number).
Run caddy and it will automatically serve your app by launching
index.html. You can view your app at localhost:port.
No messy node installation. Caddy has all sorts of add-ons to deal with more complicated scenarios but the deployment is caddy.exe, caddyfile and your built code.
Goal: I have created the start of a React project and wish to test it on my server (hosted by goDaddy, uploading via cPanel). My app works fine in Development Mode.
Question: I have ran npm build which has created a build folder, but what files am I supposed to upload to my server? I tried putting the entire contents of the build folder on, but it still says the site is not launched. Is this because there is no index.html file generated? Currently my build folder contains: assets.json, LICENSE.txt, package.json, server.js, yarn.lock, chunks/ and public/. Is there supposed to be an html file generated? Or should these files be sufficient to deploy the website given that it works in development mode?
Thanks for bearing with me, this is the first time I have tried to deploy a React App and likely have several fundamental misunderstandings of how it works. Also if anyone is willing to chat for several minutes so I can ask a few questions about my project and react let me know - much appreciated!
Hello
Dear,
If you can try to change your package.json file and add ("homepage": "http://yourDomain/",) like this
"version": "0.1.0",
"homepage": "yourDominUrl",
Like
"homepage": "http://yourDomain/",
and
build again
npm run build
and the build folder is only should be uploaded file
Your answer is much more simple than appears: Just run npm run build, then just upload that whole folder to your GODADDY server. Importantly, you must place your index.html (or app-name.html) directly on the / public path defined by your URL's DNS. So, Top-level has your single entry point index.html that points to folder build/ to get your xyx.main.js and the xyz.main.css ...
and that's it! easy as pie
I have two repos:
A Vue client interface;
A NodeJS socket and web server.
I need to serve the built files of the Vue interface with the server and don't know how to proceed...
I have two ideas of how to solve this:
Create a script that would clone the Vue repo, build it and move the
builded files in a folder server by the server.
Declare the Vue repo as a dependency of the server and find a way to
build and access to the dependency files.
The second one seems cleaner but I don't know how to begin approaching this. Could someone please provide some thoughts on the better approach and how I might get started?
You've tagged git so I'm going to say use approach 2 but use git sub-modules. You could create some sort of webpack task to build your Vuejs project within the Vuejs repository. Then you can submodule your vuejs repository to the web server / socket project.
You can then use some sort of gulp or webpack script to call into the vuejs project to instruct it to build. Once that is built you can use the express.static function to serve up the build from your web server on whatever route you want (probably just the / route).
With submodules you can simply bump the submodule when you're ready to do a new release of the frontend and then re-deploy the web server with the new version of the dependency. This is how the Ghost project do their frontend deployments.
Git Submodules documentation - https://git-scm.com/book/en/v2/Git-Tools-Submodules.
Here's how I do it with Express:
const express = require("express"),
path = require("path"),
app = express()
const DIST_DIR = path.normalize(__dirname + "/../../VueOutputDir")
app.use(express.static(DIST_DIR))
This will automatically serve the index.html and the assets from the VueOutputDir directory.
I'm currently trying to deploy a hapi.js app to heroku with this file structure:
.git
client
server
The hapi.js server is inside the server folder along with it's package.json file, node_modules and all that stuff.
Inside the client folder, I have all the front-end related things (small angular app with bower_components and a gulp script to inject everything). The server.js from /server is serving both the bower_components and the angular app related files.
My current problem is that, obviously, Heroku doesn't find a way to deploy my app because of its structure, since it needs to have the server and package.json on the root of the project (which i'm trying to avoid at all costs).
So far I tried to put on my Procfile the following:
web: node server/server.js
but unfortunately it didn't let me push because it didn't match any of its buildpacks.
Have you add .bowerrc file
.bowerrc file contains
{
"directory": "client/bower_components"
}
and add bower.json in root.