Angular and Go on heroku - angularjs

I am trying to put my app on Heroku. I am using angular on the front-end and Go on the backend.
I followed this tutorial http://mmcgrana.github.io/2012/09/getting-started-with-go-on-heroku.html
However, when I go to the domain of my heroku app, I get the directory of my app (everything in the git). When I navigate to the /app folder, (where my angular app lives) it shows the app.
I don't want my app to be at
foobar.herokuapp.com/app/#/
I want it to be at
foobar.herokuapp.com
A simplified version of my app directory is:
foobar
- /app
- /server/server.go
- .godir // contains "app"
- Procfile // contains "web: server"
I ran "go get" from inside my /server folder
These work:
$ PORT=5000 demoapp
$ curl -i http://127.0.0.1:5000/
Here is my simple server.go
package main
import (
"github.com/gorilla/handlers"
"log"
"net/http"
"os"
)
func main() {
log.Println("Starting Server")
http.Handle("/", logHandler(http.FileServer(http.Dir("../app/"))))
log.Println("Listening...")
panic(http.ListenAndServe(":"+os.Getenv("PORT"), nil))
}
func logHandler(h http.Handler) http.Handler {
return handlers.LoggingHandler(os.Stdout, h)
}

Changing your FileServer directory from "../app/" to "app/" (relative) or "/app/app/" (absolute) should solve the issue.
http.Handle("/", logHandler(http.FileServer(http.Dir("app/"))))
Your project root is the work folder when Heroku executes the Procfile command. It has the absolute path /app which is why ../app brings you back to your project root.
Although your server.go is stored in the ./server subfolder it is still compiled into the project root with package main.

Related

Google App Engine : import myfile gives 502 bad gateway

App runs fine with just the app.yaml, main.py and requiremets.txt (Flask)
I also have a mymodule.py file.
If, in main.py, I do
import mymodule
or
from mymodule import myfunc
I get the 502 Bad Gateway
runs fine locally though..
Please follow the official documentation on :
Specifying Private Dependencies
To use private dependencies:
1.Run pip install -t lib my_module to copy dependencies into a local
folder named lib.
2.Add an empty __init__.py file to the lib directory to make it a
module.
3.Import the module in your app. For example:
import lib.my_module

NUXTJS Static Hosting path

I created a small SPA Nuxt.js app and I’m having a hosting issue.
I’m trying to upload the app to a static hosting in bluehost. Under the domain name I created a sub-folder where I would like to run the app. (www.domain.com/myapp/)
I ran the command NUXT Generate to generate the static folder (Dist) - When I upload the content of the Dist folder to the folder myapp in the server and try to access it, it does not work.
I can access index.html but everything is broken. The reason is because it is looking for all the files in the domain’s root folder and not in the myapp folder.
I there a way I can tell the generate command to use the myapp folder path as its root folder?
Any help figuring this out would be greatly appreciated.
Thanks
CES
You have to set the base path for the router in your nuxt config file:
// nuxt.config.js
export default {
router: {
base: '/myapp/'
},
// ...
}
see nuxt documentation

React URLs are not Accessible

hi i've run following command pm2 start process.json on ec2 AWS.
Here is my process.json file
{
"script": "serve",
"env": {
"PM2_SERVE_PATH": './build',
"PM2_SERVE_PORT": 5000
}
}
When I run the pm2 command shown above. I can access the Base URL. But when I type the Sub URLs from browser, it shows a page that contains 404 |The requested path cannot be found.
Below is my file structure
I am generating the project using npm run build then pm2 start process.json
So the app starts up and you can access the root page? What about your routes? Are they set up properly? Are you using react-routing or something else?
This sounds like a routing issue. Does it only happen on the AWS platform?
Hi I found a solution to this problem.
When I use serve on pm2 it shows 404 page whenever it didn't find a url resource. To resolve that I used screen on ec2.
To open a new screen type screen
Then in your react folder type command serve -s build -p 5000 Now you can detach your screen using CTRL + D

How to use bunch in golang for Google App Engine or referencing Custom Dependancies

Currently I'm using the bunch to do npm style type builds as well as using symbolic links in my web project to be able to do builds without have to pull from a git repository.
For example my directory structure is like the following
testapp/
.vendor
-controllers
--user_controller.go
-routers
--router.go
-models
--user.go
server.go
Bunchfile
so inside the .vendor/src directory
I also have
.vendor/src/example.com/tgo/testapp/routers
So if i don't want to have to duplicate my folders in the .vendor directory I will use a symbolic link - this works great when I do
ln -s ~/Documents/dev/go/testapp/ ~/Documents/dev/go/testapp/.vendor/src/example.com/tgo/
bunch go build
However for Google App Engine - Trying to see if this will work, haven't been able to figure it out yet.
Here is the code for server.go
package main
import (
"example.com/tgo/testapp/routers"
"github.com/codegangsta/negroni"
"net/http"
"log"
)
func init(){
//For Google App Engine
//settings.Init()
router := routers.InitRoutes()
n := negroni.Classic()
n.UseHandler(router)
http.Handle("/", n)
}
func main() {
router := routers.InitRoutes()
n := negroni.Classic()
n.UseHandler(router)
log.Println("Listening......")
http.ListenAndServe(":3001", n)
}
I actually figured it out the issue has to do with Assigning $GOPATH before you run the upload to App Engine.
So I just have a script that sets the environment Variable $GOPATH to the .vendor directory then run goapp serve or goapp deploy and everything works!
Look forward to moving everything over to app engine!

How to upload a Google App Engine (Go) project in a different folder than the app.yaml

My project has the following structure:
| appengine
|---- app.yaml
|---- myScript.go
| bower_components
|----|...
| build
|----|images
|----|----|branding
|----|----|---- favicon.ico
|----|styles
|----|----|*.css
|----|index.html
| src
| ...
I would like to upload the entire content of the build folder when running goapp deploy appengine.
My app.yaml looks like this:
application: myProject
version: 0-1
runtime: go
api_version: go1
handlers:
- url: /(.*\.(gif|png|jpg|ico|js|css))
static_files: ../build/\1
upload: ../build/(.*\.(gif|png|jpg|ico|js|css))
- url: /.*
script: _go_app
and myScript.go looks like this:
package myProject
import (
"fmt"
"io/ioutil"
"net/http"
)
func init() {
http.HandleFunc("/", handler)
}
func handler(w http.ResponseWriter, r *http.Request) {
site, err := ioutil.ReadFile("../build/index.html")
if err != nil {
panic(err)
}
fmt.Fprint(w, string(site))
}
When I run goapp serve appengine, the website displays properly. However, when I try to deploy it, it only clones two files, i.e. the ones inside the appengine folder.
You can preserve your desired app structure with 3rd party code residing outside your GAE app code directory yet still be able to upload the 3rd party code together with your GAE app code by just symlinking the 3rd party code files/dirs inside the GAE app dir in the desired locations.
The GAE upload/deploy utilities know to replace the symlinks and upload the actual files/dirs the symlinks point to instead, in the respective locations.
Some other GAE-related scenarios in which the symlink technique can be applied:
Sharing entities between App Engine modules
How can I share files (HTML templates) between App Engine modules?
Do I need to copy `skip_files` across multiple YAML files?
How do I access a vendored library from a module in Python Google App Engine?
Can a default service/module in a Google App Engine app be a sibling of a non-default one in terms of folder structure?

Resources