How to add a page route with html extension on nextjs - javascript

I need to convert a non-nextjs page to nextjs. In order to not lose my SEO ranking, I have to create the route with html extension. To make the picture look better, I am adding the folder structure down below.
Unfortunately, this route ending up as 404 on the browser.
What is the problem? Am I allowed to use Next.js routes like that with html extension?

You can do this via the pageExtensions option in nextJS -
I deployed a vercel app to show how this is working
https://html-ext.vercel.app/search-results.html
Steps
Add the pageExtensions to next.config.js files
i.e
pageExtensions: ['html', 'jsx', 'js', 'tsx', 'ts'],
Rename the file under pages directory to .html.js - search-results.html.js in this case.

This naming convention search-result.html is not allowed for public sub-directories .
There are some ways of showing html file in next but I'm not sure they will workcheck this
But you can easily copy everything inside your <body> tag inside your Next js project and it will work properly . How ever you have to manually add your <meta> and other head tags inside Next js built in <Head/> component .

Related

In Nuxtjs dynamic page's css and js isn't loading on page reload

When I open dynamic page first time in Nuxtjs it works fine but when I reload this page manually all of css and js files stop working and page breaks. When I open these styling and js files in browser from its page source, it shows " /* style not found */ " Can anyone guide me why its happening and what is its solution. My app's mode in universal.
This is my nuxt.config.js file ... these files in script tag are located in static/assets folder:
This is my issue:
This is happening because path for pages/project/id page is one directory up for static folder files but direct path for pages/ViewProject file .... I just don't know how I can make path same for all nested as well as direct pages. Can anyone guide me about this ?
After spending a lot of time searching on internet for solutions, finally I figured one solution. Posting it here so it may help anyone and saves anyone's time. So to make nuxt to not modify script paths by adding prefixes I included script src in head object of nuxt.config.js this way :
import { join } from 'path'
export default {
head: {
script: [
{
src: join('/', `assets/plugins/global/plugins.bundle.js`),
body: true
}
]
}
This way now either from nested pages or direct pages under directory pages directory, script are loaded correctly.

Getting blank page while deploying extjs6 application in liferay6?

While trying to deploy Extjs Applicaiton getting blank portlet in Liferay not sure what is the issue can someone tell where to add js file currently I am adding them in .html file also i tried to add them all in Liferay-Portal.xml. one more thing which all file need to add to these location i am adding App.js, Main.js, ext-all.js
Below are files I have added in liferay-portal-xml.
before this I have also tried to add all files in index.jsp
<?xml version="1.0"?>
<liferay-portlet-app>
<portlet>
<portlet-name>d1523bb0-7f00-0001-4cfb-83e75e3cc848</portlet-name>
<requires-namespaced-parameters>false</requires-namespaced-parameters>
<icon>/img/task_list.png</icon>
<instanceable>false</instanceable>
<header-portlet-css></header-portlet-css>
<footer-portlet-javascript>/examplecalculator/ext-all-debug.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/theme-crisp-debug.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/Main.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/MainModel.js</footer-portlet-javascript>
<footer-portlet-javascript>/examplecalculator/app/view/main/MainController.js</footer-portlet-javascript>
<user-principal-strategy>screenName</user-principal-strategy>
<private-request-attributes>false</private-request-attributes>
<active>true</active>
</portlet>
</liferay-portlet-app>
According to the documentation for <footer-portlet-javascript> (emphasis mine):
Set the path of JavaScript that will be referenced in the page's footer relative to the portlet's context path.
e.g. your examplecalculator/ in the declaration doesn't belong there.

Load a directory in a js with flask

I would like to declare in a script, a directory.
$images_dir = '{{url_for('.../pictures')}}';
My flask application directory looks like:
Root
-wep.py
-templates
-gallery.html
-static
-pictures
The picture are located inside the pictures folder, and the html page that contains the script is gallery.html which located in the templates folder.
The purpose of that script is to list all the images that are located in the pictures folder and present them as a gallery view when the gallery.html page is loaded.
The script works fine if I run it in a normal apache webserver though.
When I run the web.py, the debuger gives me the error:
BuildError: ('../pictures', {}, None)
So I think the problem is to declare the directory in flask.
UPDATE:
Im using this guy's script : http://davidwalsh.name/generate-photo-gallery
As you can see in the source code:
/** settings **/
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-images-thumbs/';
Im trying to adjust those line to work with flask.
I think you're misunderstanding the purpose of url_for. url_for is for generating a link to one of your application's HTTP endpoints/view functions. You don't need any flask-specific method to get a list of files. You might find glob or os.listdir() helpful for this purpose. Then you can pass a list of the relevant paths to your template for rendering.

rails: routing to a html file in the root directory

Rails noob here.
I've been fumbling through the process of integrating a wrapbootstrap one page parallax theme (https://wrapbootstrap.com/theme/ashley-one-page-parallax-WB0R11207 ) into my rails 4 app.
After unsuccessfully attempting to move all JS and CSS to the appropriate assets folders, etc, I contacted the template creator support, and they said that to properly implement, I just needed to place all files in the root directory of my app.
I did this, and the page renders properly when I execute the html file from finder, but I don't know how to route to (set up my root within routes.rb) a html file (index page) that's located in my root directory. How do you route to a location thats outside of app/views/etc?
You don't route to a view, you route an action that has associated views with it. just create a custom action in your controller and associate the view with it. if you need further help let me know. we can chat on Skype as well.

Linking to javascript in a view subdirectory?

I have a view folder called 'HelloWorld', inside it I have another folder called 'table' with stuff inside it, I have something located here: table/media/js/jquery.js under the helloworld directory, I've set it to 'copy always' and its build action i s'Content'.
In the index of the view control I do this:
<script type="text/javascript" language="javascript" src="table/media/js/jquery.js")></script>
But for some reason it can't find it, if I try to manually go to it via the URL (i.e. http://localhost:XXXX/HelloWorld/table/media/js/jquery.js) the server still can't find it.
Any ideas how I'm supposed to make this work?
The View folder is not browsable for security reasons, then you cannot serve files like your javascript file.
See the web.config inside the View folder, the handler BlockViewHandler does this,
create a similar structure within the content folder if you need to organize files.
Assuming you have created the following folder: ~/HelloWorld/table/media/js/jquery.js where ~ is the root of your web site I would recommend you using url helkpers in order to generate proper url:
<script type="text/javascript" src="#Url.Content("~/HelloWorld/table/media/js/jquery.js")")></script>
On the other hand the Views folder is a special folder in which you should put only your MVC views and not static files such as css and javascript that are intended to be served directly on the client.

Categories