I have a node API and an angular front end project (via grunt, bower, yeoman flow structure) as two separate github repositories. I am trying to push them both to production through Heroku. Coming from a rails bg where everything in the app exists in the same project directory, and you only have to push one directory, how would you do this? Should I push both projects as separate heroku projects or is there a best practice out there? I'd appreciate any and all advice, thank you in advance.
Firstly, I would review the official Heroku doc on deploying nodejs apps
If you have two projects, you will probably want to deploy them as different heroku apps.
The key here is going to be making sure your package.json is set up correctly. Make sure all your dependencies are correct and present, and your package.json points to your node server script. Make sure you have your dev dependencies like grunt separate from your production dependencies also, as these don't need to be deployed to production. If this is just a demo app, you can have heroku install all your scripts (like angular) simply by including them in your package.json. When you push your app, it will run an npm install on your package.json and install it the dependencies.
There are a few ways you can deploy also - via the heroku cli, a github link, or a dropbox link. I haven't personally used the cli much, but I have found the other two convenient to use, especially if you are already pushing to github.
One key thing too is that if you need to install dependencies with bower, you should know that heroku DOES NOT run bower install on it's own. You can tell heroku to run it by adding the following to your package.json:
"scripts": {
"postinstall": "bower install"
}
This will cause it to run a bower install after npm install finishes.
Also, if you haven't done so already, you'll need to set up your database somewhere with a 3rd party provider (like mongolab or modulus).
Related
I'm developing a react-bootstrap website and I'm wondering if I should include the node_modules folder when i will publish the site on a web hosting platform, or there is another way?
I never published before a website with a lot of dependencies
usually it's bad practice to upload node modules! there's no need to upload node_modules folder to server, you can install them using npm install or yarn install in case your are using yarn. it will create node_modules folder with all the dependencies which you have installed make sure your all dependencies are added in package.json
It depends on your approach , if you want to create simple SPA you could run "npm run build" which will give a build folder and once you uploaded those file on the server and point your requsts to index.html
You wont be needing node_modules , BUT having a differant approach , having SSR maybe then yes , you would need to start your project on the server which will need node_modules as well.
I have created my React project and pushed the complete repo to GitHub using Visual Studio Code. How can I make my React project live on server with the help of GitHub?
You need to install GitHub Pages package as a dev-dependency.
cd ./into/your-app-folder
npm install gh-pages --save-dev
Add properties to package.json file.
The first property you need to add at the top level homepage, second you must define this as a string and the value will be "https://{your-username}.github.io/{repo-name}" , {repo-name} is the name of the GitHub repository you created it will look like this :
"homepage": "http://joedoe.github.io/his-app"
Second in the existing scripts property you need to add predeploy and deploy.
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
If you pushed everything already to Github, the last step is deploying.
One liner:
npm run deploy
With this Github will create a new branch called gh-pages, and will be available online. Hope I could help and will work accordingly.
If you stuck, you can look it up on the official docs of React.
Deployment Documentation of React
Once on a deployment I had some issues with the official documentation, and I had to delete my username from the "homepage" property in order to make it work. Although I suggest you first do by the docs, and if you encounter problems, you might can give a try.
There are several options. Depends on what you want to do, do you want to deploy for production or just to test your development ?
You have several options to deploy such as Heroku, Netlify, Github pages.
I can help you with the process of deploying, in addition you can have a look on the different documentations for the solutions listed above.
I personnaly suggest using Netlify, in my opinion realy easy to use.
Depends on what you want to achieve.
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).
I'm trying install a React module into my Symfony 4 project. I already have the React entry point setup and running with webpack encore, and now I want to add a module to the React app.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I have compared the webpack.config.js and it seems like the Symfony one can override the other one, since it already covers React entry point and babel setup. What do I do?
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
NPM supports installing dependencies directly from github (or other git host) https://docs.npmjs.com/cli/install so executing npm install github:<githubname>/<githubrepo>[#<commit-ish>] should work fine from the package.json directory.
The React module has a github and can be installed through npm, but how do I install it into Symfony? How do I deal with the webpack.config.js and package.json files in the package, since Symfony has its own for these files.
I'm not familiar with Symfony, does it manage your NPM dependencies after install? If so you will have to determine how to accomplish the npm install via Symfony.
Another problem I have is that the original module was outdated, so I forked the project to my repository, updated it and filed a pull request. But since the PR is still pending, I wanted to install my fork for now, what do I need to do?
As per above, just specify your git path until your PR is pulled, then update package.json to the original repo
Hi everyone I know its simple question but I am new the angular development.
I have angular projects but I cant run.
I know npm using on console, I tried many times npm run, npm instal on my main directory.
So, how can I run my angular project on the console?
If the project is using Angular Seed or is similarly configured, you can use
npm start
to install dependencies and start a running http-server on port 8080 (by default).
If you project has a README or package.json file, it might give more clues.
Otherwise you can just serve up the application with http-server:
npm install http-server
http-server .
Asume you are using NodeJS as a server side, try node [your-application-main-js-file.js]. For example node index.js. But it depends on what back end environment are you using. Angular is just a front end library/ framework. It should be tested on browser not in your console.