Is there any way to execute middleware function only for the homepage (root page of the website)
I'm using the following execution order:
- /pages
- _middleware.js
- index.jsx
- /about
- index.jsx
The following _middleware.js will run for both / and for /about pages. Is it possible to run middleware only for / page?
P.S. I know that I can just check if current page path is the root of the website in the middleware itself. However, it is still going to be executed in sub-directories just without my custom checks.
Related
Rather than having an issue, this is more of a knowledge question. I've been diving deep on GAE's docs, Youtube videos and posts, on how to serve a full MERN stack app from a single App Engine service.
I honestly don't have a fine-grained understanding of what App Engine deployment does behind the scenes, but I understand that it exposes your service at port 8080 from a default route assigned (i.e. https://xxxxxxxx.uc.r.appspot.com).
Based on this knowledge, I thought it would be totally possible to statically serve a built React app and handle incoming queries from this same app through /graphql endpoint.
For instance:
This solves CORS since everything shares the same origin.
You limit yourself to a single App Engine service which allows you to remain on the free tier service :)
This is my project structure:
root/
app/
node_modules/
build/ <----- React app built
src/
App.js
index.js
...
server/ <----- In here is the Apollo Express Server v2.x.x serving app/build generated above^
index.js
package.json
node_modules/
app.yaml <---- This file tells App Engine what to do and which routes to expose
...
My app.yaml
runtime: nodejs12
env_variables:
PORT: 4000
handlers:
- url: /
static_files: app/build/index.html
upload: app/build/index.html
- url: /
static_dir: app/build
- url: /graphql
script: auto <---- Supposedly App Engine is smart enough to understand what to do with this route.
I am just not being able to query my App Engine service back from the served to React app.
Does anyone know if what I'm doing is even possible, or there's just no way to configure App Engine with Apollo Server to serve a static webapp + expose a /graphql endpoint at the same time.
Any suggestions or ideas are extremely welcome!
--------------------------------- Update ---------------------------------
After GAEfan suggestion, I updated the app.yaml file:
Yeah okay! I think this is indeed working, I just still get a few errors on the console about resources not found so, here is the internal structure of the build/
build/
static/
css/
js/
asset-manifest.json
favicon.ico
index.html
logo192.png
manifest.json
robots.txt
service-worker.js
I already added to this suggestion json|txt|map|ico resources in the same fashion.
- url: /(.*\.(gif|png|jpg|css|js|json|txt|map|ico))$
static_files: app/build/\1
upload: app/build/.*\.(gif|png|jpg|css|js|json|txt|map|ico)$
This resolved the not found resources issue. And your wildcards already resolved the /graphql endpoint. For some reason, the WebSocket handshake is not being correctly established, but I'm not sure if that's a direct limitation from App Engine, or that the protocol is blocked by default.
Does anyone have knowledge of Websockets over App Engine?
Still more questions, but I'll add this as a partial/temporary answer...
Your first 2 url handlers in app.yaml are duplicates. URL handling with match the first one, and send everything to ...index.html. I assume you have some js, css, or other static files in the build directory. Those will never be made available to the browser. So, you need to use better regex routing, with wildcards, etc.
Let's do these one at a time:
handlers:
- url: /$ # this '$' ends the match, so the url matches only the root domain
static_files: app/build/index.html
upload: app/build/index.html
Next, let's test for .js, .css, etc.:
- url: /(.*\.(gif|png|jpg|css|js))$
static_files: app/build/\1
upload: app/build/.*\.(gif|png|jpg|css|js)$
Then (assuming you have graphql working properly, you can send all other requests there:
- url: /graphql
script: auto
or even:
- url: /(.*) # catches everything else!
script: auto
Show the files or directory tree inside your /build directory, and we can make sure we've accounted for everything.
Ok, learning here. Installed the default vue-cli app on AWS. I do a npm run build. When I launch the default index.html I'm served a blank page. If I go into dist, there is another index.html, that serves links to js files, but still a blank page.
I'm guessing webpack wants me to launch an index.html, but don't see how I can hit that with a browser. No errors anywhere. But no Hello World either. thanks for help.
What I'm seeing in the browser:
<!DOCTYPE html><html><head><meta charset=utf-8><title>hello-world</title><link href=/static/css/app.87e65e7c83fb67c04e58d4461a7fd8e8.css rel=stylesheet></head><body><div id=app></div><script type=text/javascript src=/static/js/manifest.fa7eecfb52900d1cfb0a.js></script><script type=text/javascript src=/static/js/vendor.9baeef453ba99a70f46a.js></script><script type=text/javascript src=/static/js/app.cdfbb21001bbc43de4bc.js></script></body></html>
When you npm run build Webpack should produce an index.html file along with a static/ directory that contains all of your javascript and css. The link to static/ is an absolute link (i.e. http://example.org/static). When you try to open index.html as a file, the browser will look for the /static/ folder on the root of your file system, which of course it won't find.
To run it locally you need to fire up an http server locally. One option is to cd into the directory with a terminal app and run python -m http.server. Then go to http://localhost:8000/. That should work because the root of the directory tree will be the folder from where you are serving it.
Getting it running on AWS S3 will be a matter of making sure you get the static directory in the right place and get the links pointing to it. Hard to say exactly how without knowing details of how you are organizing the site in your bucket.
You can change how the static folder is saved in the webpack config if you need to: https://vuejs-templates.github.io/webpack/static.html
You will find a folder named /dist in your project directory.Just point the index.html file within the /dist directory and rest will work fine I think. I have just done that and it's working fine.
Hope it will work.
Thanks.
The Google Cloud documentation isn't very precise on the available syntax for the app.yaml file used for my Node.js application.
I used the syntax described in the Python documentation for GAE, from which I've found the handlers mecanism:
handlers:
- url: /index.html
static_files: /public/index.html
upload: /public/index.html
I've avoid my expressjs rule to serve the /public/index.html content and finally I got a 404 error, meaning GAE is not serving my page as a static content:
$ curl -i "http://my-project/index.html"
HTTP/1.1 404 Not Found
...
Do you have any clue on this? Node.js is relevant for making APIs, generating dynamic content... But I prefer using the Google backends or even a Nginx server to handle static contents.
Update
Removing the leading slashes didn't fixed the issue. I slightly changed my app.yaml configuration:
handlers:
- url: /api/.*
secure: always
script: app.js
- url: /.*
secure: always
static_dir: public
And I still get 404 Not found on /index.html, and getting
the correct 200 OK answser when calling /api/stuff.
Here is my project tree structure:
Project root
|- app.js
|- app.yaml
|- package.json
|- public/
| `-- css/
| `-- style.css
| `-- js/
| `-- main.js
| `-- index.html
The examples at the very documentation page should normally suffice.
You have a leading / in the static_files and upload values, which should be just relative paths to the top of your app dir.
There could be other reasons as well, the starting point would be the logs for your app, either on your development server or on GAE if already deployed.
Update:
According to the Static directory handlers doc:
A static directory example:
handlers:
# All URLs beginning with /stylesheets are treated as paths to static files in
# the stylesheets/ directory.
- url: /stylesheets
static_dir: stylesheets
url
A URL prefix. This value uses regular expression syntax (and so regexp
special characters must be escaped), but it should not contain
groupings. All URLs that begin with this prefix are handled by this
handler, using the portion of the URL after the prefix as part of the
file path.
Based on this quote I'd suspect the wildcards in the url of the app.yaml's handler spec may be causing issues (for example the /index.html might actually be expanded to /index.html/ by the static_dir parsing logic), I'd replace the url to clearly indicate a directory, like this:
- url: /
secure: always
static_dir: public
I'm not a fan of tying the top level / of the app's namespace to a static dir, but it may be OK for a generally static app. Make sure you always keep this handler spec last in your app.yaml file to avoid issues.
I have a node.js Web App in Azure,
the site loads the index.html, the css, images, etc. but the JS search functionality doesn't initialize,
I did an F12 inspection in Chrome and saw this error
[domain].azurewebsites.net/data/policies.json Failed to load resource: the server responded with a status of 404 (Not Found)
in the Azure console I can see the file list
> cd public
D:\home\site\wwwroot\public
> cd data
D:\home\site\wwwroot\public\data
> ls
D:\home\site\wwwroot\public\data
policies.json
according to the folder/file structure (everything is in the /public folder) I have made a configuration change as follows
/ = "site/webroot/public"
the folders are laid out like this
/public/index.html
/public/data
/public/js
/public/css
etc
Without the config setting the website doesn't see /public as the root folder, so it doesn't find the index.html and nothing loads.
So the site loads, which is great,
the images and css load, which is great
but it says it can't find the .json file in the data folder?
(and using the console the file is definitely there!)
please advise.
You need to set the JSON MIME type in web.config
This link explains how to fix it:
http://blogs.msdn.com/b/africaapps/archive/2013/06/07/how-to-serve-static-json-files-from-a-windows-azure-website.aspx
I have created folder within folder for Views like this :-
views - partials - controls - results
There are multiple .html pages in results folder.
All is working fine locally. But when i do grunt serve:dist, i got error :-
Failed to load resource: the server responded with a status of 404 (Not Found)
When i look in dist folder there are no folders created for controls - results.
What do i need to change in grunt.js files so that this folders get created.