After done changes on local code, I pushed it on github and deploy on heroku I'm seeing still same results (react render old pages). Why it does happen? I have try to make new repo and recreate heroku app, and its keeping same. Is there any way to force clear cache on heroku?
Try to Reload page with
ctrl+shift+R
Or
Run your project in loca with npm run watchthne open new cmd and pushed your code
Related
I'm trying to create two applications(NodeJS backend and ReactJS Frontend) using a VPS server with Dokku (mini Heroku) configured.
Basically, that's what i did so far:
Created a folder for the project on my VPS server for my project
Entered inside the folder previously created
Executed the following command:
git clone:<project_url_backend>
Then I entered the backend's folder created by the git clone command and then executed:
dokku apps:create backend-proj
git remote add dokku dokku#<my_ip>:backend-proj
git push dokku master
Everything looks fine until here and when I open the link that dokku created for the backend, it opens fine and I can use the backend correctly.
So I repeated the process for the frontend.
Inside the project's folder, i run:
git clone:<project_url_frontend>
I entered on the subfolder created by git and then run:
dokku apps:create frontend-proj
git remote add dokku dokku#<my_ip>:frontend-proj
git push dokku master
It builds fine, but when I open the created link for the frontend project, it opens the backend, not the frontend.
Ps: I had issues with the react project(frontend), so I had to fix the Procfile, and run the frontend project by a server.js with express.js, serving the react application. I don't know whether this might have some influence on the process but I had to say anyway
The problem was that I needed to put express.js as one of the required dependencies inside the package.json file. Then I recreated the application on Dokku and then it worked fine
I push updates to Heroku
git push Heruko master
then go and run my app from the Heroku page and the changes are not showing in the running app.
If I run bash and look at the files on Heroku, the changes are in the files.
It shows "Everything is up-to-date" message and no code reflects.
I've tried restarting the app and the changes are still not reflected in the running app.
don't forget to build your front and copy that folder to the public folder on the backend... it's happen to me ;)
check the git log to check the date and the name of the commit you are uploading.
if the commit is right, try deleting the existing app on heroku and upload again
Check in your package.json, the start script is pointing to your server.js file
I currently a web app involving a Vue.js frontend with a Flask backend acting as a REST API. They are divided into the client and server folders in my repo, respectively. I am looking to deploy it to Heroku via the Github deployment feature but am running into some errors and questions I need clarified.
All code can be found in this Github Repo: https://github.com/justintranjt/thrive-test
In development, I have been running the application like so:
In one terminal run thriveApp.py. In another terminal run npm run dev. Navigate to localhost:8080 which is the local server running
the Vue.js application.
Is this how the application will be run on Heroku? Or is the Vue application run using npm run build? In that case I would have to take the produced build folder and serve it in the Flask application, correct?
In addition, some of my links between the frontend and backend specify localhost:8080 and localhost:5000 (8080 is Vue and 5000 is Flask) which work locally. But will this work when deployed to Heroku?
<b-form>
<b-button variant="primary" href="http://localhost:5000/loginPage">Login via CAS</b-button>
</b-form>
As you can see here, I have a button in my Vue application that links to a login page routed by my Flask application. Will I have to change the portion of the URL that says localhost:5000 when running on Heroku?
Finally, When I currently try to build the application on Heroku only the Python portion of the code is recognized as modules from the Vue app specified by package.json are not installed while plugins for Python specified by requirements.txt ARE installed by Heroku.
I have a feeling all of these questions are generally related to each other. Any other advice or tips regarding Heroku deployment would also be helpful as I'm quite confused about deployment at the moment.
Is this how the application will be run on Heroku?
No! npm run dev spins up an entire development server with vue in dev mode and hot reloading. That's a lot of overhead, especially when it comes to file sizes.
Or is the Vue application run using npm run build?
Kind of. Vue doesn't need to run on your server at all, it's all client-side. npm run build bundles and minifies your files to a dist folder, you'll be left with only html, css and javascript - this is all of the frontend code that needs to be on your production environment - no need to deploy any of the source files. All you need to do is serve those static files from any server. This could be done by your flask, or just any apache, nginx etc.
But will this work when deployed to Heroku?
That will be very tricky to setup. It's one of the reasons why I would not deploy front- and backend on the same (virtual) server.
modules from the Vue app specified by package.json are not installed
If you deploy your bundled frontend instead of the source code this wont be an issue anymore. I still recommend serving the frontend from a different environment.
I have an application using Node.js with Aurelia on the front-end, which I want to deploy on Heroku.
To run the app locally, I need to execute following commands:
1. npm start
2. cd public > gulp watch
After installing heroku-cli, tried publishing it using git push heroku master.
The problem is, Heroku only runs npm start when it's deploying the app on cloud. So it is able to start the server.
However, it doesn't know anything about cd public and gulp watch.
My question is, how can I tell Heroku to change directory to public and execute gulp watch command, once it has started the server?
Edit:
I forgot to address an important point. Since you only mentioned Aurelia in your question, I (wrongly) assumed that that's all you had.
Ultimately, for a production app you'll want to have a proper webserver hosting your Aurelia app.
Example:
For Aurelia apps I've built, I typically have 3 distinct processes running, each with their own port (or hostname):
IdentityServer
ASP.NET Web Api
OWIN FileServer
The third one is what hosts my Aurelia app as a static bundle.
There is no gulp or anything like that involved here. The server doesn't even have npm installed and sees it just like any other server-side application. And that's exactly how I deploy it; no node-related commands needed.
If you're using nodejs for your server-side stuff, use http-server to serve the static bundle.
When you host your aurelia app within your own serverside application you get the added benefit of being able to send some bootstrapping configuration directly along with the bundle, so you don't have to hard-code urls and such.
That's what I implied with "don't host a static site on heroku": bundle it up, and let your web application host it. My original answer would only apply if there is no server-side stuff involved.
Original answer:
It's generally not recommended to host static sites on heroku, see this blog post. The bottom line is that Aurelia sites are static, and a static site doesn't need an app server. It's unnecessarily expensive and doesn't have as good distribution as most CDNs do.
With that said, if you insist on hosting a static Aurelia site on Heroku then your best bet is to combine all your script calls into a single call which, as you say, already runs. So make your npm start script call gulp watch.
You'd probably want to npm install your dependencies and call ../node_modules/.bin/gulp watch instead of calling gulp globally.
When it comes to Heroku however, gulp watch in itself probably won't work because that will start a development server which will have no port binding in Heroku. It will run, but it won't be accessible from the outside.
gulp watch is not something you want to run on a server anyway because it will watch for file changes (which never happen there) and run things like browsersync which will be useless. Just bundle your app and start a normal http-server or better yet, upload the bundle ready-to-start into the correct folder and you're done.
You want to build your app and then deploy as if it were a fully-compiled, static application. With Aurelia CLI, that would be au build --env prod and then copy the scripts folder, index.html, and any dependencies like css, fonts, etc. to a separate folder. gulp build works the same way.
From there, you will publish the compiled app to Heroku as shown in this medium.com article:
https://medium.com/#winnieliang/how-to-run-a-simple-html-css-javascript-application-on-heroku-4e664c541b0b
The main part of the article is below, but here is the kicker - you are "tricking" heroku into thinking it is a PHP app. Serious!
Head to root directory of the repo that contains index.html which dictates the main HTML page.
Run touch composer.json to create a file called composer.json.
Add the following line: {} inside.
Run touch index.php to create a file called index.php.
Add the line: <?php include_once("index.html"); ?> inside.
Now update the repo on Github if it’s connected to your account or Heroku command git push heroku master . Wait for the automatic deploy to work its magic and tada!
There are some other steps to make your compiled app into a repo (ie, git init) but this should work for you. It did for me.
I have a great working website built with MEAN and works great locally.
i wish to deploy it on my server,
but i never deployed a website
other than uploading the files to my website ftp.
Tutorials anyone?
Another good starting point would be Digital Ocean, they offer a one click install MEAN stack, with tutorials. https://www.digitalocean.com/community/tutorials/how-to-use-the-mean-one-click-install-image
I have just deployed my MEAN Stack application on Heroku cloud application environment. The deployment steps are easy.
Steps to deploy:
Your mean stack project structure should be like this. This is very important step. The bottonline is your package.json and server.js should be under your root directory. Have a look at the link to know more about the structure.
Clone your remote repository locally i.e. git clone https://github.com/heroku/node-js-getting-started.git
Go inside the cloned repository e.g. cd node-js-getting-started
Run git add .
Run git commit -m "Sample"
Run Heroku login (It will ask you to press any key and then open up the browser and ask you to click login. After logged in closed the browser instance.
Run heroku create myApp --buildpack heroku/nodejs. Note: Buildpacks are responsible for transforming deployed code into a slug, which can then be executed on a dyno. More information
Run git push heroku master. Your deplyment will start.
Once deployment is done, you will see the complete deployment logs on command prompt terminal
The application is now deployed. Ensure that at least one instance of the app is running: heroku ps:scale web=1
Run heroku open. It will run your deployed instance.
Run heroku logs to view information about your running app. More information
You can find more details visiting following links:
https://devcenter.heroku.com/articles/getting-started-with-nodejs#prepare-the-app
https://devcenter.heroku.com/articles/deploying-nodejs
Start from here...
https://github.com/linnovate/mean#hosting-mean
What operating system do you plan to host it on?