Deploying phoenix framework on heroku with webpack - heroku

I followed the docs in the official website. The problem is I use webpack as my bundler instead of brunch. The deployment is successful. I can even access the api routes. My only problem is the assets (js,css) in the homepage is not found. Locally, I can access the home page successfully when I run mix phoenix.server.
I tried peeking at the priv/static folder in heroku (using heroku run bash) where the files are moved after being compiled and saw the asset files there. Did I miss anything? or a configuration that I should put?
Here is the remote deploy output
http://pastebin.com/1mL1YWTS
Here is my custom compile file (to override phoenix-static buldpack)
http://pastebin.com/BGHf9xBK
Here is my webpack.config.js
http://pastebin.com/Xv2E1yCE

I have used webpack with the following compile:
./node_modules/.bin/webpack -p
mix phoenix.digest
You need to call mix phoenix.digest to generate a manifest that can be used in the static path helpers. http://hexdocs.pm/phoenix/Mix.Tasks.Phoenix.Digest.html#run/1

Related

Cannot load images once symfony project is deployed on production server

I'm actually working on the server migration of a Symfony project. I'm new to Symfony so i'm discovering how a Symfony project works at the same time.
The projet use Symfony 4.
I'm stuck at the point where the deployment on the production server works but once on the website side, images and .css files cannot be loaded.
I get the following error in the console : console error
When I look at the path where images are loaded I get http://domainname/builg/images/imagename.jpg
I have check and the images are well located in the folder public/build/images in the server.
I've tried accessing the images directly by doing a GET request on the search bar but I can't have access whether it is by asking http://domainname/build or http://domainname/public/images
As the project is actually perfectly running on another server and locally on my computer I don't think the issue come from twig or the webpack encore.
I can't see what I've done wrong.
Maybe have I missed something in the configuration phase ? Should I update some path ?
Thanks in advance,
I assume you are using Symfony 6 or 5. Please follow these steps:
php bin/console cache:clear --env=prod
npm run build
OR
yarn run build
assets are auto symlink in latest symfony 5 or 6 version. If not then please run this command:
php bin/console assets:install --symlink
And try to access http://domainname/build/images/imagename.jpg . Make sure this url is correct with image name and path.

Deploying Strapi to Heroku

I've been following the official Strapi tutorials on how to develop and deploy an application to Heroku and it seems you have to configure some files like ./config/environments/**/database.json.
The problem is that, installing the app without --quickstart (yarn create strapi-app my-project), my config folder just has a functions folder and database.js and server.js files.
Should I create manually this database.json or is this supposed to be created automatically when initializing the app without --quickstart?
I was also confused so I manually created the folders /environments/production and inside the file database.json and it worked for me.
Link to the docs: https://strapi.io/documentation/3.0.0-beta.x/deployment/heroku.html#_4-update-your-database-config-file

How to host a simple index.html with some javascript and css on Heroku?

I'm trying to deploy an application through Heroku which is just an index.html page with some javascript and css.
I've connected my Github repository to it as a deployment method, but it never seems to work.
Every time I type "heroku logs", it spits back out:
"npm ERR! missing script: start" first.
From what I've searched, it tells me that I need to add "start": "somefile.js" as a starting point in package.json, but this is a very simple index.html page with javascript invoked from whenever a couple buttons are pressed.
How am I meant to get past this?
Heroku isn't really built for hosting static websites that have no dynamic server backend. If you want to do that, you should look into using a proper static file host like Amazon S3, Netlify, etc.
However -- if you DO want to do this on Heroku, you can do so by creating a really simple application (here's an article which shows you how to do it using Ruby): https://devcenter.heroku.com/articles/static-sites-ruby
Agree with #rdegges, you need some sort of http server. A basic node http server is pretty trivial to implement as well.
A full tutorial is available, but the keys steps are:
Make sure you have [node, npm, heroku CLI] installed.
In the root of your project directory, run npm init - (this will create a package.json in your root project directory)
Run npm install --save express - (this will add express as a dependency to the package.json file)
Create a file named Procfile in the root directory.
(contents: web: npm app.js)
Create a file named app.js in the root directory. (contents below)
Commit your changes, push to Heroku - git push heroku master
That should do it. Make sure all your files are in a directory called public as specified in the app.js file or change that to reflect where they actually are.
app.js:
var express = require('express');
var app = express();
app.use('/', express.static('public'));
app.listen(process.env.PORT || 8080);
Full Tutorial: https://devcenter.heroku.com/articles/getting-started-with-nodejs#introduction

MobileWeb - do not minify

I am trying to export my project as a mobileweb app, but I do not want the code to minified as I need to run some tests on it.
I can't find a way to package the app without having it minified.
I have seen that if I run the app in the browser, it is not minified. However, I am not able to access the files in the file system as I have no idea to where http://127.0.0.1:8020/ points.
Does anyone knows how to export a mobileweb app without js minification?
You need to build your mobile web app from the command line using the following:
appc run -p mobileweb
or
ti build -p mobileweb
By default, the --deploy-type option will be set to development which will not minify the JS code.
At this point you can either set /path/to/your/project/build/mobileweb as your web root or copy the files in the build/mobileweb directory to your web server.
It appears mobileweb is not supported for the --skip-js-minify flag. It's only available for iOS and Android (CLI docs)
Example: titanium build -p ios --skip-js-minify
You can watch ticket TIMOB-14253 for updates.

gulp command in heroku procfile

I have a node.js/express app, I would like to run the command gulp build to generate my static assets when deploying with heroku, just before my node command lcm server, as I keep my public folder in my .gitignore file.
I'm having trouble finding how I can run this command during my heroku deployment.
So far my Procfile is:
web: lcm server
This doesn't seem to work -
gulp build
web: lcm server
Make a Procfile
Begin by making a blank file named Procfile and placing it within the root of your project. Procfile is short for “Process File” and used to explicitly declare what command should be executed to start your app. By default, a Procfile is not required, but it’s good form for Node-based projects to create one.
If a Procfile isn’t defined, then one will be created automatically using npm start as the web process type.
Possible solution
Try this one:
web: node node_modules/gulp/bin/gulp build
The line above lets us use the locally installed version of Gulp provided by Node’s Package Manager (NPM) instead of having to use a globally installed version.
Helpful resources
from https://www.sitepoint.com/deploying-heroku-using-gulp-node-git/

Resources