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.
Is it safe to have express server code and API keys in CRA project root directory and serve the build folder statically?
During the build process, does CRA copy or include content from any other files or directories except /public and src ? For example, in this process:
> npx create-react-app react-app
> cd react-app
> npm install
> npm install express
And then create react-app/server.js and react-app/config.js - and include API keys in config.js , server.js will serve frontend static files from the react-app/build/ directory.
Will any content from react-app/config.js be included in react-app/build/ directory after the build process? How safe it is to have server code and API secrets (.gitignored ofcourse) in a CRA project's root directory?
In general, it's not safe to store anything vulnerable on the frontend side, all secret information should remain on the dedicated backend or env-variables stored in CI/CD and inject during deployment to your variables/placeholders.
If you are able to hide your backend from publicity - you are on a good track.
I have a simple nodejs web application.But the App.js file is in another directory!
So how do i specify the changed directory like CD the folder name and run the app in the heroku procfile?!
write this line
web: node [The directory path to app.js]
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.
I'm reasonably new to node, git, github and Heroku and I'm struggling to work out the best way of sending my application to Heroku without cluttering up the repo with my compiled, minified app and without doing too much in Heroku.
My node.js project looks a bit like this:
- client
... code
- server
... code
- node_modules
- package.json
- gulpfile.js
- dist
- client
- server
Everything apart from node_modules and dist goes into github.
The gulpfile compiles, minifies and concatenates everything ready for release in dist.
How do I push just the dist folder to Heroku, without also putting it into github? What is best practice? I'd rather not send my gulpfile to Heroku as it means moving the devDependencies in package.json and using a post update script, as it ties the project to Heroku more than I'd like.
Reasons for not using post hook are summed up well in these two posts: https://stackoverflow.com/a/15050864/344022 & https://stackoverflow.com/a/21056644/344022, unfortunately they don't provide an easy to understand alternative.
Heroku now has a static buildpack in development to handle this (see https://github.com/heroku/heroku-buildpack-static)
Create a static.json file to use the files from dist/ with .html suffix and to re-route all calls back to the SPA
{
"root": "dist/",
"clean_urls": true,
"routes": {
"/**": "index.html"
}
}
Extend package.json scripts to ensure dist/ directory is built, for example
"scripts": {
...
"heroku-postbuild": "gulp"
}
So that dev dependencies from package.json get installed
heroku config:set NPM_CONFIG_PRODUCTION=false --app
Multiple build packs so you can build and deploy
heroku buildpacks:add heroku/nodejs --app <app_name>
heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static.git --app <app_name>
Your procfile can be empty in this case.
I had the same problem of pushing only the dist folder to heroku app, Right now I am using a different approach, not sure the idle one, but it works for me. I created a deploy file and added the below code
import {spawnSync} from 'child_process';
function deploy(){
options = {
cwd: path.resolve(__dirname, './dist')
};
//push dist folder to deploy repo
console.log('Initialising Repository');
spawnSync('git',['init'],options);
console.log('Adding remote url');
spawnSync('git',['remote','add', remote.name, remote.gitPath],options)
console.log('Add all files');
spawnSync('git',['add','.','--all'],options)
console.log(`Commit with v${version}`);
spawnSync('git', ['commit','-m',`v${version}`], options)
console.log('Push the changes to repo');
spawnSync('git', ['push', '-f', remote.name, 'master'],options)
}
kept repo iformation in package.json and read here, I am running this after a webpack build task. So this will push my new build to heroku. Even if the .git inside dist gets deleted it will take care of it.
Go on, set up a post hook on heroku which builds you app and copies the files to where they'll be served. This is fairly normal practice, and once it's set up all you need to do is a git push to deploy your app, which is really rather handy. The alternative is to have a separate repository which you manually copy the files to and push from, but that doesn't seem as slick to me, greater chance of human error by messing up the dependencies, or forgetting to delete generated files which are no longer needed etc.