{"id":15193899,"url":"https://github.com/boonkuaeb/sf4-reactjs","last_synced_at":"2026-02-19T16:02:06.186Z","repository":{"id":70035586,"uuid":"147627426","full_name":"boonkuaeb/sf4-reactjs","owner":"boonkuaeb","description":"Symfony4 and ReactJS boilerplate","archived":false,"fork":false,"pushed_at":"2018-09-14T10:34:29.000Z","size":857,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-11T18:50:11.319Z","etag":null,"topics":["reactjs-boilerplate","reactjs-es6","symfony4","webpack3"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boonkuaeb.png","metadata":{"files":{"readme":"README-From-Scratch.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-06T06:25:16.000Z","updated_at":"2018-09-14T10:34:30.000Z","dependencies_parsed_at":"2023-06-04T22:00:11.216Z","dependency_job_id":null,"html_url":"https://github.com/boonkuaeb/sf4-reactjs","commit_stats":{"total_commits":41,"total_committers":2,"mean_commits":20.5,"dds":"0.024390243902439046","last_synced_commit":"b40bca5efbc21e9f6674132f597b1cb7a1dc3513"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boonkuaeb%2Fsf4-reactjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boonkuaeb%2Fsf4-reactjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boonkuaeb%2Fsf4-reactjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boonkuaeb%2Fsf4-reactjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boonkuaeb","download_url":"https://codeload.github.com/boonkuaeb/sf4-reactjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241314988,"owners_count":19942761,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["reactjs-boilerplate","reactjs-es6","symfony4","webpack3"],"created_at":"2024-09-27T22:07:17.154Z","updated_at":"2025-10-17T10:23:44.004Z","avatar_url":"https://github.com/boonkuaeb.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"Symfony4 and React JS from scratch\n=================================\n\nTo get it working, follow these steps:\n\n##Setup Project\n\n\nSet up symfony project\n\n````\n composer create-project symfony/website-skeleton sf4-reactjs\n \n````\n\n\nCreate sf4-reactjs/src/Entity/User.php\n\n\n**Setup the Database**\n\nOpen `.env` and make sure the `DATABASE_URL` setting is\ncorrect for your system.\n```\n...\nDATABASE_URL=mysql://root:mysecret@127.0.0.1:6667/sf4_reactjs_db\n...\n```\n\nThen, create the database and the schema!\n\n```\nphp bin/console doctrine:database:create\n```\n\n\n##Install FosUserBundle\n```\ncomposer require friendsofsymfony/user-bundle  \n```\n\nUpdate sf4-reactjs/config/packages/framework.yaml \n```\nframework:\n...    \n    # just here until FOSUserBundle fully removes their templating dependency\n    templating:\n        engines: [twig]\n```\n\nCreate User Entity file\n```\n\u003c?php\nnamespace AppBundle\\Entity;\nuse FOS\\UserBundle\\Model\\User as BaseUser;\nclass User extends BaseUser\n{\n}\n```\n\nCreate sf4-reactjs/config/packages/fos_user.yaml\n```\nfos_user:\n  db_driver: orm\n  firewall_name: main\n  user_class: App\\Entity\\User\n  registration:\n    form:\n      type: App\\Form\\Type\\RegistrationType\n  from_email:\n    address: 'bk@mail.com'\n    sender_name: BK\n\n```\n\nGenerate the migration for our User class:\n```\nphp bin/console doctrine:migrations:diff\n```\n\n```\nphp bin/console doctrine:migrations:migrate\n```\n\n**Security**\n\nconfig/packages/security.yaml\n```\nsecurity:\n    encoders:\n        App\\Entity\\User: bcrypt\n```\n\n```\nsecurity:\n    # http://symfony.com/doc/current/book/security.html#where-do-users-come-from-user-providers\n    providers:\n        fos_userbundle:\n            id: fos_user.user_provider.username\n```\n**Importing the Routing**\n\nFind your config/routes.yaml file and paste that on top.\n```\nfos_user:\n    resource: '@FOSUserBundle/Resources/config/routing/all.xml'\n```\n\n\n##Security Setup\n**Configuring Logout**\n\nconfig/packages/security.yaml\n```\nsecurity:\n    ...\n    firewalls:\n        ...\n        main:\n            ...\n            logout: ~\n```\n\n**Configuring form_login Security**\nconfig/packages/security.yaml\n```\n\nsecurity:\n\n    firewalls:\n        ...\n        main:\n            ...\n            form_login:\n                csrf_token_generator: security.csrf.token_manager\n```\n\n**Adding Remember Me Functionality**\nconfig/packages/security.yaml\n```\nsecurity:\n\n    firewalls:\n\n        main:\n\n            remember_me:\n                secret: '%kernel.secret%'\n\n```\n\nUpdate CSS for template\n```$xslt\ntwig:\n    ...\n    form_themes: ['bootstrap_4_layout.html.twig']\n```\n\nClear Cache\n```$xslt\nphp bin/console cache:clear\n```\nRun Server\n```$xslt\nphp bin/console server:run \n```\n\nTest Login\n```$xslt\nhttp://127.0.0.1:8000/login\n```\n## Install FOSJsRoutingBundle\n\n\n\n##Setup Webpack\n```$xslt\ncomposer require webpack-encore\nyarn install\n```\n\nUpdate `webpack.config.js` as below\n```\n// webpack.config.js\nvar Encore = require('@symfony/webpack-encore');\nconst CopyWebpackPlugin = require('copy-webpack-plugin');\n\nEncore\n\n// the project directory where all compiled assets will be stored\n    .setOutputPath('public/build/')\n\n    // the public path used by the web server to access the previous directory\n    .setPublicPath('/build')\n\n    // will create public/build/app.js and public/build/app.css\n    .createSharedEntry('layout', './assets/js/layout.js')\n\n    .enableBuildNotifications()\n\n    .autoProvidejQuery()\n\n    .addPlugin(new CopyWebpackPlugin([\n        { from: './assets/static', to: 'static' }\n    ]))\n\n    .enableSassLoader()\n    .enableSourceMaps(!Encore.isProduction())\n\n    .cleanupOutputBeforeBuild()\n    .enableVersioning()\n\n;\n\n// export the final configuration\nmodule.exports = Encore.getWebpackConfig();\n```\n\nUpdate `package.json` as below\n```$xslt\n{\n    \"devDependencies\": {\n        \"@symfony/webpack-encore\": \"^0.20.1\",\n        \"bootstrap\": \"3\",\n        \"copy-webpack-plugin\": \"^4.5.2\",\n        \"font-awesome\": \"4\",\n        \"jquery\": \"^3.3.1\",\n        \"node-sass\": \"^4.9.3\",\n        \"sass-loader\": \"^7.1.0\",\n        \"sweetalert2\": \"^7.26.14\",\n        \"webpack-notifier\": \"^1.6.0\"\n    },\n    \"scripts\": {\n        \"dev-server\": \"encore dev-server\",\n        \"dev\": \"encore dev\",\n        \"watch\": \"encore dev --watch\",\n        \"build\": \"encore production\"\n    }\n}\n\n```\nRun Update Again\n```$xslt\nyarn install\nyarn watch\n```\n\nOpen browser\n```$xslt\nhttp://127.0.0.1:8000\n```\n\n\n## Update version file in symfony project \n```\n\nframework:\n    assets:\n        json_manifest_path: '%kernel.project_dir%/public/build/manifest.json'\n\n```\n\n## Customize Login\n\nCreate new file `templates/bundles/FOSUserBundle/layout.html.twig`\n```\n{% extends 'base.html.twig' %}\n\n{% block body %}\n    \u003cdiv class=\"row\"\u003e\n        \u003cdiv class=\"col-md-12\"\u003e\n            {% block fos_user_content %}{% endblock %}\n        \u003c/div\u003e\n    \u003c/div\u003e\n{% endblock %}\n\n```\n\nCreate login page file `templates/bundles/FOSUserBundle/Security/login.html.twig`\n```\n{% extends '@FOSUser/layout.html.twig' %}\n\n{% trans_default_domain 'FOSUserBundle' %}\n\n{% block stylesheets %}\n    {{ parent() }}\n\n    \u003clink rel=\"stylesheet\" href=\"{{ asset('build/login.css') }}\" /\u003e\n{% endblock %}\n\n{% block javascripts %}\n    {{ parent() }}\n\n    \u003cscript src=\"{{ asset('build/login.js') }}\"\u003e\u003c/script\u003e\n{% endblock %}\n\n{% block fos_user_content %}\n    \u003cdiv class=\"container\"\u003e\n        \u003cdiv class=\"wrapper\"\u003e\n            \u003cform action=\"{{ path(\"fos_user_security_check\") }}\" method=\"post\" class=\"form-signin\"\u003e\n                \u003ch3\u003e\u003cimg class=\"dumbbell\" src=\"{{ asset('build/static/dumbbell.png') }}\"\u003eLogin! Start Lifting!\u003c/h3\u003e\n                \u003cdiv class=\"js-recommended-login\"\u003e\n                    \u003ca href=\"#\" class=\"js-show-login\"\u003eDon't know the login?\u003c/a\u003e\n                    \u003cdiv class=\"js-recommended-login-details\" style=\"display: none;\"\u003e\n                        Sir or madam, might I recommend that you try the following login details:\n                        \u003ctable class=\"table\"\u003e\n                            \u003ctbody\u003e\n                                \u003ctr\u003e\n                                    \u003cth\u003eUsername\u003c/th\u003e\n                                    \u003ctd\u003ecindy_clawford\u003c/td\u003e\n                                \u003c/tr\u003e\n                                \u003ctr\u003e\n                                    \u003cth\u003ePassword\u003c/th\u003e\n                                    \u003ctd\u003epumpup\u003c/td\u003e\n                                \u003c/tr\u003e\n                            \u003c/tbody\u003e\n                        \u003c/table\u003e\n                    \u003c/div\u003e\n                \u003c/div\u003e\n                \u003chr class=\"colorgraph\" /\u003e\n\n                \u003cbr/\u003e\n\n                {% if error %}\n                    \u003cdiv class=\"alert alert-block alert-danger\"\u003e{{ error.messageKey|trans }}\u003c/div\u003e\n                {% endif %}\n\n                \u003cinput type=\"text\"\n                       class=\"form-control js-login-field-username\"\n                       name=\"_username\"\n                       value=\"{{ last_username }}\"\n                       required=\"required\"\n                       placeholder=\"{{ 'security.login.username'|trans }}\"\n                /\u003e\n                \u003cinput type=\"password\"\n                       class=\"form-control\"\n                       name=\"_password\"\n                       required=\"required\"\n                       placeholder=\"{{ 'security.login.password'|trans }}\"\n                /\u003e\n\n                \u003cinput type=\"checkbox\" name=\"_remember_me\" checked style=\"display: none;\" /\u003e\n\n                \u003cinput type=\"hidden\" name=\"_csrf_token\" value=\"{{ csrf_token }}\" /\u003e\n                \u003cbutton type=\"submit\" class=\"btn btn-primary btn-lg btn-block\"\u003e\n                    Login\n                \u003c/button\u003e\n            \u003c/form\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n{% endblock fos_user_content %}\n```\n\n\n\nCreate `/sf4-reactjs/assets/js/login.js`\n```\n'use strict';\n\nimport $ from 'jquery';\nimport '../css/login.css';\n\n$(document).ready(function() {\n    $('.js-recommended-login').on('click', '.js-show-login', function(e) {\n        e.preventDefault();\n\n        $('.js-recommended-login-details').toggle();\n    });\n\n    $('.js-login-field-username').on('keydown', function(e) {\n        const $usernameInput = $(e.currentTarget);\n        // remove any existing warnings\n        $('.login-long-username-warning').remove();\n\n        if ($usernameInput.val().length \u003e= 20) {\n            const $warning = $('\u003cdiv class=\"login-long-username-warning\"\u003eThis is a really long username - are you sure that is right?\u003c/div\u003e');\n            $usernameInput.before($warning);\n        }\n    });\n});\n\n```\n\nUpdate `webpack.config.js`\n```$xslt\n\nEncore\n...\n    .createSharedEntry('layout', './assets/js/layout.js')\n    .addEntry('login', './assets/js/login.js')\n\n```\n\nRun `yarn watch` again.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboonkuaeb%2Fsf4-reactjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboonkuaeb%2Fsf4-reactjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboonkuaeb%2Fsf4-reactjs/lists"}